UI Animation Specification Generator
Generate precise animation specs and motion timelines for UI components
What You Can Do
You can translate motion design vision into comprehensive, developer-ready animation specifications. This skill generates detailed documentation covering timing parameters, easing curves, trigger conditions, state transitions, and edge cases for UI component animations. You'll produce specifications that eliminate guesswork and reduce iteration cycles between design and development teams.
Features
Generate exact duration, delay, and sequence parameters for multi-stage animations with frame-accurate precision
Define cubic-bezier, spring, or preset easing functions with visual diagrams and technical values
Map trigger conditions, user gestures, and state dependencies that initiate animations
Create detailed choreography for complex animations showing component sequencing and dependencies
Document fallback behavior, interruption states, and accessibility considerations for animations
Structure specifications for design system implementation across multiple screens and products
Include browser compatibility notes, performance considerations, and code hints without generating actual code
Establish brand-consistent animation rules and velocity curves for organizational consistency
Example Output
Example 1: Button Hover Animation
Component: Primary Button
Trigger: Hover state
Duration: 200ms
Easing: cubic-bezier(0.34, 1.56, 0.64, 1) [Ease Out Back]
Properties:
- Background: #0066FF → #0052CC
- Scale: 1 → 1.05
- Shadow: 0 2px 8px rgba(0,0,0,0.1) → 0 8px 16px rgba(0,0,0,0.2)
Note: Interrupt-safe, handles rapid hover in/out
Example 2: Modal Entrance Sequence
Component: Modal Dialog
Trigger: Open action
Sequence:
[0ms] Overlay fade-in: 200ms, opacity 0→1, easing linear
[0ms] Modal scale: 300ms, transform scale(0.8)→1, easing cubic-bezier(0.16, 1, 0.3, 1)
[150ms] Content fade-in: 200ms, opacity 0→1, easing ease-in-out
Total duration: 300ms
Exit: Reverse sequence 250ms on close
What's Included
- SKILL.md: Complete instruction file with workflow and specification templates
- Animation Spec Template: Structured markdown format for documenting component animations
- Easing Curves Reference: Library of common easing functions with cubic-bezier values and use cases
- Interaction Pattern Checklist: Framework for identifying and documenting trigger conditions and state transitions
- Motion Timeline Worksheet: Multi-stage animation choreography template with dependency mapping
Who It's For
- Motion designers — Document animation intent for handoff to development teams
- Product designers — Define consistent interaction patterns across design systems
- Design system owners — Create reusable animation specifications and motion guidelines
- UX leads — Establish brand-consistent motion language across products
- Design-to-development teams — Bridge communication gaps with precise technical specifications
Best For
- Component animation documentation for design system handoffs
- Complex multi-stage animation choreography and sequencing
- Interaction pattern definition and consistency enforcement
- Motion timing and easing specification for pixel-perfect implementation
- Design review and developer implementation verification against specifications
You might also like
You can make data-driven material decisions for packaging by analyzing lifecycle impact claims, comparing alternatives (bioplastics vs. recycled plastics, paperboard vs. aluminum), and validating sustainability assertions against verified standards. This skill helps you quantify actual environmental benefits, identify greenwashing risks, and create defensible sustainability narratives backed by regulatory compliance and material science principles.
by camalus
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.
by kylezantos
You can systematically analyze competing packaging demands—aesthetic appeal, material efficiency, manufacturing capability, cost targets, and product protection—to identify which constraints conflict and why. This skill helps you map how changes in one structural element (flap geometry, board thickness, fold radius) cascade through manufacturing feasibility, cost, and performance, enabling you to resolve contradictions early and communicate design tradeoffs clearly to manufacturers and stakeholders.
by camalus
You can rapidly transform vague creative direction into concrete, actionable title sequence specifications that motion designers can implement immediately. This skill extracts motion requirements, establishes timing frameworks, defines typography hierarchies, and creates visual treatment specifications directly from briefs—reducing revision cycles and directional misalignment. You'll produce structured production documents that clarify constraints, success metrics, and technical requirements before any keyframes are set.
by camalus
You'll transform scattered packaging requirements, stakeholder input, and technical constraints into a unified, actionable design brief. The skill synthesizes business objectives, regulatory compliance requirements, production capabilities, and competitive positioning into a single document that guides your creative process and eliminates ambiguity before design commences. It operates in two modes: building briefs from scratch and validating existing briefs for gaps and inconsistencies.
by camalus
You can develop comprehensive brand naming strategies that move beyond brainstorming to professional-grade naming processes. The framework guides you through strategic positioning, generates names across multiple naming categories, conducts linguistic feasibility analysis, screens for competitive and trademark conflicts, and validates market perception—producing names that are ownable, memorable, and strategically aligned with your brand positioning.
by camalus
This skill helps you generate detailed specification documents that eliminate ambiguity in technical illustration work. You'll produce dimensional specifications, part relationships, view angle requirements, asset inventories, and quality control checklists that enable seamless handoffs to illustrators, manufacturers, or documentation teams. The result is first-pass accuracy that prevents costly revisions and ensures production-ready diagrams.
by camalus
You can create comprehensive wayfinding strategies that integrate typography, color coding, materiality, positioning, and interactive elements into systems tailored to your exhibition's architecture and narrative structure. This skill helps you develop visitor-centered spatial communication systems that guide audiences intuitively while managing flow, reinforcing curatorial intent, and ensuring accessibility compliance across permanent or temporary installations.
by camalus