Rules for modern CSS.
Many new CSS features landed in browsers over the past few years, including:
@layerand@scopefor organising and encapsulating styles@containerqueries and units, such ascqi, for size-aware components:has()for relational selectorsoklch()for colour palettes with perceptually uniform lightnesslight-dark()for colour-scheme supportclamp()for fluid type and spacing
These features help us create robust interfaces that adapt to users' devices and preferences. They replace older patterns like fixed breakpoints, which produce interfaces with seams and brittle code.
LLMs are capable of writing modern CSS. They just need a nudge to use it, or they'll default to older patterns. The agent skill does that, flagging them and pointing LLMs (and people) towards the newer alternatives.
Other modern CSS agent skills have appeared since. I created this GitHub org to pool our efforts, as Stylelint did for CSS linting.
The rules are a living document. If you've spotted a rule that's missing: