Modern CSS, written consistently.
Opinionated rules on top of Modern Web Guidance: a coding agent skill applies them and a Stylelint config enforces them.
Get started
.card {
color: #f5f5f5;
width: 600px;
padding: 16px 0;
}
@media (max-width: 768px) {
.card {
padding: 12px 0;
}
}
.card:hover {
background-color: #e0e0e0;
}@layer components {
@scope (.card) to (.slot) {
:scope {
color: light-dark(oklch(96% 0 0deg), oklch(25% 0 0deg));
container-type: inline-size;
padding-block: clamp(1rem, 2cqi, 2rem);
&:hover {
background-color: oklch(from currentcolor l c h / 10%);
}
}
}
}Before & after with Claude Opus 5.5.
What are the rules
Architecture
Specificity with
@layer, encapsulation with@scope, nesting, and ranged queriesLayout
Flow-relative layouts, two-value
display, fluid spacing with container units, and auto-growing text areas withfield-sizing: contentTypography
Fluid type sizes with
clamp(), and text wrapping withtext-wrap: balanceandprettyColors
Perceptually uniform lightness with
oklch(), color scheme support withlight-dark(), and relative colorsMotion
Respect motion preferences with
prefers-reduced-motion: no-preference
Catch mistakes
Even with the skill, agents won't always get it right.
Use Stylelint with stylelint-config-modern to enforce every rule a linter can.
Why these rules
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 color 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.
Contribute
Spotted a choice left open or a gap that needs plugging? Open an issue to propose a rule that settles or plugs it.