Interaction Design
poteto/noodle
Design and implement microinteractions, motion design, transitions, and user feedback patterns.
Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.
Install Animate
$ npx skills add growupanand/ConvoForm --skill animate -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install growupanand/ConvoForm animate --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/growupanand/ConvoForm.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/animate .claude/skills/animate && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "animate" agent skill from https://github.com/growupanand/ConvoForm/tree/main/.agents/skills/animate into .claude/skills/animate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animate", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/growupanand/ConvoForm/tree/main/.agents/skills/animateType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add growupanand/ConvoForm --skill animate -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install growupanand/ConvoForm animate --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/growupanand/ConvoForm.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/animate .agents/skills/animate && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "animate" agent skill from https://github.com/growupanand/ConvoForm/tree/main/.agents/skills/animate into .agents/skills/animate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animate", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add growupanand/ConvoForm --skill animate -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install growupanand/ConvoForm animate --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/growupanand/ConvoForm.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/animate .cursor/skills/animate && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "animate" agent skill from https://github.com/growupanand/ConvoForm/tree/main/.agents/skills/animate into .cursor/skills/animate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animate", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/growupanand/ConvoForm.git --path .agents/skills/animate--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add growupanand/ConvoForm --skill animate -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install growupanand/ConvoForm animate --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/growupanand/ConvoForm.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/animate .gemini/skills/animate && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "animate" agent skill from https://github.com/growupanand/ConvoForm/tree/main/.agents/skills/animate into .gemini/skills/animate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animate", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install growupanand/ConvoForm animateInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add growupanand/ConvoForm --skill animate -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/growupanand/ConvoForm.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/animate .github/skills/animate && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "animate" agent skill from https://github.com/growupanand/ConvoForm/tree/main/.agents/skills/animate into .github/skills/animate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animate", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add growupanand/ConvoForm --skill animate -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install growupanand/ConvoForm animate --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/growupanand/ConvoForm.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/animate .opencode/skills/animate && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "animate" agent skill from https://github.com/growupanand/ConvoForm/tree/main/.agents/skills/animate into .opencode/skills/animate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animate", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
animate- GitHub stars
- 102
- Used in
- 6 other repos
- Token cost
- ~1.9k tokens
- SKILL.md length
- 733 words
- Files
- 1
- Skills in repo
- 11
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.
- Works in 2 steps: Identify static areas → Understand the context
- The user mentions adding animation
- SKILL.md covers MANDATORY PREPARATION, Assess Animation Opportunities, Plan Animation Strategy and Implement Animations, plus 2 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Animate is an agent skill from growupanand/ConvoForm. 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.
Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering Web animation and motion, UX design and Motion graphics. The repository describes itself as: Turn Forms into Conversations with AI. The licence is Apache-2.0.
When your agent uses it
- The user mentions adding animation
- Micro-interactions
- Making the UI feel more alive
Example prompts
- “/animate”
Workflow steps
2 steps, taken from the first numbered list in SKILL.md.
- Identify static areas
- Understand the context
What it can do on your machine
Read from SKILL.md and the folder at commit 36dcb51. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are css and javascript).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Animate loads about 1.9k tokens when it runs. Until then it costs about 71 tokens; SKILL.md has 733 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from growupanand/ConvoForm at commit 36dcb51, republished under its Apache-2.0 licence (© growupanand). 733 words, ~1,914 tokens.
Download SKILL.mdSave it as
.claude/skills/animate/SKILL.md (or your agent's skills folder).- 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.
- 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?)
- 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, snap points, momentum
- Scroll effects: Parallax layers, sticky headers with state changes, scroll progress indicators
Show full SKILL.md (303 more words)Show less
Feedback & Guidance
- Hover hints: Tooltip fade-ins, cursor changes, element highlights
- Drag & drop: Lift effect (shadow + scale), drop zone highlights, smooth repositioning
- Copy/paste: Brief highlight flash on paste, "copied" confirmation
- Focus flow: Highlight path through form or workflow
Delight Moments
- Empty states: Subtle floating animations on illustrations
- Completed actions: Confetti, check mark flourish, success celebrations
- Easter eggs: Hidden interactions for discovery
- Contextual animation: Weather effects, time-of-day themes, seasonal touches
Technical Implementation
Use appropriate techniques for each animation:
Timing & Easing
Durations by purpose:
- 100-150ms: Instant feedback (button press, toggle)
- 200-300ms: State changes (hover, menu open)
- 300-500ms: Layout changes (accordion, modal)
- 500-800ms: Entrance animations (page load)
Easing curves (use these, not CSS defaults):
/* Recommended - natural deceleration */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, refined */
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* Slightly snappier */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Confident, decisive */
/* AVOID - feel dated and tacky */
/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */
/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */Exit animations are faster than entrances. Use ~75% of enter duration.
CSS Animations
/* Prefer for simple, declarative animations */
- transitions for state changes
- @keyframes for complex sequences
- transform + opacity only (GPU-accelerated)JavaScript Animation
/* Use for complex, interactive animations */
- Web Animations API for programmatic control
- Framer Motion for React
- GSAP for complex sequencesPerformance
- GPU acceleration: Use
transformandopacity, avoid layout properties - will-change: Add sparingly for known expensive animations
- Reduce paint: Minimize repaints, use
containwhere appropriate - Monitor FPS: Ensure 60fps on target devices
Accessibility
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}NEVER:
- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself
- Animate layout properties (width, height, top, left)—use transform instead
- Use durations over 500ms for feedback—it feels laggy
- Animate without purpose—every animation needs a reason
- Ignore
prefers-reduced-motion—this is an accessibility violation - Animate everything—animation fatigue makes interfaces feel exhausting
- Block interaction during animations unless intentional
Verify Quality
Test animations thoroughly:
- Smooth at 60fps: No jank on target devices
- Feels natural: Easing curves feel organic, not robotic
- Appropriate timing: Not too fast (jarring) or too slow (laggy)
- Reduced motion works: Animations disabled or simplified appropriately
- Doesn't block: Users can interact during/after animations
- Adds value: Makes interface clearer or more delightful
Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right.
© growupanand, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .agents/skills/animate of growupanand/ConvoForm.
Open the folder on GitHubat commit 36dcb51
Used in 6 other repositories
We found 8 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 6 other GitHub owners. This page covers the copy in growupanand/ConvoForm, which our catalogue first saw on October 7, 2026.
- mims-harvard/OptimusKG.agents/skills/animate
- zhushen12580/smart-screenshot.agents/skills/animate.claude/skills/animate
- netaart/cohub.agents/skills/animate
- AkaraChen/aghub.agents/skills/animate
- owshq-mec/semana-ai-data-engineer.claude/skills/animate
- theexperiencecompany/gaia.agents/skills/animate.claude/skills/animate
Compare with similar skills
Animate next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Animate this skillgrowupanand/ConvoForm | 102 | 6 repos | ~1.9k | Automated safety check: Pass | Apache-2.0 | |
| Interaction Designpoteto/noodle | 447 | — | ~491 | Automated safety check: Pass | MIT | |
| Impeccablebestofjs/bestofjs | 3.1k | 27 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Motion DesignLottieFiles/motion-design-skill | 2k | 1 repos | ~3.1k | Automated safety check: Pass | MIT | |
| Gsapboraoztunc/skills | 397 | 5 repos | ~1.9k | Automated safety check: Pass | Apache-2.0 | |
| Animate Textpixel-point/animate-text | 149 | 1 repos | ~1.6k | Automated safety check: Pass | None |
Similar skills
Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
Motion Design
LottieFiles/motion-design-skill
Applies motion design principles to create emotionally-driven, technically sound animations and transitions.
Gsap
boraoztunc/skills
GSAP animation reference for HyperFrames. An agent skill from boraoztunc/skills.
Animate Text
pixel-point/animate-text
Curated text animation catalog with exact JSON specs for headings, labels, counters, and text swaps.
Phantom Motion
pixelxzen/phantom-motion
交互式动态视觉叙事生成器 v11.0 (Hybrid Drive Edition)。基于用户输入的任意主题关键词， 通过多轮交互式对话收集需求，利用 React 19 + Tailwind 4 驱动的 Minimal Mono 极简编辑器， 实时操纵隔离在 Iframe 中的硬核 GSAP/WebGL 影视级叙事引擎。
More from growupanand/ConvoForm
All 11 skills in this repoCritique
growupanand/ConvoForm
Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based…
Audit
growupanand/ConvoForm
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns.
Colorize
growupanand/ConvoForm
Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive.
Clerk Orgs
growupanand/ConvoForm
Clerk Organizations for B2B and multi-tenant apps - org switching, roles and permissions, verified domains, and enterprise SSO.
Drizzle Orm
growupanand/ConvoForm
Type-safe SQL ORM for TypeScript with zero runtime overhead. An agent skill from growupanand/ConvoForm.
Distill
growupanand/ConvoForm
Strip designs to their essence by removing unnecessary complexity.
Related
Categories
Questions about Animate
What does Animate do?
Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Animate is an agent skill from growupanand/ConvoForm. Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.
When should I use Animate?
Animate fits situations like: the user mentions adding animation; micro-interactions; making the UI feel more alive.
How do I install Animate in Claude Code?
Run `npx skills add growupanand/ConvoForm --skill animate -a claude-code`. Or copy the skill folder (.agents/skills/animate in growupanand/ConvoForm) into .claude/skills/animate in your project. Claude Code loads it when a task matches its description.
How do I install Animate in Codex?
Run `npx skills add growupanand/ConvoForm --skill animate -a codex`. Or copy the skill folder (.agents/skills/animate in growupanand/ConvoForm) into .agents/skills/animate in your project. Codex loads it when a task matches its description.
Can I use Animate in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add growupanand/ConvoForm --skill animate -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/animate, .gemini/skills/animate, .github/skills/animate and .opencode/skills/animate in your project.
What does Animate need to run?
SKILL.md names no scripts, command-line tools or credentials: Animate is instructions for the agent only.
Does Animate access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Animate safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Animate use?
Animate is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Animate use?
About 1.9k tokens (SKILL.md is roughly 7.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Animate?
Skills that share tags, products or a category with Animate: Interaction Design (poteto/noodle, 447 stars), Impeccable (bestofjs/bestofjs, 3.1k stars), Motion Design (LottieFiles/motion-design-skill, 2k stars) and Gsap (boraoztunc/skills, 397 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Animate?
growupanand (a GitHub user) maintains it in growupanand/ConvoForm, which has 102 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on October 6, 2026.
Source: growupanand/ConvoForm on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.