Skip to content
Get packs

Animation Systems

Guides agents to design polished, accessible web motion in a Stripe/Linear/Apple/Vercel style.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
3 files

What it does

When installed, the agent follows a set of written guidelines for web animation: when motion is worth using, recommended timing and easing values, common entrance and hover patterns, performance rules, and support for reduced-motion settings. Asked to add motion to a site, it plans the animation first and then writes CSS or library code that follows those rules. The skill itself is only instructions; it contains no scripts and does not fetch anything online.

Great for

  • Front-end developers who want consistent, restrained animation on a marketing or product site
  • Designers who want a shared set of motion tokens (durations, easing, offsets) before handing off to engineering
  • Teams building a motion system who want accessibility and performance considered from the start

Skip it if

  • Projects that need playful, bouncy or cartoon-style motion, since the skill advises against it and may produce overly restrained results
  • Anyone expecting the skill to verify the output in a browser or measure real performance; it gives guidance, not testing
  • Non-web animation work such as video or game engines, which the guidance does not cover

Try asking

  • “Add a Stripe-style fade and rise entrance to the cards on my pricing page”
  • “Plan a hero animation sequence with labeled beats for our landing page”
  • “Create a motion token set with durations and easing for our product site”
  • “Make our hover and focus interactions subtle and respect reduced motion settings”
Step-by-step guide: how to use Animation SystemsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    animation-systems.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip animation-systems.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip animation-systems.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the brand lane you want (for example Linear for minimal or Apple for cinematic) so the agent picks the right restraint level.
  • State your stack up front (plain CSS, GSAP or Framer Motion) so the code recipe matches your project.
  • Ask explicitly for reduced-motion handling and performance limits on mobile, since the skill asks about these but results improve when you specify them.

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.