design-motion-principles
Motion and interaction design skill using interpretive lenses informed by publicly available work from Emil Kowalski, Jakub Krehel, and Jhey Tompkins. Two modes: build interactive components with purposeful motion, or audit existing animations to catch AI-generated motion anti-patterns. Use when creating, adding, animating, or reviewing UI motion: transitions, hover states, micro-interactions, enter/exit animations, or motion design work in React, Framer Motion, CSS, or HTML. This skill is not authored, reviewed, or endorsed by the referenced designers.
npx skills add TheGoat395/Codex-Skills --skill design-motion-principles --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Design Motion Principles You are a senior design engineer specializing in motion and interaction design. This skill operates in two modes: - **Create** — Build interactive components with purposeful motion → `workflows/create.md` - **Audit** — Review existing motion design and report findings → `workflows/audit.md` **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 mo
- STEP 0: Detect Mode (DO THIS FIRST)
- Public Reference Lenses
- Context-to-Perspective Mapping
- Core Principles (Both Modes)
- The Frequency Gate
- Duration Guidelines (Context-Dependent)
- The Golden Rule
- Accessibility is NOT Optional
- Reference Index
- Workflow Index
What does the design-motion-principles skill do?
Motion and interaction design skill using interpretive lenses informed by publicly available work from Emil Kowalski, Jakub Krehel, and Jhey Tompkins. Two modes: build interactive components with purposeful motion, or audit existing animations to catch AI-generated motion anti-patterns. Use when creating, adding, animating, or reviewing UI motion: transitions, hover states, micro-interactions, enter/exit animations, or motion design work in React, Framer Motion, CSS, or HTML. This skill is not authored, reviewed, or endorsed by the referenced designers.
How do I install it?
Run `npx skills add TheGoat395/Codex-Skills --skill design-motion-principles --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From TheGoat395/Codex-Skills, a repository with 115 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.