mcpField
A
animate-css-skill

animate-css-skill

github.com/podoDesign & UI29166 installsUpdated 1d ago
Repository

About animate-css-skill

animate-css-skill guides developers in applying Animate.css v4.1.1 animations to HTML, React/JSX, and WordPress templates. It covers the class catalogue, extracting only needed keyframes, and accessibility considerations.

Key features

  1. 01Apply Animate.css classes
  2. 02Extract only needed keyframes
  3. 03Add scroll-triggered reveals
  4. 04Adapt directions for RTL layouts
  5. 05Respect reduced-motion preferences

Use cases

  1. 01Add entrance animations to React components
  2. 02Animate elements in WordPress templates
  3. 03Reveal elements as a page scrolls

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill animate-css-skill

After installing, type/animate-css-skillin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

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)

Comments

Markdown supported