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 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