Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

CSS Animation Creator · onewave-ai | DecimalAI

frontendby onewave-ai

CSS Animation Creator

onewave-ai/css-animation-creator

Source onewave-ai/claude-skills ↗License MIT

Create professional CSS animations, transitions, micro-interactions, and complex motion design.

SkillScore91Maintained

Automatic

Frontend / UI pack

Last verified 8/24/2026

What it changes

Passed 21 of 23 test cases with the skill, and 11 of 23 without it.

Without skill48%

With skill91%

Checks it passed that the model alone missed

The button keyframe definitions avoid animating box-shadow.
The accordion styling includes prefers-reduced-motion rules.
The drawer stylesheet includes prefers-reduced-motion rules.

and 11 more in the full report

11 fixed10 passed either way1 still failing1 broke

Pass-rate lift: +43 pp
Tokens: +33%
Agent turns: 0%
Response time: +11%

Model gemini-3.6-flashMeasured 8/24/2026v121 of 23 cases passed with skill

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/onewave-ai-css-animation-creator/SKILL.md https://app.decimal.ai/s/onewave-ai-css-animation-creator/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add onewave-ai-css-animation-creator, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/onewave-ai-css-animation-creator/ and pins it in .decimal/skills.lock

decimalai skills add onewave-ai-css-animation-creator

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/onewave-ai-css-animation-creator/SKILL.md https://app.decimal.ai/s/onewave-ai-css-animation-creator/SKILL.md

Raw file: /s/onewave-ai-css-animation-creator/SKILL.md ↗ · machine-readable summary at /s/onewave-ai-css-animation-creator.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 11 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 11

Prompt

Design a lightweight CSS looping loading spinner for a submit button state. It should rotate continuously 360 degrees.

What was checked, without and with the skill
Checked	Without skill	With skill
The spinner keyframes animate transform rotate.	Passed	Passed
The spinner styling includes prefers-reduced-motion handling.	Missed	Passed

case-09 · gemini-3.6-flash · 8/24/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md26 lines11 files

CSS Animation Creator

Build production-grade, accessible, GPU-efficient motion for web UIs using CSS, Tailwind, and Framer Motion.

Workflow

Identify the purpose of the motion: feedback, delight, guidance, or storytelling.
Choose the technique: CSS transitions for state changes, keyframes for looping or multi-step motion, Framer Motion or JS for orchestration and scroll-linked effects.
Set timing and easing to match the interaction. Apply the timing and easing tables in references/principles-and-timing.md.
Author the animation. Pull ready-made keyframes and patterns from the reference files below rather than writing from scratch.
Constrain animated properties to transform and opacity for GPU acceleration. Apply references/performance.md.
Honor reduced-motion preferences for every animation. Apply references/accessibility.md.
Verify on low-end devices and confirm no layout thrash before shipping.

references/principles-and-timing.md — Disney 12 principles mapped to UI, duration and easing tables.
references/transitions.md — Transition syntax, easing functions, cubic-bezier presets, Tailwind transitions.
references/keyframe-library.md — Keyframe syntax plus fade, scale, bounce, rotate, slide, and attention-seeker keyframes.
references/loading-animations.md — Spinners, dots, skeleton loaders, shimmer, progress bars.
references/micro-interactions.md — Button, hover, icon, form, and success/error interactions.
references/page-transitions.md — View Transitions API, Framer Motion page and shared-layout transitions, staggered lists.
references/scroll-animations.md — Intersection Observer, Framer Motion scroll hooks, native CSS scroll-driven animations.
references/accessibility.md — prefers-reduced-motion CSS, Tailwind motion-safe/reduce, React hook.
references/tailwind-config.md — Drop-in tailwind.config.js animation and keyframe definitions.
references/performance.md — GPU-accelerated properties, will-change, contain, performance checklist.

Track record

Benchmark

21 / 23

test cases passed, vs 11 / 23 without

Adoption

Users: 0
Times used: 0

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

onewave-ai / claude-skills

css-animation-creator/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1Bundled 10 files

More skills from the same source and nearby in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

See it in action

What's inside

CSS Animation Creator

Workflow

Contents

Track record

Benchmark

Adoption

SkillSafety

Source

Related skills