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 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
Analyze production line data to identify bottlenecks, defect patterns, and root causes affecting TV manufacturing operations. Generate detailed corrective action plans with specific interventions, timelines, and expected impact. Transform raw production data into actionable insights for operations teams to improve yield, reduce downtime, and accelerate throughput.
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
This skill applies structured decision logic to classify, prioritize, and route manufacturing or post-production defects with consistency and evidence-based reasoning. You provide defect details, and Claude triages them into severity categories, recommends dispositions (scrap, rework, accept-as-is, hold), and documents the decision logic so your quality team can audit, adjust rules, and track trends over time.
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 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
This skill guides you through systematic root cause analysis for manufacturing defects, helping you move beyond surface symptoms to uncover underlying failure mechanisms. You'll build investigation workflows, interpret production data, develop corrective actions backed by evidence-based reasoning, and prevent recurrence through structured follow-up.
by kylezantos