Public-ready repository skill

Context Canvas CSS ownership

Establishes legible Context Canvas CSS ownership. Applies when expanded.css, cascade diagnosis, selector or token migration, route bundles, first-paint work, or Visual Fidelity Contract mapping enters scope.

Source and version

Repository path
.agents/skills/context-canvas-css-ownership/SKILL.md
Source revision
341bceb719a28be760775b6322021d78abaa919b
Source SHA-256
03e8bbc4695aeec710a218b65a0212985662a34e0e3b4b24172c7945e37bf0b3
Publication standing
Public ready

Included source files

Complete skill source

The Markdown below matches the exact source text. The format link above opens the file on its own.

---
name: context-canvas-css-ownership
description: Establishes legible Context Canvas CSS ownership. Applies when expanded.css, cascade diagnosis, selector or token migration, route bundles, first-paint work, or Visual Fidelity Contract mapping enters scope.
---

# Context Canvas CSS ownership

## Contract

- **What:** A consumer-grounded move from broad CSS terrain into legible core, component, contract, route, or legacy ownership.
- **When:** `expanded.css`, cascade behavior, selector naming, first paint, visual-contract mapping, or route-family bundles enter scope.
- **Boundaries:** Readable authored source remains the collaboration surface. Route fingerprints and meaningful variation remain available. HTML carries an explicit, shallow stylesheet order for first paint.
- **Result:** Findable ownership, smaller unrelated route CSS, and an affected-family visual comparison.

## Rules

### Rule: Ownership triage precedes shared-sheet editing

Before a broadly loaded stylesheet receives a material change, resolve the conceptual owner, actual consumers, load position, route-owned variation, and extension point. Naming ownership and relocating source remain separate decisions: a stable shared responsibility can stay in place with a clear contract, while a bounded multi-consumer responsibility can move as one complete component. Physical relocation proceeds only after path and cascade consequences are known.

### Rule: Consumer evidence precedes movement

Each rule is traced through definitions, duplicates, source-order neighbors, HTML and JavaScript consumers, media conditions, print, reduced motion, and forced colors before ownership changes.

### Rule: Complete rules are movement units

Line coordinates locate ownership terrain; complete selector blocks and their containing at-rules define the move. A split media, support, print, reduced-motion, or forced-color group is reconstructed around whole owned rules, and mixed selector groups separate only through consumer evidence. Relative order remains explicit wherever it affects the cascade.

### Rule: File boundaries are cascade boundaries

Declaration parity establishes that moved behavior remains present. Computed ownership at every moved-versus-shared seam establishes that the same declaration still wins. When an extracted stylesheet loads after rules that once followed it inside a monolith, explicit load order, low-specificity defaults, or a deliberately retained seam preserves composition and utility precedence.

### Rule: Names describe ownership

CSS filenames, selectors, tokens, and comments describe reusable visual or structural meaning. Content identity remains available in routes, titles, metadata, references, and visible prose.

### Rule: Comparison preserves composition

Local initial-state images at `390 × 844`, `1440 × 1000`, and `2560 × 1440` support comparison of hierarchy, composition, content presence, overflow, and responsive movement. System-font and raster differences remain ordinary variation.

### Rule: Visual strain routes to the owning source

A material mismatch is described through observable shape and affected family. Intentional variation can remain open. A regression receives the smallest adequate move in the CSS source that owns the affected state, with remaining uncertainty preserved.

## Ownership map

- `core/`: tokens, foundation, reading measure, accessibility modes, and demonstrated layout primitives.
- `components/`: reusable structures with multiple real consumers.
- `contracts/`: semantic grammar tied to a Visual Fidelity Contract.
- `routes/`: page-family composition, color, rhythm, density, and source-earned experiments.
- `legacy/`: supported rules whose ownership remains uncertain.

Each authored module carries a short header naming owner, neutral consumer scopes or route families, load position, related contract, and room for variation. A non-CSS ownership map retains actual route filenames and content identity. Conservative generated bundles can serve distribution after source boundaries stabilize.

## Operating sequence

1. **Ownership triage:** Before editing, name the likely owner, consumer scope, load position, route variation, extension point, and whether source movement is part of the change.
2. **Consumer map:** The ownership pass locates definitions, cascade neighbors, conditions, and every consumer.
3. **Owner selection:** Each rule receives a core, component, contract, route, or legacy classification.
4. **Load shape:** Every affected route receives an explicit direct-stylesheet order.
5. **Coherent move:** One component or route responsibility moves or receives new names at a time, through complete rules and reconstructed conditional containers.
6. **Cascade seam reading:** Computed styles confirm the winning declaration at moved-versus-shared boundaries whose relative file position changed.
7. **Local comparison:** The affected family is captured and compared in ignored `.visual-runs/` at the three standing viewports.
8. **Findability reading:** A cold-collaborator reading confirms that owner, consumers, load position, contract relationship, and extension point remain visible.

## Representative scenario

### Scenario: A source-specific selector obscures reusable meaning

- Given a selector names the source story rather than its structural role
- And consumer evidence shows a reusable composition or component
- When the selector migrates with its owner
- Then the receiving name describes structural meaning
- And source identity remains in content and metadata rather than the CSS namespace

## Conditional scenarios

The skill loads [references/scenarios.md](references/scenarios.md) when the work includes the three-movement Debrief namespace or the Debriefs Reading types badge-height probe.

The skill loads [references/surface-color-and-state-roles.md](references/surface-color-and-state-roles.md) when painted backgrounds, color roles, link states, contrast, print, forced colors, or emerging CSS adoption enter the ownership decision.

## Completion

CSS ownership completes when class, owner, consumers, load position, contract relationship, and extension point are easy to find; cascade seams preserve their intended winning declarations; affected routes load less unrelated CSS; and the family retains meaningful visual behavior.