モーションデザイン監査スキル。Emil Kowalski、Jakub Krehel、Jhey Tompkinsの3人のデザイナー哲学に基づき、Framer Motionの実装をコンテキスト対応でレビュー。スプリングアニメーション、イージングカーブ、AnimatePresenceパターン、アクセシビリティ対応を網羅。
Expert motion and interaction design auditor based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Get context-aware, per-designer feedback on your animations.
npx add-skill kylezantos/design-motion-principles
Works with Claude Code, Cursor, Windsurf, and other AI coding assistants.
This skill audits your codebase's motion design through three distinct design philosophies:
| Designer | Philosophy | Best For |
|---|---|---|
| Emil Kowalski | Restraint & Speed | Productivity tools, high-frequency interactions |
| Jakub Krehel | Production Polish | Shipped consumer apps, professional refinement |
| Jhey Tompkins | Creative Experimentation | Kids apps, portfolios, playful contexts |
Context Reconnaissance — Analyzes your project type to determine which designer's perspective to prioritize
Motion Gap Analysis — Searches for conditional UI that SHOULD be animated but isn't (conditional renders without AnimatePresence, dynamic styles without transitions)
Per-Designer Audit — Evaluates your code through three lenses with actionable recommendations categorized by severity
Once installed, just ask:
Audit the motion design in this codebase
The skill will:
## Reconnaissance Complete
**Project type**: Kids educational app, mobile-first PWA
**Existing animation style**: Spring animations (500-600ms), framer-motion
**Motion gaps found**: 4 conditional renders without AnimatePresence
**Proposed perspective weighting**:
- **Primary**: Jakub Krehel — Production polish for a shipped consumer app
- **Secondary**: Jhey Tompkins — Playful experimentation for kids
- **Selective**: Emil Kowalski — Only for high-frequency game interactions
Does this approach sound right?
skills/
└── design-motion-principles/
├── SKILL.md # Main skill with workflow
├── audit-checklist.md # Structured audit criteria
└── references/
├── emil-kowalski.md # Emil's philosophy & techniques
├── jakub-krehel.md # Jakub's philosophy & techniques
├── jhey-tompkins.md # Jhey's philosophy & techniques
├── philosophy.md # Synthesized design philosophy
├── technical-principles.md # Implementation patterns
├── accessibility.md # Motion accessibility guidelines
├── performance.md # Performance best practices
└── common-mistakes.md # Anti-patterns to flag
If you prefer not to use npx add-skill:
Global (all projects):
git clone https://github.com/kylezantos/design-motion-principles.git
cp -r design-motion-principles/skills/design-motion-principles ~/.claude/skills/
For Cursor:
cp -r design-motion-principles/skills/design-motion-principles ~/.cursor/skills/
This skill synthesizes motion design principles from:
MIT