animate-css-skill

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

Decision tree

1. Is the full skill already installed? Upstream names this skill animate-css, so it installs next to this pointer (the pointer is not replaced).
   • Global: f=~/.agents/skills/animate-css/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • Project: f=.agents/skills/animate-css/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • installed → the skill is installed as animate-css, invoke it and proceed
   • pointer → go to step 2

2. Detect scope, then install:

   [ -e ~/.agents/skills/animate-css-skill ] && echo "global" || echo "project"

   Global:

   npx skills add msrbuilds/animate-css-skill --skill animate-css -g -y

   Project:

   npx skills add msrbuilds/animate-css-skill --skill animate-css -y

   Claude Code: send a command as a chat message starting with ! to run it without leaving the conversation.

Heads-up

• License: no LICENSE file in the repo

Invoke after install

• Skill name: animate-css
• 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) and extracts only the keyframes you need from the bundled assets/animate.min.css. 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)