Is the CSS Animation skill free?

Yes. The skill itself is free from neonwatty/css-animation-skill. SkillProof publishes the install command and an independent test verdict at no cost.

What is the CSS Animation SkillProof Score?

9.2/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 8/10, docs & honesty 5/5.

How do I install CSS Animation?

Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.

Can I use CSS Animation with Cursor, Copilot, Gemini CLI, Codex or other AI tools?

The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.

CSS Animation

Generates self-contained HTML/CSS feature-demo and carousel walkthrough animations.

by neonwatty · neonwatty/css-animation-skill

Tested · Works

Install — copy the command Download source ↗

Test report

Verdict: Tested · Works
Score: 9.2/10
Tested: Jul 16, 2026
Environment: Claude Code 2.x (agent harness)
Upstream re-checked: Aug 10, 2026 · 6ac32dc

Built the same 'mark task complete' animation twice and rendered both live in a browser: the skill's mandatory rules (class-toggling-only JS, hidden-element opacity+visibility pairing, spring easing, a design-language token pass) produced a checkmark/badge/cursor polish layer the baseline (inline-style JS, no tokens, linear fade) plainly lacked — a concrete, screenshotted difference, not just a claim.

Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works

Installs cleanly 5/5
Triggers reliably 5/5
Output vs. baseline 8/10
Docs & honesty 5/5

What CSS Animation does

Researches a live app via Claude-in-Chrome to extract its design language and layout geometry, interviews the user, then generates a structured brief plus a self-contained HTML/CSS animation (feature-demo or multi-scene carousel), iterating through a freeze-inspect-feedback review loop until approved. Triggers on 'css animation', 'animate this feature', 'create a css walkthrough', or a request for a CSS-based visual demo of an app feature.

How to install CSS Animation

git clone https://github.com/neonwatty/css-animation-skill
cd css-animation-skill
mkdir -p ~/.claude/skills/css-animation
cp SKILL.md ~/.claude/skills/css-animation/SKILL.md

Skills live in ~/.claude/skills/ (global) or .claude/skills/ (per-project). Restart Claude Code after installing.

Commands — how to trigger CSS Animation

/css-animation Generates self-contained HTML/CSS feature-demo and carousel walkthrough animations.

It also activates on plain-language prompts like these:

Show me an animated walkthrough of how marking a task complete works
Build a carousel walkthrough demo of our app's onboarding flow
Animate this feature so I can show it off on our landing page

Frequently asked questions

Is the CSS Animation skill free?: Yes. The skill itself is free from neonwatty/css-animation-skill. SkillProof publishes the install command and an independent test verdict at no cost.
Does CSS Animation work with Claude Code?: We tested it with Claude Code 2.x (agent harness) on Jul 16, 2026. Verdict: Tested · Works. Built the same 'mark task complete' animation twice and rendered both live in a browser: the skill's mandatory rules (class-toggling-only JS, hidden-element opacity+visibility pairing, spring easing, a design-language token pass) produced a checkmark/badge/cursor polish layer the baseline (inline-style JS, no tokens, linear fade) plainly lacked — a concrete, screenshotted difference, not just a claim.
What is the CSS Animation SkillProof Score?: 9.2/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 8/10, docs & honesty 5/5.
How do I install CSS Animation?: Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
Can I use CSS Animation with Cursor, Copilot, Gemini CLI, Codex or other AI tools?: The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.