UI Animation Specification Generator
Generate production-ready animation specs and developer handoff docs from design intent
What You Can Do
You can convert loose animation ideas into detailed, implementation-ready specifications that developers can execute consistently. The skill generates timing documentation, state transition matrices, performance budgets, accessibility notes, and code-ready specs compatible with CSS, JavaScript, and native frameworks—eliminating vague design language and replacing it with exact technical requirements.
Features
Produces exact duration, delay, and easing curves with control points for every animation
Maps user interactions to animation sequences across multiple UI states
Recommends optimization strategies and frame rates for complex animations
Documents motion-sensitive user accommodations and prefers-reduced-motion alternatives
Outputs animations in CSS keyframes, JavaScript animation properties, or native framework syntax
Breaks complex animations into discrete keyframes with exact timing for each
Addresses interrupts, cancellations, and state conflicts in animation flows
Creates standardized animation language for design systems and junior designer reference
Example Output
Input: Motion concept for a button interaction with ripple effect and state change
Output:
Animation: Button Ripple Expansion
- Duration: 600ms
- Delay: 0ms
- Easing: cubic-bezier(0.4, 0, 0.2, 1) [Material Design emphasis]
- Keyframes:
- 0%: opacity 0.3, scale 0
- 100%: opacity 0, scale 4
- Performance: 60fps, GPU-accelerated transform
Animation: State Transition (idle → active)
- Duration: 300ms
- Sequence: background-color fade (0-150ms) → icon rotate (100-300ms)
- Easing: ease-out for color, linear for rotation
- Accessibility: Respects prefers-reduced-motion with instant state change
Implementation: CSS @keyframes with will-change optimization or requestAnimationFrame with cancellation handlers for interrupts
What's Included
- SKILL.md instruction file with animation specification methodology:
- Animation Specification Template: Standardized format for all animation documentation
- Easing Curve Reference Sheet: Common curves with control points and use cases
- State Transition Mapping Framework: Worksheet for multi-state interaction flows
- Accessibility Compliance Checklist: Motion-sensitive user accommodations and WCAG 2.1 requirements
- Performance Audit Worksheet: Frame rate calculation and GPU optimization guidelines
Who It's For
- Motion designers and UI animators — Document animations for developer handoff and reduce revision cycles
- UX/UI designers — Specify interactions with technical precision before development begins
- Design system managers — Establish standardized motion language and animation guidelines for teams
- Frontend developers — Receive unambiguous animation specs and implementation requirements
- Product managers — Understand animation complexity and technical feasibility early in planning
Best For
- Converting design intent into developer-ready animation specifications
- Documenting complex multi-state interaction flows and edge cases
- Creating animation guidelines and motion design systems
- Reviewing animation technical feasibility before committing to concepts
- Generating accessibility documentation for motion-sensitive users
- Establishing performance constraints and optimization strategies for animation-heavy features
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 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 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 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