design-motion-principles
Motion and interaction design expert with two modes — build interactive components with purposeful motion, or audit existing animations for AI-slop patterns. Audit emits a branded HTML report with looping CSS demos per finding. Based on Emil Kowalski (restraint), Jakub Krehel (production polish), and Jhey Tompkins (creative experimentation) — lenses weighted to project context. Works with React, Framer Motion, CSS, and HTML.
How do I install this agent skill?
npx skills add https://github.com/podo/design-agent-skills --skill design-motion-principlesIs this agent skill safe to install?
- Gen Agent Trust Hubwarn
This skill acts as a stub pointing to an external GitHub repository. It instructs users to install software using a command that downloads and executes code from an unverified third-party source. Additionally, its audit functionality processes user-provided code, which presents a surface for indirect prompt injection.
- Socketpass
No alerts
- Snykwarn
Risk: MEDIUM · 1 issue
What does this agent skill do?
design-motion-principles
Catalogue stub — full skill: kylezantos/design-motion-principles
Type: package — install vianpx skills add(SKILL.md alone is not sufficient; requires workflow files)
When to use
Activate when the user wants to:
- Build interactive components with motion (transitions, hover states, micro-interactions, enter/exit animations)
- Audit existing UI motion for AI-slop patterns (pulsing indicators, hover-scale-on-everything, stagger-spam)
- Get motion guidance weighted across Emil Kowalski, Jakub Krehel, and Jhey Tompkins lenses
Do not activate for static layout, color, or typography work — route to a design-systems skill instead.
How to install
npx skills add kylezantos/design-motion-principles
Works with Claude Code, Cursor, Windsurf, and other AI coding assistants.
How to invoke after install
The skill detects mode from your request:
| You say | Mode |
|---|---|
| "animate this", "add motion", "make it feel alive" | Create |
| "audit my animations", "review motion", "check for AI slop" | Audit |
| Ambiguous | Skill asks which mode |
Invoke the design-motion-principles skill and state your request.
What it does
Two modes, three lenses weighted to project context:
| Mode | Output |
|---|---|
| Create | Context discovery → lens weighting → component with motion baked in (React / Framer Motion / CSS / HTML) |
| Audit | Motion-gap analysis + anti-AI-slop checklist → branded HTML report with auto-looping CSS demos, or --terminal for inline markdown |
Three lenses:
- Emil Kowalski — Restraint and speed. "Should this animate at all?"
- Jakub Krehel — Production polish. "Is this subtle enough?"
- Jhey Tompkins — Creative experimentation. "What could this become?"
The productive tension between these three lenses — not one applied universally — is the point.
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/podo/design-agent-skills/design-motion-principles">View design-motion-principles on skillZs</a>