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 rapidly generate comprehensive signage documentation packages that integrate design intent with regulatory compliance. This skill produces detailed material specifications, ADA accessibility compliance matrices, and installation scheduling documents—eliminating manual compilation across multiple systems and reducing contractor revisions.
by camalus
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 develop complete visitor journey maps that layer curatorial narratives, accessibility requirements, and architectural constraints into cohesive spatial experiences. The skill helps you identify wayfinding decision points, establish visual hierarchy systems, stress-test flows against visitor behavior patterns, and validate designs before production—ensuring exhibitions serve multiple visitor typologies simultaneously without sacrificing thematic storytelling.
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 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
You can generate comprehensive brand guidelines that serve as the foundational document for visual and verbal consistency across all brand communications. This skill produces detailed specifications covering logo usage, color systems, typography, imagery standards, tone of voice, and governance structures—all tailored to your brand's specific needs, market position, and organizational complexity. The guidelines you create are designed to be legally defensible, creatively inspiring, and flexible enough to accommodate emerging channels and regional variations.
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 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