enhancing-progressively
CSS-first approach - use CSS before JavaScript. Triggers: レイアウト, スタイル, 位置, アニメーション, 表示/非表示, トグル, レスポンシブ, CSS Grid, Flexbox, transforms, transitions, CSSのみ, JavaScript不要, シンプル
SKILL.md
Full skill instructions
プログレッシブエンハンスメント
優先順位
| 優先度 | アプローチ | 例 |
|---|---|---|
| 1 | HTML | セマンティック要素、ネイティブ入力 |
| 2 | CSS | Grid, Flexbox, :has(), transitions |
| 3 | JS | 本当に必要な場合のみ |
検出
| JSパターン | CSS代替 |
|---|---|
element.style.display | CSS :has(), [open], <dialog> |
addEventListener('resize') | CSS @media, clamp(), min() |
getBoundingClientRect | CSS Grid, Flexbox, gap |
setInterval アニメーション | CSS transition, @keyframes |
classList.toggle | CSS :checked, :target |
scrollTo, scrollIntoView | CSS scroll-behavior: smooth |
matchMedia | CSS @media, @container |