CSS-first approach - use CSS before JavaScript. Use when implementing layouts, animations, or toggles, or when user mentions レイアウト, スタイル, 位置, アニメーション, 表示/非表示, トグル, レスポンシブ, CSS Grid, Flexbox, transforms, transitions, CSSのみ, JavaScript不要, シンプル
View on GitHubthkt/claude-config
development-skills
January 22, 2026
Select agents to install to:
npx add-skill https://github.com/thkt/claude-config/blob/main/skills/enhancing-progressively/SKILL.md -a claude-code --skill enhancing-progressivelyInstallation paths:
.claude/skills/enhancing-progressively/# Progressive Enhancement
## Priority
| Priority | Approach | Examples |
| -------- | -------- | ---------------------------------- |
| 1 | HTML | Semantic elements, native inputs |
| 2 | CSS | Grid, Flexbox, :has(), transitions |
| 3 | JS | Only when truly necessary |
## Detection
| JS Pattern | CSS Alternative |
| ---------------------------- | ---------------------------------- |
| `element.style.display` | CSS `:has()`, `[open]`, `<dialog>` |
| `addEventListener('resize')` | CSS `@media`, `clamp()`, `min()` |
| `getBoundingClientRect` | CSS Grid, Flexbox, `gap` |
| `setInterval` for animation | CSS `transition`, `@keyframes` |
| `classList.toggle` | CSS `:checked`, `:target` |
| `scrollTo`, `scrollIntoView` | CSS `scroll-behavior: smooth` |
| `matchMedia` | CSS `@media`, `@container` |