Design Motion Principles
Expert guidance on purposeful motion design and animation audits
What You Can Do
You can build interactive UI components with purposeful motion—transitions, hover states, micro-interactions, and enter/exit animations—or audit existing motion design and receive detailed feedback. The skill operates in two focused modes: Create mode helps you implement motion that serves a clear purpose, while Audit mode evaluates your animations against industry-standard principles and reports specific findings with improvement recommendations.
Features
Create intentional motion or audit existing animations with context-aware guidance
Combines restraint (Emil Kowalski), craft (Jakub Krehel), and delight (Jhey Tompkins) frameworks
Handles HTML/CSS, React, Framer Motion, iOS/Android transitions, and design systems
Guides hover states, loading animations, feedback patterns, and state transitions
Reviews motion curves, timing, purposefulness, and UX impact with actionable feedback
Helps you balance animation density and performance across your interface
Provides code patterns and motion principles for React and CSS-based animation
Example Output
Create Mode Output: You get implementation guidance including recommended timing (in ms), easing curves with specific cubic-bezier values, code snippets in your framework of choice, and the design rationale explaining why the motion serves the user.
Audit Mode Output: You receive a structured report with: ✓ strengths in your current motion, ✗ issues to address, → specific recommendations with code examples, and overall assessment of whether the animation enhances or detracts from the user experience.
What's Included
- SKILL.md instruction file with mode detection logic and three-designer framework:
- workflows/create.md: Step-by-step guidance for building purposeful motion components
- workflows/audit.md: Structured audit checklist and feedback framework
- Frequency framework reference: Principles for balancing animation density and performance
- Motion principles checklists: Timing, easing, and purposefulness evaluation criteria
Who It's For
- Product designers creating motion specifications and reviewing animation quality
- Interaction designers building micro-interactions and state transitions
- Frontend engineers implementing animations in React, CSS, or Framer Motion
- Design system leads establishing motion principles and animation guidelines
- UX engineers optimizing motion for performance and user experience
Best For
- Building interactive components with intentional hover states and transitions
- Reviewing existing animations for purposefulness and timing alignment
- Creating micro-interactions (loading states, feedback animations, state changes)
- Establishing motion principles across design systems
- Optimizing animation performance and cognitive load in complex interfaces
You might also like
This skill parses experiment metadata and outputs to extract critical metrics from completed machine learning experiments. It reads experiment_summary.yaml to identify runs, pulls final training loss from SLURM logs, extracts accuracy metrics from inspect-ai evaluation files, and generates a clean summary.md report—all while logging the extraction process for reproducibility.
by kylezantos
You can structure and run Kaizen events from start to finish, guiding your team through waste analysis, root-cause identification, and rapid improvement design. The skill generates detailed event agendas, countermeasure documentation, and performance metrics—enabling you to close improvement opportunities within days rather than weeks.
by kylezantos
You can systematically identify root causes of production problems using proven troubleshooting frameworks, decision trees, and rapid diagnosis protocols. This skill walks you through impact assessment, root cause analysis, and solution validation to minimize downtime and prevent recurring issues in manufacturing and operations environments.
by kylezantos
You can build full video production workflows that generate promotional videos, product demos, social media content, and animated explainers from scratch. The skill provides a complete project scaffold with pre-built component libraries, text-to-speech integration, theme systems, and hot-reload development—allowing you to iterate quickly and output broadcast-quality motion graphics without manual keyframing.
by dliangthinks
This skill structures and accelerates improvement initiatives using the PDCA (Plan-Do-Check-Act) framework combined with 5 Why analysis and standardized work templates. You'll build data-driven problem statements, identify root causes systematically, and create actionable improvement plans with built-in controls. It enables teams to move from reactive firefighting to proactive, continuous optimization grounded in evidence.
by kylezantos
You can systematically implement, audit, and sustain 5S lean methodology across your manufacturing operations. Claude generates customized audit templates, tracks compliance metrics, creates implementation roadmaps, and produces detailed audit reports—all aligned to your facility's specific processes and standards.
by kylezantos
Load your production data, current-state process flows, or value stream metrics, and Claude identifies hidden waste patterns using the 7 wastes framework. You get a prioritized list of lean countermeasures ranked by impact and effort, complete with root cause analysis and a phased implementation roadmap to guide your continuous improvement efforts.
by kylezantos
You can diagnose root causes of yield loss, identify process drift in real time, and optimize critical parameters using structured troubleshooting frameworks. The skill helps you prioritize corrective actions based on statistical analysis, accelerate problem resolution, and build repeatable optimization workflows that your team can execute consistently across production runs.
by kylezantos