A reusable agent skill for modern, accessible CSS-first implementation advice. It combines semantic intent analysis, logical properties, progressive enhancement, 72 CSS demos, and live Web Platform Baseline data.
- Baseline labels now use the official WebStatus definitions, never usage-percentage buckets.
scripts/update_baseline.pyrefreshes mapped demo headers and index entries fromapi.webstatus.dev.- The catalog includes author-facing CSS additions from Chrome 148 through 152.
- Features without an exact WebStatus record remain explicitly experimental/unknown and cite a browser release note or specification.
Ask an agent to use $css-first for CSS implementation, browser support, current
Baseline status, or modern web-platform feature questions.
The skill will:
- identify the interface intent and repository context;
- prefer semantic HTML and CSS over unnecessary JavaScript;
- choose logical, accessible, interoperable primitives;
- fetch current Baseline data when support matters;
- provide a fallback for Limited Availability or experimental features;
- verify browser-facing behavior when a browser is available.
| Label | Official meaning |
|---|---|
| 🟢 Widely Available | Interoperable in the core browser set for at least 30 months |
| 🔵 Newly Available | Interoperable in the core browser set for less than 30 months |
| 🟡 Limited Availability | Core-browser interoperability is incomplete |
| 🟣 Experimental / unknown | No usable WebStatus record; inspect releases and specs |
Baseline is not a market-share percentage. Project browser targets can still be stricter than a generic Baseline label.
python3 scripts/update_baseline.py --check
python3 scripts/update_baseline.py --writeThe updater uses the official WebStatus API, validates the response shape, and leaves unmapped release features for manual review.
SKILL.md— agent instructions and routingreferences/live-mdn-fetch.md— trusted live-data workflowreferences/rules/— CSS-first decision rulescss-demos/INDEX.md— full demo catalogcss-demos/— production-oriented CSS examples by categoryscripts/update_baseline.py— repeatable Baseline snapshot updaterscripts/test_update_baseline.py— updater regression testsagents/openai.yaml— Codex UI metadata
The catalog includes name-only and comma-separated container queries, expanded
@supports, revert-rule, gap decorations, shape improvements, animatable zoom,
text-fit, modern image values, background-clip: border-area, print margin safety,
balanced flex wrapping, overscroll chaining, SVG path length, ruby overhang, media
state pseudo-classes, relative alpha, installed-app drag regions, and accent colors.
See css-demos/INDEX.md for current labels and source links.
MIT