How to use the Animation Systems agent skill

What the animation-systems skill makes the agent do

When the skill is installed, the agent follows a written set of rules for web animation. The rules cover when motion is worth using, recommended durations and easing values, common entrance and hover patterns, performance guidance, and support for reduced-motion settings.

Asked to add motion to a site, the agent plans the animation first, then writes CSS or animation library code that follows those rules. The skill is only instructions. It contains no scripts and does not fetch anything online.

• Motion goals: what the animation is meant to communicate
• Motion tokens: durations, easing and offsets
• A choreography plan with timeline beats
• Implementation notes covering performance and reduced motion
• A small code recipe in CSS, GSAP or Framer Motion, depending on your stack

Install the animation-systems skill

Download the ZIP for the skill from this page. Unzip it into one of these locations, depending on how you want to use it.

For personal use across projects, put the skill folder in ~/.claude/skills/. To limit it to a single project, put it in that project's .claude/skills/ folder.

If you use the Claude apps instead, open Settings, go to Capabilities, and upload the skill under Skills.

• Personal: ~/.claude/skills/
• Single project: .claude/skills/ inside the project
• Claude apps: Settings → Capabilities → Skills, then upload

How to trigger the skill with a natural request

You don't need a special command. Describe the motion you want in plain language, and the agent will use the skill when the request matches its description: designing or implementing product-grade web motion, including easing and duration defaults, choreography, scroll and hover interactions, performance and reduced motion.

The demo prompts in the skill folder refer to the skill by name, so you can also start a request with $animation-systems to be explicit.

• Add Stripe-style entrance animations to my landing page hero.
• Plan the motion for our product site and give me a shared set of motion tokens.
• Add subtle hover lift to the pricing cards without hurting performance.
• Make the nav drawer slide in, and respect reduced-motion settings.

Example: what a good response contains

When you ask the agent to add a style of animation, the skill asks it to return a fixed structure: motion goals, motion tokens, a choreography plan, implementation notes and a small code recipe. Reading the plan first lets you catch a wrong choice before any code is written.

The skill also tells the agent to ask you a few questions first, such as which brand lane you want, which key moments matter, any performance constraints, and whether you have reduced-motion requirements.

• Typical starting values from the skill: micro hover or press 120–200ms, section entrance 400–800ms, fade and rise of 12–24px with 300–700ms duration.
• Hover lift of -2 to -6px with a subtle shadow increase.
• Stagger of 40–90ms per element, smaller on mobile.

What the skill needs and safety notes

The skill requires nothing beyond the agent itself. It runs no scripts and uses no network access, so it only shapes the agent's written guidance and code.

The skill does not verify its output. It does not open a browser or measure real performance, so you still need to test the result on real devices and check it against your own accessibility requirements.

• Requires: nothing listed
• Runs scripts: no
• Uses network: no
• Check output in a browser and on mobile before shipping
• Test with reduced motion turned on

Tips for better results

Name the brand lane you want, such as polished, minimal, cinematic or developer-focused, and list the key moments such as the hero, scroll story, hover cards or navigation. Specific input leads to a plan you can use.

Give the motion tokens to the whole team early. A shared set of durations, easing curves and offsets keeps designers and engineers aligned before implementation.

• Say which elements matter most so the agent can pick one hero moment.
• Ask for the token set first if designers and engineers will both use it.
• Ask explicitly for reduced-motion handling if your site needs it.
• Avoid asking for bouncy or cartoon effects; the skill advises against them.

When this skill is not the right fit

The skill is built for restrained motion. It is a poor match for playful, bouncy or cartoon-style animation, which it advises against and which may come out overly restrained.

It also does not cover non-web work such as video or game engines, and it does not test or benchmark anything.

• Playful or bouncy brands
• Video or game engine animation
• Anyone needing browser verification or measured performance