New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

I Animate

by boussadjra in boussadjra/vuestrata

Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.

MITAuto-check passedFrontend & Design

Install I Animate

skills CLI
$ npx skills add boussadjra/vuestrata --skill i-animate -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install boussadjra/vuestrata i-animate --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/boussadjra/vuestrata.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.github/skills/i-animate .claude/skills/i-animate && rm -rf skills-src

Use ~/.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/

Facts

Skill name
i-animate
GitHub stars
111
Used in
4 other repos
Token cost
~2.1k tokens
SKILL.md length
854 words
Files
1
Skills in repo
21
Repo updated
First seen
Licence
MIT

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: If you don't find exact information and… → Otherwise, if you can't fully infer or…
  • Tasks that involve Web animation and motion
  • 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

I Animate is an agent skill from boussadjra/vuestrata. Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.

Its SKILL.md is about 2.1k 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 and UX design. The repository describes itself as: A modern, production-ready Vue 3 template with multi-theme support, Reka UI wrappers, and enterprise-grade tooling. The licence is MIT.

When your agent uses it

  • Tasks that involve Web animation and motion
  • Tasks that involve UX design

Example prompts

  • “/i-animate”

Workflow steps

2 steps, taken from the first numbered list in SKILL.md.

  1. If you don't find exact information and have to infer from existing design and functionality, you MUST STOP and ask the user directly to…
  2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST ask the user directly to clarify what you…

What it can do on your machine

Read from SKILL.md and the folder at commit 73cbf9f. 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

I Animate loads about 2.1k tokens when it runs. Until then it costs about 36 tokens; SKILL.md has 854 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~36
When it runs · the whole SKILL.md, loaded when a task matches
~2.1k

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 boussadjra/vuestrata at commit 73cbf9f, republished under its MIT licence (© boussadjra). 854 words, ~2,065 tokens.

Download SKILL.mdSave it as .claude/skills/i-animate/SKILL.md (or your agent's skills folder).
name
i-animate
description
Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.
user-invokable
true
argument-hint
TARGET=<value>

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 ask the user directly to clarify what you cannot infer. whether you got it right.
  2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST ask the user directly to clarify what you cannot infer. 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 i-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, 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
Show full SKILL.md (337 more words)Show less
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
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):

css
/* 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
css
/* Prefer for simple, declarative animations */
- transitions for state changes
- @keyframes for complex sequences
- transform + opacity only (GPU-accelerated)
JavaScript Animation
javascript
/* Use for complex, interactive animations */
- Web Animations API for programmatic control
- Framer Motion for React
- GSAP for complex sequences
Performance
  • GPU acceleration: Use transform and opacity, avoid layout properties
  • will-change: Add sparingly for known expensive animations
  • Reduce paint: Minimize repaints, use contain where appropriate
  • Monitor FPS: Ensure 60fps on target devices
Accessibility
css
@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.

© boussadjra, MIT. 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 .github/skills/i-animate of boussadjra/vuestrata.

Open the folder on GitHubat commit 73cbf9f

Used in 4 other repositories

We found 4 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 4 other GitHub owners. This page covers the copy in boussadjra/vuestrata, which our catalogue first saw on October 7, 2026.

Compare with similar skills

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

I Animate compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
I Animate this skillboussadjra/vuestrata1114 repos~2.1kAutomated safety check: PassMIT
Impeccablebestofjs/bestofjs3.1k26 repos~2.6kAutomated safety check: PassMIT
Animategrowupanand/ConvoForm1026 repos~1.9kAutomated safety check: PassApache-2.0
Interaction Designpoteto/noodle454—~491Automated safety check: PassMIT
GSAP ScrollTriggergreensock/gsap-skills16k4 repos~4.6kAutomated safety check: PassMIT
GSAP Core Animationgreensock/gsap-skills16k3 repos~3.7kAutomated safety check: PassMIT

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…

    3.1k GitHub starsUsed in 26 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Animate

    growupanand/ConvoForm

    Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.

    102 GitHub starsUsed in 6 repos~1.9k tokens
    Frontend & DesignAuto-check passed

  • Interaction Design

    poteto/noodle

    Design and implement microinteractions, motion design, transitions, and user feedback patterns.

    454 GitHub stars~491 tokensUpdated 6 mo ago
    Frontend & DesignAuto-check passed

  • GSAP ScrollTrigger

    greensock/gsap-skills

    Teaches an agent how to wire up GSAP's ScrollTrigger plugin for scroll-linked animation, pinned sections and scrub, including the start and end position syntax.

    16k GitHub starsUsed in 4 repos~4.6k tokens
    Frontend & DesignAuto-check passed

  • GSAP Core Animation

    greensock/gsap-skills

    Covers the GSAP core API for tweens, easing, staggers, defaults and matchMedia, and when to choose GSAP over CSS animations or other JavaScript animation libraries.

    16k GitHub starsUsed in 3 repos~3.7k tokens
    Frontend & DesignAuto-check passed

  • Web Animation Design

    baptisteArno/typebot.io

    Guides easing, timing and animation choices for UI motion, based on a web animation course, and reviews existing animations in a before-and-after table.

    11k GitHub starsUsed in 2 repos~2.7k tokens
    Frontend & DesignAuto-check passed

More from boussadjra/vuestrata

All 21 skills in this repo

  • I Delight

    boussadjra/vuestrata

    Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use.

    111 GitHub starsUsed in 11 repos~2.6k tokens
    Auto-check passed

  • I Optimize

    boussadjra/vuestrata

    Improve interface performance across loading speed, rendering, animations, images, and bundle size.

    111 GitHub starsUsed in 11 repos~1.9k tokens
    Auto-check passed

  • I Frontend Design

    boussadjra/vuestrata

    Create distinctive, production-grade frontend interfaces with high design quality.

    111 GitHub starsUsed in 9 repos~2k tokens
    Auto-check passed

  • I Harden

    boussadjra/vuestrata

    Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management.

    111 GitHub starsUsed in 7 repos~2.3k tokens
    Auto-check passed

  • I Onboard

    boussadjra/vuestrata

    Design or improve onboarding flows, empty states, and first-time user experiences.

    111 GitHub starsUsed in 7 repos~2k tokens
    Auto-check passed

  • I Teach Impeccable

    boussadjra/vuestrata

    One-time setup that gathers design context for your project and saves it to your AI config file.

    111 GitHub starsUsed in 6 repos~672 tokens
    Auto-check passed

Categories

Questions about I Animate

What does I Animate do?

Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. I Animate is an agent skill from boussadjra/vuestrata. Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.

When should I use I Animate?

I Animate fits situations like: tasks that involve Web animation and motion; tasks that involve UX design.

How do I install I Animate in Claude Code?

Run `npx skills add boussadjra/vuestrata --skill i-animate -a claude-code`. Or copy the skill folder (.github/skills/i-animate in boussadjra/vuestrata) into .claude/skills/i-animate in your project. Claude Code loads it when a task matches its description.

How do I install I Animate in Codex?

Run `npx skills add boussadjra/vuestrata --skill i-animate -a codex`. Or copy the skill folder (.github/skills/i-animate in boussadjra/vuestrata) into .agents/skills/i-animate in your project. Codex loads it when a task matches its description.

Can I use I 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 boussadjra/vuestrata --skill i-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/i-animate, .gemini/skills/i-animate, .github/skills/i-animate and .opencode/skills/i-animate in your project.

What does I Animate need to run?

SKILL.md names no scripts, command-line tools or credentials: I Animate is instructions for the agent only.

Does I 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 I 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 I Animate use?

I Animate is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does I Animate use?

About 2.1k tokens (SKILL.md is roughly 8.3k 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 I Animate?

Skills that share tags, products or a category with I Animate: Impeccable (bestofjs/bestofjs, 3.1k stars), Animate (growupanand/ConvoForm, 102 stars), Interaction Design (poteto/noodle, 454 stars) and GSAP ScrollTrigger (greensock/gsap-skills, 16k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains I Animate?

boussadjra (a GitHub user) maintains it in boussadjra/vuestrata, which has 111 GitHub stars. The repository holds 21 skills in this directory. The repository was last updated on October 5, 2026.

Source: boussadjra/vuestrata on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.