enhancing-progressively
CSS-first approach - use CSS before JavaScript. Triggers: レイアウト, スタイル, 位置, アニメーション, 表示/非表示, トグル, レスポンシブ, CSS Grid, Flexbox, transforms, transitions, CSSのみ, JavaScript不要, シンプル
Installation
Follow the repository instructions for this skill and your agent. Review the files and dependencies before adding it to your workflow.
View source ↗GuidesSkill 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 |
Examples
Read the usage examples in the source repository.
View source ↗Source history
- Indexed on
- 2026-01-20
- Index updated
- 2026-01-26
- Branch
- main
Index and sync dates describe this directory. View the source repository for code history.
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!