mcpField
D
design-motion-principles

design-motion-principles

github.com/podoDesign & UI29178 installsUpdated 4d ago
Repository

About design-motion-principles

design-motion-principles is a skill for creating or auditing interface motion. It helps designers and developers choose motion in context, using three distinct design lenses rather than applying one approach to every project.

Key features

  1. 01Create and audit modes
  2. 02Context-based lens weighting
  3. 03React, Framer Motion, CSS, and HTML output
  4. 04Motion-gap analysis
  5. 05Anti-AI-slop checklist
  6. 06HTML report or terminal output

Use cases

  1. 01Add considered motion to a UI component
  2. 02Review existing interface animations
  3. 03Generate an animation audit report

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill design-motion-principles

After installing, type/design-motion-principlesin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

design-motion-principles

Catalogue stub — full skill: kylezantos/design-motion-principles

Decision tree

  1. Is the full skill already installed?

    • Global: f=~/.agents/skills/design-motion-principles/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • Project: f=.agents/skills/design-motion-principles/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → the skill is installed as design-motion-principles, invoke it and proceed
    • pointer → go to step 2

  2. Detect scope, then install:

    [ -e ~/.agents/skills/design-motion-principles ] && echo "global" || echo "project"

    Global:

    npx skills add kylezantos/design-motion-principles --skill design-motion-principles -g -y

    Project:

    npx skills add kylezantos/design-motion-principles --skill design-motion-principles -y

    Claude Code: send a command as a chat message starting with ! to run it without leaving the conversation.

Heads-up

  • License: MIT

Invoke after install

  • Skill name: design-motion-principles
  • Trigger phrases: "add animation", "audit animation", "hover state", "enter exit animation", "motion review", "AI slop motion"

The skill detects its mode from your request:

You sayMode
"animate this", "add motion", "make it feel alive"Create
"audit my animations", "review motion", "check for AI slop"Audit
AmbiguousSkill asks which mode

What it does

Two modes, three lenses weighted to project context:

ModeOutput
CreateContext discovery, lens weighting, then a component with motion baked in (React / Framer Motion / CSS / HTML)
AuditMotion-gap analysis plus an anti-AI-slop checklist, delivered as a 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. The skill reads its own workflows/ and references/ folders, so it must be installed through the skills CLI rather than by copying SKILL.md alone.

When NOT to use

  • Static layout, color or typography work (use a design-systems skill such as ui-ux-pro-max)
  • Only Emil Kowalski's single-lens guidance (use emilkowalski-skill)
  • Interactive gesture-driven animation requiring JavaScript state (use framer-motion-skills)

Comments

Markdown supported