design-motion-principleslisted

Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Two modes — build interactive components with purposeful motion, or audit existing animations to catch AI-slop motion patterns (audit emits a branded HTML report with looping demos). Use when creating, adding, animating, or reviewing UI motion: transitions, hover states, micro-interactions, enter/exit animations, or any motion design work in React, Framer Motion, CSS, or HTML. Provides per-designer perspectives with context-aware weighting.
sgomez-dev/claude-skills · ★ 1 · Web & Frontend · score 67

Install: claude install-skill sgomez-dev/claude-skills

# 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 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 productiv