Animate-CSS Skill for AI Agents

An AI agent skill that adds Animate.css (v4.1.1) animations to HTML, React/JSX, and WordPress PHP templates — with scroll-trigger support, RTL awareness, and prefers-reduced-motion respect baked in. Works with Claude Code, Cursor, Windsurf, GitHub Copilot, and any AI coding agent that supports custom instructions.

What it does

When installed, your AI agent automatically:

• Picks the right animation based on element type and context — no guessing needed
• Extracts only the CSS you need from the bundled library instead of loading the full file
• Applies scroll-triggered animations via Intersection Observer for below-the-fold elements
• Flips directional animations for RTL layouts (Arabic, Urdu, Hebrew, etc.)
• Respects prefers-reduced-motion in both CSS and JavaScript
• Tunes the observer threshold based on element size (badges vs. full sections)

Works across all three environments:

Environment	Output
Raw HTML	data-animate attributes + IIFE observer script
React / JSX	Reusable useScrollAnimate hook + className pattern
WordPress PHP	data-* attributes + enqueueable scroll-animate.js + functions.php snippet

---

Repo structure

animate-css-skill/
├── SKILL.md              # Skill instructions (your AI agent reads this)
└── assets/
    └── animate.min.css   # Bundled Animate.css v4.1.1 (offline, no CDN needed)

---

Installation

First, clone the repo:

git clone https://github.com/msrbuilds/animate-css-skill

Then follow the instructions for your editor or AI agent below.

---

Claude Code (CLI, VS Code, JetBrains, Desktop, Web)

Personal install (available in all your projects):

# macOS / Linux
mkdir -p ~/.claude/skills/animate-css
cp -r animate-css-skill/* ~/.claude/skills/animate-css/

# Windows (PowerShell)
New-Item -ItemType Directory -Force -Path "$env:USERPROFILE\.claude\skills\animate-css"
Copy-Item -Recurse animate-css-skill\* "$env:USERPROFILE\.claude\skills\animate-css\"

Project-specific install (available only in that project):

mkdir -p .claude/skills/animate-css
cp -r animate-css-skill/* .claude/skills/animate-css/

Once installed, type /animate-css in Claude Code or just ask naturally — the skill activates automatically based on context.

---

Cursor

Copy the skill into a Cursor rule file:

mkdir -p .cursor/rules
cp animate-css-skill/SKILL.md .cursor/rules/animate-css.md

Cursor auto-injects rules into every AI request in that project — no slash command needed.

---

Windsurf / Codeium

Copy the skill into the Windsurf rules directory:

mkdir -p .windsurf/rules
cp animate-css-skill/SKILL.md .windsurf/rules/animate-css.md

Like Cursor, rules are always-on and applied automatically per project.

---

GitHub Copilot

Append the skill to Copilot's custom instructions file:

mkdir -p .github
cat animate-css-skill/SKILL.md >> .github/copilot-instructions.md

Commit and push — Copilot picks it up automatically for the repo. If you already have instructions in that file, merge manually to avoid duplicates.

---

Zed

Copy the skill into Zed's assistant rules directory:

# macOS / Linux
mkdir -p ~/.config/zed/rules
cp animate-css-skill/SKILL.md ~/.config/zed/rules/animate-css.md