css-animation-creator — Claude Code skill: CSS animations
A coding-agent skill for writing CSS animations, transitions, micro-interactions and scroll effects. Useful when you need motion in a UI without hand-tuning every duration.
npx skills add OneWave-AI/claude-skills --skill css-animation-creator -a claude-codeWhat css-animation-creator does
The skill walks the agent through a short workflow. First, name the purpose of the motion — feedback, delight, guidance or storytelling. Then pick the technique: CSS transitions for state changes, keyframes for looping or multi-step motion, Framer Motion or JavaScript for orchestration and scroll-linked effects. Timing and easing come from reference tables instead of guesswork.
Ten reference files ship with it in references/: principles and timing, transitions and cubic-bezier presets, a keyframe library, loading animations, micro-interactions, page transitions, scroll animations, accessibility, a Tailwind config, and performance. Animated properties are meant to stay on transform and opacity for GPU acceleration, and every animation should respect prefers-reduced-motion. Ready-made keyframes and patterns are pulled from the references rather than written from scratch.
Before shipping, the skill asks the agent to check the result on low-end devices and confirm there is no layout thrash. That step matters: an animation that looks smooth on a desktop can stutter badly on a cheap phone. Install is a single command, with no API keys or extra dependencies involved.
What it helps with
- write keyframes for a pulsing button
- pick a duration and easing curve for a hover effect
- build a shimmer skeleton loader
- animate sections into view on scroll
- make an existing animation respect prefers-reduced-motion
Example prompts for the agent
- Add a smooth fade-in for the cards as they scroll into view, using css-animation-creator
- Create a hover effect on this button and pick the timing from the skill's reference tables
- Rewrite this animation so it avoids layout thrash and honors prefers-reduced-motion
How to install css-animation-creator
1Skills CLI (Vercel)
npx skills add OneWave-AI/claude-skills --skill css-animation-creator -a claude-code2Manually: put the files in place
~/.claude/skills/css-animation-creator/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/css-animation-creator/
1Skills CLI (Vercel)
npx skills add OneWave-AI/claude-skills --skill css-animation-creator -a codex2Manually: put the files in place
.agents/skills/css-animation-creator/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add OneWave-AI/claude-skills --skill css-animation-creator -a cursor2Manually: put the files in place
.cursor/skills/css-animation-creator/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install OneWave-AI/claude-skills css-animation-creator2Manually: put the files in place
.github/skills/css-animation-creator/SKILL.md1Skills CLI (Vercel)
npx skills add OneWave-AI/claude-skills --skill css-animation-creator -a gemini-cli2Platform CLI
gemini skills install https://github.com/OneWave-AI/claude-skills --path css-animation-creatorManually: put the files in place
.devin/skills/css-animation-creator/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add OneWave-AI/claude-skills --skill css-animation-creator -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about css-animation-creator
How do I install css-animation-creator in Claude?
Run npx skills add OneWave-AI/claude-skills --skill css-animation-creator -a claude-code. The skill file then lands at ~/.claude/skills/css-animation-creator/SKILL.md.
What does css-animation-creator do?
It guides the agent through building CSS animations, transitions, micro-interactions and scroll effects. The agent picks a technique, pulls timing from the references, and checks accessibility and performance.
Which technologies does the skill cover?
CSS, Tailwind and Framer Motion. For orchestration and scroll-linked effects it reaches for Framer Motion or plain JavaScript.
Source text
SKILL.md · MIT
--- name: css-animation-creator description: Create professional CSS animations, transitions, micro-interactions, and complex motion design. Use when adding animations, hover effects, loading states, page transitions, scroll animations, or any motion design work. --- # CSS Animation Creator Build production-grade, accessible, GPU-efficient motion for web UIs using CSS, Tailwind, and Framer Motion. ## Workflow 1. Identify the purpose of the motion: feedback, delight, guidance, or storytelling. 2. 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. 3. Set timing and easing to match the interaction. Apply the timing and easing tables in `references/principles-and-timing.md`. 4. Author the animation. Pull ready-made keyframes and patterns from the reference files below rather than writing from scratch. 5. Constrain animated properties to `transform` and `opacity` for GPU acceleration. Apply `references/performance.md`. 6. Honor reduced-motion preferences for every animation. Apply `references/accessibility.md`. 7. Verify on low-end devices and confirm no layout thrash before shipping. ## Contents - `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.
© OneWave-AI · MIT · OneWave-AI/claude-skills
