UI Animation Specification Generator
Generate production-ready animation specs with precise timing and easing curves
What You Can Do
You can create comprehensive animation specifications that bridge the gap between design intent and developer implementation. Generate detailed timing tables, easing curve definitions, state transition logic, and interaction pattern libraries with platform-specific variations (Web, iOS, Android). Each specification includes frame timing, conditional logic, accessibility requirements, and multi-element coordination rules that eliminate guesswork during handoff.
Features
outputs CSS/Swift/Kotlin curve functions (cubic-bezier, spring, custom timing) with visual representations and millisecond values
generates state machine documentation showing all interaction states, conditions, and animation triggers with clear transition paths
creates synchronized timing tables for multi-element animations with frame-by-frame breakdowns and choreography notes
produces Web (CSS/JavaScript), iOS (CAAnimation/SwiftUI), and Android (ObjectAnimator/Compose) implementation guides with native curve formats
builds variation matrices for repeated animation patterns with rules for responsive breakpoints and device-specific adjustments
documents prefers-reduced-motion handling, motion duration limits, and WCAG motion compliance specifications
generates specification sheets with exact values, code snippets, and visual timing diagrams ready for implementation
specifies behavior during interrupted animations, state conflicts, and performance-constrained scenarios
Example Output
Animation Spec Example: Button Press Interaction
Timing & Easing:
- Scale animation: 200ms, cubic-bezier(0.34, 1.56, 0.64, 1) (bounce easing)
- Color transition: 150ms, ease-in-out
- Shadow expansion: 180ms, cubic-bezier(0.25, 0.46, 0.45, 0.94)
State Diagram:
Idle → [mousedown] → Pressed (scale: 0.95)
→ [mouseup] → Released (scale: 1.0, shadow-expand)
→ Idle
Platform Specs:
- Web:
transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1) - iOS:
CABasicAnimation(keyPath: "transform.scale", fromValue: 1.0, toValue: 0.95, duration: 0.2) - Android:
ObjectAnimator.ofFloat(view, "scaleX", "scaleY", 1.0f, 0.95f).setDuration(200)
What's Included
- SKILL.md: core instruction file with animation specification framework
- Animation Spec Template: structured markdown template covering timing, easing, states, and platform implementations
- State Machine Diagram Format: reusable notation for documenting complex interaction flows
- Easing Curve Reference Library: pre-defined curves (bounce, elastic, spring) with CSS/Swift/Kotlin values
- Platform-Specific Implementation Guides: Web (CSS/JS), iOS (Swift/Objective-C), Android (Kotlin/Java) code snippet templates
- Accessibility Checklist: motion compliance requirements and reduced-motion handling patterns
Who It's For
- Motion designers and UX designers handing off animations to engineering teams
- Design system leads documenting animation patterns and guidelines
- Product designers specifying micro-interactions and state-based transitions
- Front-end and mobile developers needing precise animation implementation details
- Design ops and handoff coordinators standardizing animation documentation
Best For
- Complex state-based animations (form validation, navigation transitions, loading states)
- Multi-platform animation specs (Web, iOS, Android with synchronized timing)
- Design system animation libraries and guidelines
- Frame-perfect micro-interactions requiring exact timing and easing
- Accessibility-compliant motion specifications with reduced-motion alternatives
- Coordinated multi-element animations with choreography and sequencing
- Animation specifications for stakeholder review and developer approval
You might also like
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
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 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
This skill transforms Claude into a collaborative character development partner for children's book illustrators. You can generate detailed character briefs that translate personality into visual design elements, create design variation sheets showing characters in different expressions and poses, establish visual consistency guidelines for art direction teams, and plan character development arcs that are visually apparent to young readers. Whether you're working solo or managing an outsourced illustration team, you get actionable design documentation that maintains character integrity across dozens of illustrations and multiple book installments.
by camalus