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
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
Transform raw manufacturing P&L data into actionable insights by automatically identifying cost variances, pinpointing root causes, and generating executive-ready narratives. You upload your plant's P&L statement, provide context about recent operational changes, and Claude analyzes the numbers to explain why costs moved and what actions drive profitability.
by kylezantos
You'll develop comprehensive 5S implementation strategies, conduct workplace audits with structured scoring, generate standardized procedures for your team, and facilitate continuous improvement cycles. Claude analyzes your current state, identifies quick wins, and helps you build lasting lean culture through data-driven assessments and kaizen guidance.
by kylezantos
This skill systematically analyzes out-of-spec chemical manufacturing batches to identify root causes and recommend parameter adjustments. You provide process data, operating conditions, and quality metrics; Claude performs hypothesis testing, statistical correlation analysis, and multi-variate optimization to pinpoint the failure mechanism. You get actionable recommendations ranked by impact and implementation risk.
by kylezantos
You can leverage Claude to streamline every aspect of film production coordination—from managing crew schedules and budgets to troubleshooting on-set logistics and creative challenges. This skill helps you create call sheets, coordinate locations, track production expenses, and quickly solve problems that arise during shooting without disrupting your workflow.
by kylezantos
You provide production data and process details, and this skill systematically analyzes the information to identify root causes of quality issues, yield losses, or equipment failures. It develops prioritized corrective actions with implementation timelines, compliance documentation, and performance metrics to track improvement effectiveness.
by kylezantos
This skill systematically analyzes your production data using proven continuous improvement methodologies like Lean and Six Sigma to identify bottlenecks, root causes, and measurable improvement opportunities. You'll receive prioritized, actionable recommendations with implementation roadmaps and risk assessments that help you focus on high-impact optimizations driving real cost savings and efficiency gains.
by kylezantos
Prepare comprehensive audit documentation, track non-conformance issues from identification through resolution, and generate corrective action plans. You can document audit findings, prioritize risks by severity, assign accountability, and create formal reports that demonstrate compliance readiness to auditors and stakeholders.
by kylezantos