Design Motion Principles
Weights three motion-design philosophies by project context so you can build purposeful motion or audit existing animations.
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.
- 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.
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.
First detects the mode from request keywords. In Create mode it reads workflows/create.md, 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 it reads workflows/audit.md, scans for motion gaps (e.g. conditional renders without AnimatePresence, instant state swaps), checks code against an anti-AI-slop checklist (pulsing indicators, hover-scale-on-everything, stagger-spam), 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
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 do you install this skill?
Run npx skills add kylezantos/design-motion-principles. Manual install (global): git clone https://github.com/kylezantos/design-motion-principles.git, then 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?
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.