Animate
Audit a UI feature and add purposeful motion, feedback, and micro-interactions without violating performance or Impeccable design rules.
Overview
Animate is an agent skill for the Build phase that reviews a feature and adds purposeful animations and micro-interactions guided by Impeccable design principles.
Install
npx skills add https://github.com/pbakaus/impeccable --skill animateWhat is this skill?
- MANDATORY prep: invoke `/impeccable` and follow its Context Gathering Protocol (run `/impeccable teach` if no design con
- Assesses missing feedback, jarring transitions, unclear spatial relationships, and delight gaps
- Weights personality (playful vs calm) and performance constraints before prescribing motion
- Targets button acknowledgment, route changes, show/hide, and attention-guiding micro-interactions
- Strategic motion only—pairs with Impeccable anti-patterns to avoid gratuitous animation
Adoption & trust: 82.5k installs on skills.sh; 35.9k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your UI works but feels dead or abrupt—actions lack feedback and state changes jar users who cannot see relationships between elements.
Who is it for?
Founders polishing a SaaS or marketing UI who already use or will run Impeccable for design context before layering motion.
Skip if: Greenfield brand definition with zero design tokens—run `/impeccable teach` and establish context first; skip if you only need raw CSS snippets without UX rationale.
When should I use this skill?
User mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.
What do I get? / Deliverables
You get a motion plan and implementations aligned with Impeccable context—feedback, smoother transitions, and delight that respect performance constraints.
- Animation opportunity assessment for the target feature
- Implemented transitions and micro-interactions with rationale
Recommended Skills
Journey fit
Motion design ships with the product UI, so the canonical shelf is Build when interfaces are being refined for real users. Animations and hover/transition work live in frontend surfaces—components, routes, and interaction layers—not in backend or ops tooling.
How it compares
Impeccable-gated motion design workflow, not an unmanaged “make it bouncy” styling pass.
Common Questions / FAQ
Who is animate for?
Solo builders and designers shipping web or app UI who want agent-guided animation and micro-interactions tied to Impeccable principles.
When should I use animate?
During Build on the frontend when the user mentions animation, transitions, hover effects, micro-interactions, or making the interface feel more responsive and alive.
Is animate safe to install?
Check the Security Audits panel on this Prism page; the skill edits UI code and should be reviewed like any agent-driven frontend change.
Workflow Chain
Requires first: skill pbakaus impeccable impeccable
SKILL.md
READMESKILL.md - Animate
Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. ## MANDATORY PREPARATION Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: performance constraints. --- ## Assess Animation Opportunities Analyze where motion would improve the experience: 1. **Identify static areas**: - **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.) - **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes) - **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious - **Lack of delight**: Functional but joyless interactions - **Missed guidance**: Opportunities to direct attention or explain behavior 2. **Understand the context**: - What's the personality? (Playful vs serious, energetic vs calm) - What's the performance budget? (Mobile-first? Complex page?) - Who's the audience? (Motion-sensitive users? Power users who want speed?) - What matters most? (One hero animation vs many micro-interactions?) If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. **CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them. ## Plan Animation Strategy Create a purposeful animation plan: - **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?) - **Feedback layer**: Which interactions need acknowledgment? - **Transition layer**: Which state changes need smoothing? - **Delight layer**: Where can we surprise and delight? **IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments. ## Implement Animations Add motion systematically across these categories: ### Entrance Animations - **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations - **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects) - **Content reveals**: Scroll-triggered animations using intersection observer - **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management ### Micro-interactions - **Button feedback**: - Hover: Subtle scale (1.02-1.05), color shift, shadow increase - Click: Quick scale down then up (0.95 → 1), ripple effect - Loading: Spinner or pulse state - **Form interactions**: - Input focus: Border color transition, slight scale or glow - Validation: Shake on error, check mark on success, smooth color transitions - **Toggle switches**: Smooth slide + color transition (200-300ms) - **Checkboxes/radio**: Check mark animation, ripple effect - **Like/favorite**: Scale + rotation, particle effects, color transition ### State Transitions - **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms) - **Expand/collapse**: Height transition with overflow handling, icon rotation - **Loading states**: Skeleton screen fades, spinner animations, progress bars - **Success/error**: Color transitions, icon animations, gentle scale pulse - **Enable/disable**: Opacity transitions, cursor changes ### Navigation & Flow - **Page transitions**: Crossfade between routes, shared element transitions - **Tab switching**: Slide indicator, content fade/slide - **Carousel/slider**: Smooth transforms, s