What does this skill do, and when should you use it?
A motion and interaction design skill with two modes: Create (build interactive components with purposeful motion) and Audit (review existing animations and report findings). Its core idea is three lenses distilled from the public work of Emil Kowalski, Jakub Krehel, and Jhey Tompkins, weighted by your project type — productivity tool, kids app, marketing site, and so on. It ships a frequency gate, context-dependent duration guidelines, an anti-AI-slop checklist, and a mandatory accessibility requirement. Works across React, Framer Motion, CSS, and HTML.
- Detects the mode from request keywords: Create mode reads workflows/create.md, Audit mode reads workflows/audit.md
- In Create mode, runs light discovery (project context and lens weighting), then generates React/Framer Motion/CSS/HTML components applying motion recipes, accessibility, and performance defaults
- In Audit mode, scans for motion gaps (e.g. conditional renders without AnimatePresence, instant state swaps) and checks code against an anti-AI-slop checklist (pulsing indicators, hover-scale-on-everything, stagger-spam)
- In Audit mode, proposes per-lens weighting and by default writes a branded HTML report with auto-looping CSS demos into motion-audits/; pass --terminal for an inline markdown report
- Both modes enforce prefers-reduced-motion handling
- A frontend developer adding a toast or modal transition to a SaaS dashboard who wants Linear-style restraint and speed
- A team lead auditing AI-generated UI motion to catch pulsing indicators, blur entrances, and other AI-slop patterns with concrete fixes
- A kids-app developer needing motion guidance weighted toward polish and delight (Jakub + Jhey) rather than productivity speed rules
- An engineer hunting motion gaps in a codebase — conditional renders that should animate but don't, instant state swaps
- A designer looking for creative recipes like clip-path, scroll-driven animation, and FLIP for a portfolio or landing page
- Game engines, Lottie, Rive, or video motion — the frequency framework still applies, but designer-specific techniques may not transfer
- Teams requiring a public test suite or benchmark validating audit accuracy — none exists
- CI/headless users who forget to pass --terminal, since the HTML report is the default output
How do you install this skill?
- Static source-only review; nothing was executed and all scores are low confidence.
- Audit mode writes HTML files into a motion-audits/ directory in the user's project — be aware of this write behavior before use.
- English-only content with no Chinese support; reachability of some cited external resources (easing.dev, linear-easing-generator, etc.) from some regions is unverified.
- Audit heuristic thresholds (e.g. flag only at ≥3 similar components) are author experience, not empirically validated — expect possible false positives/negatives.
- Publisher is unverified in the FollowSkills registry; maintenance and update path are unclear — monitor repository activity.
- The skill is an interpretation of three designers' public work, not endorsed content; verify against primary sources for professional use.
- Local filesystem
Quick install (npx):
npx skills add kylezantos/design-motion-principlesClaude Code / Cursor (manual global install):
git clone https://github.com/kylezantos/design-motion-principles.gitThen copy the skills/design-motion-principles folder into ~/.claude/skills/ (Claude Code) or ~/.cursor/skills/ (Cursor). The README mentions compatibility with Windsurf and other AI coding assistants but gives no specific path for them.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- Add a toast transition to my SaaS dashboard with Linear-style restraint and speed
- Audit this AI-generated UI motion and flag pulsing indicators and other AI-slop patterns with concrete fixes
- Design an entrance animation for a kids app, weighted toward polish and delight
- Find motion gaps in my codebase — conditional renders that should animate but don't, instant state swaps
After installing, just ask in natural language. To build: "Add a polished enter/exit animation to this modal" or "Build an animated toast component for this dashboard". To audit: "Audit the motion design in this codebase" or "Review the animations in this component". The skill detects the mode automatically and asks if the request is ambiguous.
What are this skill's strengths and limitations?
- Context-aware three-lens weighting avoids one-size-fits-all rules — kids apps and productivity tools get different advice
- Practical frequency gate: hundreds-of-times-a-day interactions get no animation; keyboard-initiated actions are never animated
- Audit report includes auto-looping CSS demos so you can see recommended motion, not just read code
- Mandatory prefers-reduced-motion handling with vestibular safety guidance built in
- Clearly discloses that the three designers neither authored nor endorse the skill — honest attribution
- The principles are the skill author's distillation of public work, not guidance verified by the designers themselves
- No public test suite or benchmark validating audit accuracy
- Designer-specific techniques may not transfer to game engines, Lottie, Rive, or video motion
- HTML report is the audit default; CI/headless users must remember to pass --terminal
- The repo has no Topics tags, reducing discoverability
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Design Motion Principles this page | 62 · Recommended | ★ 1.3k | 4mo ago | MIT |
| Frontend Design Skill | 52 · Use with care | ★ 5.5k | 5mo ago | MIT |
| Dark Theme React UI System ✓ Microsoft · Official | 52 · Use with care | ★ 2.7k | 3mo ago | MIT |
| shadcn/ui Component Integration Guide | 42 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
| Apple Liquid Glass Design Skill | 58 · Recommended | ★ 273 | 3mo ago | NOASSERTION |
How did FollowSkills review this skill?
Pure guidance-document skill: no scripts, no network calls, no dependency installs; minimal privilege surface. Audit mode writes an HTML report to motion-audits/ but discloses this openly — low risk. Attribution is honest and explicitly disclaims designer endorsement, satisfying source-attribution norms. Deducted for: no explicit confirmation step or rollback guidance for writing files into the user's project.
Internally self-consistent: mode router, reference index, and workflow cross-references align; philosophy files map to numbered cookbook sections; failure paths (asking on ambiguity, --terminal fallback) are described. Deducted for: zero tests and no executed evidence, undefined behavior on abnormal audited code or missing reference files; static review cannot exceed 10.
Clear audience and scenarios, a semantic trigger table for mode detection, declared scope and non-fit boundaries (game engines, Lottie), and an ask-on-ambiguous mechanism. Deducted for: no Chinese-language support, English-only content, and no information on mainland-China reachability of cited external resources.
Well-layered progressive disclosure (SKILL.md router → workflows → references), README with install/usage/examples and Credits, clear MIT license. Deducted for: no version number, no changelog, no stated maintenance responsibility or update path; completeness of some referenced files (demo-shell.html, workflows) unverified in this evidence set.
Core task paths are complete: cookbook and self-check lists for Create; checklists, anti-slop categories with quantified heuristics, and report templates for Audit; README shows sample output. Marginal value (context weighting, anti-AI-slop library) exceeds a generic prompt. Deducted for: output quality (especially the HTML report) is claimed but not demonstrated with executable evidence; static review caps at 7.
Key claims are partially traceable: public sources for the three designers are listed in Credits, and fact/inference separation ('interpretation, not endorsement') is explicit. Deducted for: no third-party execution evidence, no CI or tests, audit heuristics (e.g. ≥3-component thresholds) with no empirical basis; independent reproduction not feasible, so capped below 5 in static review.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →