一位专注于动效与交互设计的专家，其方法基于 Emil Kowalski、Jakub Krehel 和 Jhey Tompkins 的技巧。提供两种模式——使用有目的性的动效构建交互组件，或审计现有动画，以发现 AI 粗制滥造式动效模式（审计模式会生成一份带品牌样式的 HTML 报告，其中包含循环播放的演示）。适用于创建、添加、制作动效或审查 UI 动效：过渡、悬停状态、微交互、进入/退出动画，以及 React、Framer Motion、CSS 或 HTML 中的任何动效设计工作。提供每位设计师的独特视角，并结合具体情境调整权重。
Scope: Web and app UI motion — HTML/CSS, React, Framer Motion / Motion, iOS/Android transitions, design system animations. The frequency framework still applies to other motion work (game engines, Lottie, Rive, video), but designer-specific techniques may not translate.
STEP 0: Detect Mode (DO THIS FIRST)
Signal in the request
Mode
"build", "create", "add animation", "animate this", "implement", "make it feel…"
Create
"audit", "review", "evaluate", "check", "feedback on", "is this motion good"
Audit
Ambiguous (e.g. "look at this modal animation")
Ask the user
For ambiguous requests, if AskUserQuestion is available, present:
Create — Build or improve the component's motion
Audit — Review existing motion and report findings
Otherwise ask in plain text: "Should I build/improve the motion (Create mode), or review existing motion and report findings (Audit mode)?"
Once the mode is known, read the matching workflow file and follow it exactly.
The Three Designers
Emil Kowalski (Linear, ex-Vercel) — Restraint, speed, purposeful motion. Best for productivity tools.
Jakub Krehel (jakub.kr) — Subtle production polish, professional refinement. Best for shipped consumer apps.
Jhey Tompkins (@jh3yy) — Playful experimentation, CSS innovation. Best for creative sites, kids apps, portfolios.
These three lenses distill each designer's publicly published work — courses, articles, talks, and open-source projects. The weighting framework and the "lens" framing are this skill's interpretation of their principles, named in tribute; they are not authored or endorsed by the designers themselves.
Each designer answers a different question:
Emil — "Should this animate at all?"
Jakub — "Is this subtle and polished enough for production?"
Jhey — "What could this become?"
Critical insight: These perspectives are context-dependent, not universal rules. A kids' app should prioritize Jakub + Jhey (polish + delight), not Emil's productivity-focused speed rules. Both modes weight the designers by project context before doing anything.
Context-to-Perspective Mapping
Project Type
Primary
Secondary
Selective
Productivity tool (Linear, Raycast)
Emil
Jakub
Jhey (onboarding only)
Kids app / Educational
Jakub
Jhey
Emil (high-freq game interactions)
Creative portfolio
Jakub
Jhey
Emil (high-freq interactions)
Marketing/landing page
Jakub
Jhey
Emil (forms, nav)
SaaS dashboard
Emil
Jakub
Jhey (empty states)
Mobile app
Jakub
Emil
Jhey (delighters)
E-commerce
Jakub
Emil
Jhey (product showcase)
Core Principles (Both Modes)
The Frequency Gate
Before adding or approving any animation, ask how often the user triggers it:
Frequency
Recommendation
Rare (monthly)
Delightful, expressive motion welcome
Occasional (daily)
Subtle, fast motion
Frequent (100s/day)
No animation or instant transition
Keyboard-initiated
Never animate
Duration Guidelines (Context-Dependent)
Context
Guideline
Productivity UI (Emil)
Under 300ms — 180ms ideal
Production polish (Jakub)
200-500ms for smoothness
Creative/kids/playful (Jhey)
Whatever serves the effect
Do not universally flag or cap durations. Check the context weighting first.
The Golden Rule
"The best animation is that which goes unnoticed."
If users comment "nice animation!" on every interaction, it's probably too prominent for production. (Exception: kids apps and playful contexts where delight IS the goal.)
Accessibility is NOT Optional
Every animation — generated in Create mode or reviewed in Audit mode — must handle prefers-reduced-motion. No exceptions. See references/accessibility.md.
A motion and interaction design skill with two modes — build interactive components with purposeful motion, or audit existing animations. Both modes give context-aware, per-designer guidance drawn from three distinct motion-design lenses.
Distilled from the publicly published work of Emil Kowalski, Jakub Krehel, and Jhey Tompkins (see Credits).
Works with Claude Code, Cursor, Windsurf, and other AI coding assistants.
What It Does
The skill applies three distinct motion-design philosophies, weighted by your project's context:
Lens
Philosophy
Key question
Best for
Emil Kowalski
Restraint & speed
"Should this animate at all?"
Productivity tools, high-frequency interactions
Jakub Krehel
Production polish
"Is this subtle enough?"
Shipped consumer apps, professional refinement
Jhey Tompkins
Creative experimentation
"What could this become?"
Kids apps, portfolios, playful contexts
The point isn't a single set of rules — it's the productive tension between three lenses that genuinely disagree. Emil would cut an animation Jhey would add. The skill weights them to your context instead of applying one philosophy everywhere.
Two Modes
Create — Build interactive components with motion baked in. The skill runs a light discovery (project context + which lenses to weight), then generates components — React, Framer Motion, CSS, or HTML — applying the right recipes, accessibility, and performance defaults.
Audit — Review existing motion design. The skill does reconnaissance on your project, runs a motion-gap analysis (finds UI that should animate but doesn't), checks the code against an anti-AI-slop checklist (pulsing indicators, hover-scale-on-everything, stagger-spam, and other 2026 AI-generated motion tells), proposes a per-lens weighting, and delivers a branded HTML report with auto-looping CSS demos beside each Critical and Important finding. Pass --terminal for the inline markdown report instead.
The skill detects which mode you want from your request. If it's ambiguous, it asks.
Key Features
Context-aware weighting — Maps your project type (productivity tool, kids app, marketing site, dashboard…) to a primary/secondary/selective lens weighting before doing anything.
Motion gap analysis (Audit) — Searches for conditional UI that should be animated but isn't: conditional renders without AnimatePresence, dynamic styles without transitions, instant state swaps.
Anti-AI-slop checklist (Audit) — A quality gate that flags the recognizable motion fingerprints of AI-generated UIs: pulsing indicators, blur-everywhere entrances, hover-scale-on-everything, stagger-spam, bouncy springs on utility actions, uniform fade-ins, motion-on-mount for static content. Each category has a frequency heuristic so single intentional uses don't trip it.
Branded HTML report (Audit) — The default audit output is a self-contained HTML file with auto-looping CSS demos beside each Critical and Important finding, so you can see the recommended motion instead of reading code. Writes to motion-audits/, opens in your browser. --terminal falls back to the inline markdown report for headless/CI use.
Motion cookbook (Create) — A single, consolidated recipe library: enter/exit animations, easing, springs, clip-path, @property, shared-layout/FLIP, scroll-driven animation.
Creation gotchas (Create) — Built-in self-check against the common failure modes of AI-generated motion: decorative-by-default animation, scale(0) starts, bare ease, missing prefers-reduced-motion.
Usage
Once installed, just ask in natural language.
To build:
Add a polished enter/exit animation to this modal
Build an animated toast component for this dashboard
To audit:
Audit the motion design in this codebase
Review the animations in this component
Example: Audit output
## 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?
This skill is an interpretation and distillation of motion-design principles from the publicly published work — courses, articles, talks, and open-source projects — of three designers. The three-lens weighting framework and the "through X's lens" framing are this skill's own synthesis, named in tribute. The skill is not authored or endorsed by the designers below; for their actual work, go to the source:
