CSS First

Solve interface work with semantic HTML and CSS before proposing JavaScript. Prefer modern, standards-based CSS when it matches the user's target browsers and preserve the core experience with progressive enhancement when support is incomplete.

Workflow

1. Identify the visual or interaction intent and inspect the project's framework, browser targets, writing modes, and existing conventions.
2. Search css-demos/INDEX.md for a matching pattern.
3. When support or recency matters, fetch the current Baseline record using references/live-mdn-fetch.md. Treat checked-in labels as dated snapshots, not permanent facts.
4. Rank solutions by semantic fit, accessibility, interoperability, and maintenance cost. Prefer logical properties and native CSS capabilities.
5. If the selected feature is Limited Availability or has no WebStatus record, show a usable fallback and gate the enhancement with @supports when practical.
6. Verify syntax and behavior in a real browser when the environment provides one.