animate-css-skill

Catalogue stub — full package: msrbuilds/animate-css-skill

Decision tree

Is the package already installed? Check: your agent's skills directory contains animate-css-skill with content beyond this stub.
- Yes → invoke animate-css-skill and proceed
- No → go to step 2
Which agent are you on?
- Claude Code → npx skills add msrbuilds/animate-css-skill — or send ! npx skills add … as a chat message (add -g for global, omit for project-only)
- Cursor → npx skills add msrbuilds/animate-css-skill
- Other → npx skills add msrbuilds/animate-css-skill or see GitHub README

Install command

npx skills add msrbuilds/animate-css-skill

Invoke after install

Skill name: animate-css-skill
Trigger phrases: "Animate.css", "CSS animation library", "bounce animation", "fadeIn", "animate-css"

What it does

Applies Animate.css v4.1.1 animations across HTML, React/JSX components, and WordPress PHP templates. Covers the full Animate.css class catalogue (attention seekers, bouncing, fading, flipping, rotating, sliding, zooming, specials) with correct CDN or npm setup. Adds scroll-triggered reveals using the Intersection Observer API, RTL-aware directional flipping for right-to-left layouts, and prefers-reduced-motion compliance to respect user accessibility preferences.

When NOT to use

Custom keyframe animations built from scratch (use css-animation-skill)
Interactive gesture-driven animations requiring JavaScript state (use framer-motion-skills)