# modern-css

Gives an agent a modern CSS reference for new stylesheets, legacy CSS refactors, and questions about newer browser features.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 544 installs · ★ 4361
- Author: paulirish
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/paulirish/dotfiles/tree/HEAD/agents/skills/modern-css/SKILL.md
- Updated: 2026-10-03
- HTML: https://affpapa.org/en/nevibecode/skills/modern-css

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add paulirish/dotfiles --skill modern-css -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/modern-css/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/modern-css/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add paulirish/dotfiles --skill modern-css -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/modern-css/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add paulirish/dotfiles --skill modern-css -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/modern-css/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install paulirish/dotfiles modern-css
```

2. **Manually: put the files in place**
- File: `.github/skills/modern-css/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add paulirish/dotfiles --skill modern-css -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/paulirish/dotfiles --path agents/skills/modern-css
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/modern-css/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add paulirish/dotfiles --skill modern-css -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/paulirish/dotfiles/tree/HEAD/agents/skills/modern-css/SKILL.md

## When to use it
- 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 `auto` height
- organise styles with `@layer`

## Example prompts
- Create card styles with container queries and `cqi` units.
- Refactor the old theme CSS using `light-dark()` and `oklch`.
- Add scroll-driven entry animations with `animation-timeline`.

## Similar
- [css-native](https://affpapa.org/en/nevibecode/skills/css-native.md) — skill · 1100 installs
- [css](https://affpapa.org/en/nevibecode/skills/css.md) — skill · 1200 installs
- [responsive-design](https://affpapa.org/en/nevibecode/skills/responsive-design.md) — skill · 20956 installs
- [responsive-patterns](https://affpapa.org/en/nevibecode/skills/responsive-patterns.md) — skill · 1600 installs
- [converting-css-to-tailwind](https://affpapa.org/en/nevibecode/skills/converting-css-to-tailwind.md) — skill · 423 installs
- [converting-css-modules-to-tailwind](https://affpapa.org/en/nevibecode/skills/converting-css-modules-to-tailwind.md) — skill · 392 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md