Opinionated rules for modern CSS, so agents and people write it consistently.
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 componentsoklch()for colour palettes with perceptually uniform lightnesslight-dark()for colour-scheme supportclamp()for fluid type and spacing
These features help us create interfaces that adapt to users' devices and preferences. They replace older patterns like fixed breakpoints, which produce interfaces with seams and brittle code.
Left alone, agents default to the outdated CSS they were trained on. The Modern Web Guidance skill fixes that at scale.
It still leaves choices open: which colour space, whether to scope, when to nest, how to size type. The rules in this skill make them once, so agents and people write the same CSS.
Spotted a choice Modern Web Guidance leaves open, or a gap that needs plugging? Propose a rule that settles or plugs it: