How do I install the CSS Animation Skill skill?

Run npx skillmds add podo/css-animation-skill in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is CSS Animation Skill safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with CSS Animation Skill?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is CSS Animation Skill free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published CSS Animation Skill?

podo (@podo) published this skill. Their other Agent Skills are listed on their SkillMD profile.

CSS Animation Skill by podo — Agent Skill

Name: CSS Animation Skill
Rating: 4.2 (5 reviews)
Author: podo

CSS Animation Skill

Four-phase workflow — scrapes your live app's design language, interviews you about what to animate, produces a brief and self-contained HTML/CSS animation file, then iterates. Requires Claude-in-Chrome MCP for live scraping.

podo bd1a678 2 files · 2.5 KB Updated Sep 9, 2026

File contents

css-animation-skill

Catalogue stub — full skill: neonwatty/css-animation-skill

Decision tree

Is the full skill already installed? Check whether the skill at this location still has a das: block:
- Global: grep -q "^das:" ~/.agents/skills/css-animation-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
- Project: grep -q "^das:" .agents/skills/css-animation-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
- No das: block → full skill installed, invoke it and proceed
- das: block present → go to step 2

Detect scope, then install:

To detect scope:

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

Global (installed with -g):

npx skills add neonwatty/css-animation-skill --skill css-animation-skill -g -y

Project (installed without -g):

npx skills add neonwatty/css-animation-skill --skill css-animation-skill -y

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

Invoke after install

Skill name: css-animation-skill
Trigger phrases: "CSS animation", "custom animation", "animation from live app", "css-animation-skill"

What it does

Runs a four-phase animation creation workflow: (1) scrapes your live app using Claude-in-Chrome MCP to extract the existing design language — colours, fonts, spacing, motion style; (2) interviews you about what element to animate, desired feel, and constraints; (3) produces an animation brief and a self-contained HTML/CSS output file with the custom @keyframes animation; (4) iterates based on feedback until the result is approved. Produces bespoke keyframe animations matched to your app's visual identity rather than off-the-shelf library classes.

When NOT to use

Library-based animations where custom keyframes aren't needed (use animate-css-skill or framer-motion-skills)
Video or Lottie output (use wiggle-claude-skill)

---name: css-animation-skilldescription: Four-phase workflow — scrapes your live app's design language, interviews you about what to animate, produces a brief and self-contained HTML/CSS animation file, then iterates. Requires Claude-in-Chrome MCP for live scraping.--- # css-animation-skill > Catalogue stub — full skill: [neonwatty/css-animation-skill](https://github.com/neonwatty/css-animation-skill) ## Decision tree 1. **Is the full skill already installed?** Check whether the skill at this location still has a `das:` block: - Global: `grep -q "^das:" ~/.agents/skills/css-animation-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"` - Project: `grep -q "^das:" .agents/skills/css-animation-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"` - No `das:` block → full skill installed, invoke it and proceed - `das:` block present → go to step 2 2. **Detect scope, then install:** To detect scope: ```bash [ -e ~/.agents/skills/css-animation-skill ] && echo "global" || echo "project" ``` **Global** (installed with `-g`): ```bash npx skills add neonwatty/css-animation-skill --skill css-animation-skill -g -y ``` **Project** (installed without `-g`): ```bash npx skills add neonwatty/css-animation-skill --skill css-animation-skill -y ``` > **Claude Code:** send either command as a chat message starting with `!` to run it without leaving the conversation. ## Invoke after install - Skill name: `css-animation-skill` - Trigger phrases: "CSS animation", "custom animation", "animation from live app", "css-animation-skill" ## What it does Runs a four-phase animation creation workflow: (1) scrapes your live app using Claude-in-Chrome MCP to extract the existing design language — colours, fonts, spacing, motion style; (2) interviews you about what element to animate, desired feel, and constraints; (3) produces an animation brief and a self-contained HTML/CSS output file with the custom `@keyframes` animation; (4) iterates based on feedback until the result is approved. Produces bespoke keyframe animations matched to your app's visual identity rather than off-the-shelf library classes. ## When NOT to use - Library-based animations where custom keyframes aren't needed (use `animate-css-skill` or `framer-motion-skills`) - Video or Lottie output (use `wiggle-claude-skill`)

Frequently asked questions