Agent skill · design visual · aiskillstore
animate
Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.
Why this skill is useful
Provides a structured approach to implementing purposeful animations and micro-interactions that enhance user experience, which the AI may not generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. MANDATORY PREPARATION Context Gathering (Do This First) You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality/tone (playful vs serious, energetic vs calm), and performance constraints. Attempt to gather these from the current thread or codebase. 1. If you don't find exact information and have to infer from existing design and functionality, you MUST STOP and {{askinstruction}} whether you got it right. 2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST {{askinstruction}} clarifying questions first to complete your context. Do NOT proceed until you have answers. Guessing leads to inappropriate or excessive animation. Use frontend-design skill Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts. --- 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, {{askinstruction}} CRITICAL: Respect prefers-reduced-motion. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/animate