ReddRadar
Agent skill
enhancing-progressively
CSS-first approach - use CSS before JavaScript. Triggers: レイアウト, スタイル, 位置, アニメーション, 表示/非表示, トグル, レスポンシブ, CSS Grid, Flexbox, transforms, transitions, CSSのみ, JavaScript不要, シンプル
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/enhancing-progressively
SKILL.md
プログレッシブエンハンスメント
優先順位
| 優先度 | アプローチ | 例 |
|---|---|---|
| 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 |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?