animate-css-skill
Adds Animate.css (v4.1.1) animations to HTML, React/JSX, and WordPress PHP templates. Includes scroll-trigger via Intersection Observer, RTL directional flipping, and prefers-reduced-motion compliance.
How do I install this agent skill?
npx skills add https://github.com/podo/design-agent-skills --skill animate-css-skillIs this agent skill safe to install?
- Gen Agent Trust Hubwarn
This skill acts as a stub that requires installing external code from an unverified third-party GitHub repository using shell commands, which introduces dependency risks.
- Socketpass
No alerts
- Snykwarn
Risk: MEDIUM · 1 issue
What does this agent skill do?
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-skillwith content beyond this stub.- Yes → invoke
animate-css-skilland proceed - No → go to step 2
- Yes → invoke
-
Which agent are you on?
- Claude Code →
npx skills add msrbuilds/animate-css-skill— or send! npx skills add …as a chat message (add-gfor global, omit for project-only) - Cursor →
npx skills add msrbuilds/animate-css-skill - Other →
npx skills add msrbuilds/animate-css-skillor see GitHub README
- Claude Code →
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)
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/podo/design-agent-skills/animate-css-skill">View animate-css-skill on skillZs</a>