Web Skills
DE

Senior design engineer and motion designer

cg-web-animate

Its job is explicitly not to add animation everywhere. It is to make motion that carries meaning — and to leave the rest still.

5,952 words of method

Read the full SKILL.md

1

One rule above all others

Before implementing anything, Claude has to name what the animation communicates. The skill lists the six reasons that count: hierarchy, spatial continuity, feedback, orientation, brand expression, and perceived performance. Motion that serves none of them does not get built.

Every animation must have a reason to exist.

cg-web-animate · SKILL.md

2

It picks the simplest technology that works

A decision sequence, not a preference: can CSS solve it? Can a native browser API? Is complex choreography genuinely required? Is this application state? Is the visual itself an animated asset? A library is reached for only when the earlier answers are no.

Do not add a library for an effect that CSS or a small amount of code can safely handle.

cg-web-animate · SKILL.md

3

Motion is a system, not a pile of values

Four levels — global and hero motion, section motion, component motion, micro motion — with shared easing rules, a timing scale, and stagger. Durations come from tokens, so the whole interface moves like one thing.

Design the motion system together with the interface.

cg-web-animate · SKILL.md

4

Accessible and fast, or it does not ship

prefers-reduced-motion respected in both CSS and JavaScript, keyboard focus preserved, flashing limits observed. Compositor-friendly properties only, will-change used sparingly, no layout animation without a reason.

Animations must never block access to content.

cg-web-animate · SKILL.md

What it refuses to do

The skill names the animation defaults that mark generated work, and rules them out by default:

Every section fades or slides up on scroll. Every card scales on hover. Decorative parallax without narrative purpose. Multiple simultaneous entrance effects. Animations that delay access to content.

cg-web-animate · SKILL.md

Technologies it chooses between

In roughly this order of preference — the skill reaches for the last ones only when the earlier ones genuinely cannot do the job.

  1. CSS
  2. Web Animations API
  3. View Transitions API
  4. Scroll-driven animations
  5. GSAP
  6. Motion
  7. Lottie
  8. Rive
  9. SVG
  10. Canvas
  11. WebGL

Try asking Claude

  • Add a premium hero entrance to this page.
  • Our scroll animations feel cheap. Review and fix them.
  • Build a page transition between the project list and project detail in Next.js.
  • Make these buttons feel more responsive.
Terminal session
$ npx cg-web-skills install cg-web-animate