modern-css — Claude Code skill: what it does, how to install
Gives an agent a modern CSS reference for new stylesheets, legacy CSS refactors, and questions about newer browser features.
npx skills add paulirish/dotfiles --skill modern-css -a claude-codeWhat modern-css does
This skill guides CSS work with container queries, media query range syntax, subgrid, and Masonry. It covers theming through light-dark(), oklch colours, color-mix(), and relative colour syntax.
The reference includes text-wrap, clamp(), dynamic viewport units, scroll-driven animation, View Transitions, @starting-style, and linear(). It also shows @property, calc-size(auto), cascade layers with @layer, dialogs, popovers, and anchor positioning.
Cross-document View Transitions have limited availability in Chrome and Safari 18.2+, so browser support needs checking before you rely on them. Tree counting functions and conditional CSS with if() are marked as coming soon.
What it helps with
- build a responsive component with container queries
- rewrite legacy media queries with range syntax
- set up light and dark themes with
light-dark() - animate an element to
autoheight - organise styles with
@layer
Example prompts for the agent
- Create card styles with container queries and
cqiunits. - Refactor the old theme CSS using
light-dark()andoklch. - Add scroll-driven entry animations with
animation-timeline.
How to install modern-css
1Skills CLI (Vercel)
npx skills add paulirish/dotfiles --skill modern-css -a claude-code2Manually: put the files in place
~/.claude/skills/modern-css/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/modern-css/
1Skills CLI (Vercel)
npx skills add paulirish/dotfiles --skill modern-css -a codex2Manually: put the files in place
.agents/skills/modern-css/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add paulirish/dotfiles --skill modern-css -a cursor2Manually: put the files in place
.cursor/skills/modern-css/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install paulirish/dotfiles modern-css2Manually: put the files in place
.github/skills/modern-css/SKILL.md1Skills CLI (Vercel)
npx skills add paulirish/dotfiles --skill modern-css -a gemini-cli2Platform CLI
gemini skills install https://github.com/paulirish/dotfiles --path agents/skills/modern-cssManually: put the files in place
.devin/skills/modern-css/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add paulirish/dotfiles --skill modern-css -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about modern-css
How do I install modern-css in Claude Code?
Run npx skills add paulirish/dotfiles --skill modern-css -a claude-code, then run npx skills add paulirish/dotfiles --skill modern-css -a claude-code again. The skill file is at ~/.claude/skills/modern-css/SKILL.md.
What does modern-css do?
It gives the agent reference material for modern CSS layouts, colours, typography, motion, and interactive components. Use it when creating CSS files or refactoring older styles.
What are the View Transitions limits?
Same-document View Transitions are marked Baseline Newly Available. Cross-document transitions have limited availability in Chrome and Safari 18.2+.
