Profile My skills Saved My plugins Edit profile Submit a skill

Enhancing Progressively

CSS-first approach - use CSS before JavaScript. Triggers: レイアウト, スタイル, 位置, アニメーション, 表示/非表示, トグル, レスポンシブ, CSS Grid, Flexbox, transforms, transitions, CSSのみ, JavaScript不要, シンプル

majiayu000 Updated 567 repo stars
Web & Frontend

File contents

Progressive Enhancement

Purpose

Prefer CSS solutions over JavaScript. "The best code is no code."

Quick Decision

Before writing JS, ask:

  1. "Can CSS solve this?" → Grid, Flexbox, :has(), transforms
  2. "Is this needed now?" (YAGNI) → No evidence = don't implement
  3. "Simplest solution?" (Occam's Razor) → 3 lines CSS > 50 lines JS

Reference

For detailed guide, see: @~/.claude/rules/development/PROGRESSIVE_ENHANCEMENT.md

Related

  • applying-code-principles - SOLID, DRY, Occam's Razor
  • optimizing-performance - Performance optimization

Used by

  • /code --frontend - Frontend implementation
  • /audit - CSS-first approach verification

majiayu000/claude-skill-registry-data/tree/main/design/enhancing-progressively-thkt-claude-config commit 9af8448b5a

Browse category

Frequently asked questions

npx skillmds@latest add majiayu000/enhancing-progressively-2