Design Motion Principles

What it does

Design Motion Principles is a practical motion-design skill that helps agents either create purposeful UI animations or audit existing motion for quality, accessibility, and performance. It encodes a two-mode workflow (Create vs Audit), a frequency-based decision gate, duration guidelines, and per-designer perspectives that help balance restraint, polish, and playfulness when proposing or evaluating animations.

When to use it

Invoke this skill when asked to implement, improve, or review UI motion: transitions, enter/exit animations, micro-interactions, hover states, or system-level animations on web and mobile. Use Create mode to generate implementation suggestions (CSS, Framer Motion, React patterns) and Audit mode to produce systematic reports and checklists for accessibility (prefers-reduced-motion), performance, and UX clarity.

What's included

• Scripts: none (has_scripts=false)
• References: bundled (has_references=true) — motion cookbook, audit checklist, designer reference notes are present in the repo and used by workflows.
• Instructions: mode detection, a frequency gate, duration and easing recommendations by context, accessibility requirements (mandatory prefers-reduced-motion), and an output template for audit reports.

Compatible agents

Best used by code-writing and design-aware assistants (Copilot/Codex, Cursor, Claude Code) that can output CSS/JS examples, audit reports, or implementation suggestions. It guides both automated code generation and human-in-the-loop reviews.