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 develop end-to-end wayfinding strategies for retail spaces that integrate signage systems, spatial cues, color coding, and lighting into seamless customer journeys. This skill helps you map critical decision points (store entrance, category transitions, checkout flows), design multi-floor navigation systems, and create brand-consistent environmental graphics that convert browsers into purchasers while reducing decision fatigue.
by camalus
You can systematically analyze motion graphics timing across broadcast frame rates (23.976, 24, 25, 29.97, 59.94 fps) and receive precise frame-duration calculations, animation sequencing guidance, and technical specifications. This skill transforms creative timing decisions into quantifiable specifications that translate directly into production workflows, ensuring your animations comply with broadcast standards while maximizing visual readability and impact.
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
You can take raw creative briefs and convert them into structured character design packages that include visual specifications, personality matrices, silhouette variants, design rationale, and consistency frameworks. Claude synthesizes your requirements into actionable specifications that establish character DNA, visual hierarchy, and distinguishing features—accelerating your concept phase and eliminating ambiguous revisions before you begin detailed rendering.
by camalus
You can generate comprehensive motion design briefs that account for platform-specific technical requirements, psychological engagement triggers, and algorithmic promotion mechanics. The skill analyzes trending formats across TikTok, Instagram Reels, and YouTube Shorts to identify viral patterns, then translates those insights into actionable creative constraints and storyboards. This reduces revision cycles, improves content performance metrics, and positions designs to capitalize on emerging trends.
by camalus
You can develop comprehensive luxury packaging strategies that balance aesthetic ambition with manufacturing feasibility. This skill helps you articulate material hierarchies, create unboxing narratives that extend brand storytelling, audit packaging against luxury competitive standards, and generate sensory design specifications that justify premium positioning. You'll produce strategically sound concepts grounded in brand heritage and perceived value.
by camalus
You'll systematically deconstruct character briefs to extract design requirements, establish visual hierarchies, map personality traits to visual language, and create iteration frameworks that keep revisions aligned with stakeholder expectations. This skill compresses the brief interpretation phase from days to hours, delivering design-ready specifications that reduce revision cycles and keep character development on-brand and on-strategy.
by camalus
You can produce complete, enforceable brand guidelines that transform your strategic brand direction into actionable documentation. Claude helps you structure visual standards (typography, color systems, imagery), verbal identity (tone, messaging, vocabulary), application guidelines across touchpoints, and accessibility requirements—all formatted for immediate stakeholder handoff and external partner compliance.
by camalus