animate
Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.
Best for UI enhancementWorks with GitHubLow risk
⌘source
- author
@pbakaus- language
- JavaScript
★21kstars
1kforks
Apr 22, 2026
✦overview.md
Key Features
- ·Analyze static areas for animation opportunities
- ·Add purposeful micro-interactions and transitions
- ·Improve usability and delight with motion
- ·Follow context gathering protocol for design
Use Cases
- →Adding hover effects to buttons for better feedback
- →Smoothing page transitions for a polished feel
- →Creating loading animations to reduce perceived wait time
Best for
- ✓UI enhancement
- ✓motion design tasks
- ✓frontend developers
Not ideal for
- !backend-only projects
- !performance-critical static pages
FAQs
name
animate
description
Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.
version:2.1.1
user-invocable:true
argument-hint:[target]
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:
-
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
-
Understand the context:
- What's the personality? (Playful vs serious, energetic vs calm)
- What's the performance budget? (Mobile-first? Complex page?)
$install
1-click copynpx skills add pbakaus/impeccable --skill animateSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
3/ 5
goodMostly clear, but there are still a few confusing or poorly structured parts.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
3/ 5
mediumPartially actionable with several concrete steps, but still missing important details.