| name | enhancing-progressively |
| description | CSS-first approach - use CSS before JavaScript. Triggers: レイアウト, スタイル, 位置, アニメーション, 表示/非表示, トグル, レスポンシブ, CSS Grid, Flexbox, transforms, transitions, CSSのみ, JavaScript不要, シンプル |
| allowed-tools | Read, Write, Edit, Grep, Glob |
Progressive Enhancement
Purpose
Prefer CSS solutions over JavaScript. "The best code is no code."
Priority
- HTML - Structure and semantics
- CSS - Visual presentation and layout
- JavaScript - Only when truly necessary
CSS-First Decision Flow
| Need | CSS Solution | Avoid JS |
|---|---|---|
| Layout | Grid / Flexbox | Manual position calculation |
| Position change | transform (GPU accelerated) |
top/left (causes reflow) |
| Show/Hide | visibility / opacity |
display toggle |
| State change | :target / :checked / :has() |
setState, toggleClass |
| Responsive | Media / Container queries | window.innerWidth |
| Animation | transition / animation |
requestAnimationFrame |
Native HTML First
Use built-in browser elements:
<details>/<summary>- Accordion (no JS)<dialog>- Modal (minimal JS:showModal())[data-tooltip]+ CSS::after- Tooltip (no JS)
When JavaScript IS Required
CSS cannot handle:
- API data fetching
- Form submission / validation
- Complex multi-interaction state
- Dynamic content generation
- Browser APIs (localStorage, WebSocket, etc.)
Decision Questions
Before writing JS, ask:
- "Can CSS solve this?" → Check the decision flow above
- "Is this needed now?" (YAGNI) → No evidence = don't implement
- "Simplest solution?" (Occam's Razor) → 3 lines CSS > 50 lines JS
References
Principles (rules/)
- @~/.claude/rules/development/PROGRESSIVE_ENHANCEMENT.md - CSS-first approach, outcome-first development
- @~/.claude/rules/reference/OCCAMS_RAZOR.md - Simplest solution wins
- @~/.claude/rules/reference/YAGNI.md - Build only what's needed
Related Skills
applying-code-principles- SOLID, DRY原則optimizing-performance- パフォーマンス最適化
Used by Commands
/code --frontend- フロントエンド実装時/audit- CSS-first アプローチ確認