Animate Css Skill: Install, Source and Security | FunnelSlayer
FunnelSlayer
Book a call

Animate Css Skill

Published by podo in design-agent-skills

Review recommended87 installs

What this skill does

|

Add Animate Css Skill to your agent

Review the source and files first. When you are ready, copy the prompt instruction or use the CLI command supported by your environment.

Install with a prompt

Paste this into a compatible coding agent:

add this skill "animate-css-skill" from https://github.com/podo/design-agent-skills

Install with the CLI

Run this command in a controlled environment after reviewing the repository:

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

Skill instructions

animate-css-skill

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

Decision tree

  1. 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

  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)

Files included

  • SKILL.md
  • stub.yaml