# Enhancing Progressively

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

- Skill: `majiayu000/enhancing-progressively-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/enhancing-progressively-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/enhancing-progressively-2/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/enhancing-progressively-2

---


# 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](~/.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