Context Canvas CSS ownership

Source and version

Repository path

.agents/skills/context-canvas-css-ownership/SKILL.md

Source revision

c1e35fdd57c2193812c2b183955aca15a5020be8

Source SHA-256

089d578df27a47ee4307770714621f078fa2decb4f9dec452bce4dc7e72b3250

Publication standing

Public ready

Included source files

• .agents/skills/context-canvas-css-ownership/references/scenarios.md
  SHA-256 d0a0027bf1febe7e0562ffefe10a0d5ddec4bd334be4d16d82ed248d7d46e93c
• .agents/skills/context-canvas-css-ownership/references/surface-color-and-state-roles.md
  SHA-256 28dc40c0534a7c7d914c7528fec4e53e9be50894ef7fed265f09e5bb60498074

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 and proportionate evidence for the changed boundary, with reduced unrelated route CSS when reduction is an intended outcome.

## 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.

Comments name non-obvious ownership, load-order, cascade, fallback, or
containment mechanics and leave self-evident declarations alone. They support
AI and nonvisual code reading; semantic HTML, alternatives, labels, and
document order remain the rendered accessibility owners.

### Rule: Architecture views distinguish relationships and quantities

A CSS architecture view labels stylesheet load order, semantic ownership,
consumer membership, and generated delivery as distinct relationships.
Before-and-after delivery views keep raw bytes, compressed bytes, and authored
request counts separate and pair them with exact values and source coordinates.
Diagrams improve re-entry; declaration parity, computed styles, and rendered
observations retain behavioral authority.

### Rule: Comparison preserves composition

Local initial-state images at `390 × 844`, `1440 × 1000`, and `2560 × 1440` remain available for comparison of hierarchy, composition, content presence, overflow, and responsive movement. [Context Canvas visual verification](../context-canvas-visual-verification/SKILL.md) selects the smallest fitting source or rendered observation, including consequential states, affected routes or families, and source-adjacent widths when a responsive seam changes. 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. **Fitting observation:** The visual-verification contract selects source inspection or the smallest fitting route/family, state, and viewport comparison. Generated captures remain in ignored `.visual-runs/`.
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; affected cascade seams preserve their intended winning declarations; and fitting evidence establishes the changed behavior while preserving meaningful route variation. When reduction is an intended outcome, affected routes also load less unrelated CSS.