What is the css-animation-creator skill?
css-animation-creator is a SKILL.md in OneWave AI's skill library. It walks an AI coding agent through seven steps for web motion, from picking a technique to checking reduced motion, and ships ten reference files covering transitions, keyframes, loaders, scroll effects and performance.
Step five of this skill's workflow tells the agent to limit animated properties to transform and opacity so the browser can use the GPU. That one rule shows its priorities: motion that is fast, accessible and easy to keep.
css-animation-creator is a folder in OneWave AI's skill library, with a short SKILL.md and ten reference files beside it. Its stated aim is production-grade, accessible, GPU-efficient motion for web UIs using CSS, Tailwind and Framer Motion.
The seven step 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 JavaScript for orchestration and scroll-linked effects.
- Set timing and easing from the tables in the principles and timing reference.
- Author the animation from the reference files instead of writing from scratch.
- Constrain animated properties to transform and opacity.
- Honor reduced-motion preferences for every animation.
- Verify on low-end devices and confirm there is no layout thrash before shipping.
What the reference files cover
The ten files run from Disney's twelve principles mapped to UI through transitions, keyframes, loading states, micro-interactions, page transitions, scroll animations, accessibility, a drop-in Tailwind config and a performance checklist.
Pairing it with design motion principles helps when you want judgment on what is worth animating at all, and GSAP core fits timelines that outgrow plain CSS.
Who the css-animation-creator skill is for
Best for
- Front-end work that needs hover effects, loading states, page transitions or scroll animations with a consistent method.
- Teams on Tailwind or React who want ready keyframes and a drop-in tailwind.config.js block.
- Anyone who wants reduced-motion handling treated as a required step, not an afterthought. See web accessibility audit for a wider check.
Not for
- Complex timeline work that needs a dedicated animation library; the skill points to Framer Motion or JavaScript for orchestration.
- Native mobile motion. The references target web UIs; animate-expo covers a different stack.
Use it with UiChemy
Composer, UiChemy's AI visual editor, writes real HTML, CSS and JS inside Elementor or Gutenberg, so the CSS this skill produces can be reviewed there. Click Get Started on uichemy.com to try it.
How to install CSS Animation Creator Skill for Motion That Stays Fast
claude skill install OneWave-AI/claude-skills/css-animation-creatorInstall the single skill
In Claude Code, run
claude skill install OneWave-AI/claude-skills/css-animation-creator, which is the README's per-skill form with the skill name filled in.Or clone the whole library
Run
git clone https://github.com/OneWave-AI/claude-skills.git ~/.claude/skills. Each skill is a self-contained SKILL.md with no dependencies and no build step.Using OpenAI Codex CLI
Run
git clone https://github.com/OneWave-AI/claude-skills.git ~/.codex/skills. The README says the same files work unchanged.Keep the folder together
If you copy it by hand, copy the css-animation-creator folder with its references subfolder so the links in SKILL.md resolve.
Check that it loaded
Ask your agent to add a hover effect to a button, then check that it names a purpose, limits the animation to transform and opacity, and adds a prefers-reduced-motion rule.
Key features
- Purpose firstStep one asks whether the motion is feedback, delight, guidance or storytelling, before any CSS is written.
- Technique choiceTransitions for state changes, keyframes for looping or multi-step motion, Framer Motion or JS for orchestration and scroll-linked effects.
- Timing and easing tablesThe principles and timing reference maps Disney's twelve principles to UI and gives duration and easing tables.
- Keyframe libraryReady keyframes for fade, scale, bounce, rotate, slide and attention-seeker effects.
- Loading animationsSpinners, dots, skeleton loaders, shimmer and progress bars in one reference.
- Micro-interactionsPatterns for buttons, hover states, icons, forms and success or error feedback.
- Page and scroll motionThe View Transitions API, Framer Motion page and shared-layout transitions, staggered lists, Intersection Observer and native CSS scroll-driven animations.
- Reduced-motion supportA prefers-reduced-motion CSS reference, Tailwind motion-safe and motion-reduce classes, and a React hook.
- Tailwind configA reference with drop-in tailwind.config.js animation and keyframe definitions.
- Performance checklistGuidance on GPU-accelerated properties, will-change and contain, ending in a checklist.
Frequently asked questions
What does the css-animation-creator skill do?
It gives an AI coding agent a seven step workflow for web motion plus ten reference files. The agent picks a purpose and technique, sets timing and easing, writes the animation, limits it to transform and opacity, honors reduced motion and checks performance.
How do I install css-animation-creator?
Use the README's per-skill install command, listed in the install section above. You can also clone the full library into ~/.claude/skills, or into ~/.codex/skills for OpenAI Codex CLI. No dependencies or build step are needed.
Which animation techniques does it cover?
CSS transitions for state changes, keyframes for looping or multi-step motion, and Framer Motion or JavaScript for orchestration and scroll-linked effects. The references also include the View Transitions API, Intersection Observer and native CSS scroll-driven animations.
Does the skill handle reduced motion?
Yes. Step six requires honoring reduced-motion preferences for every animation. The accessibility reference has prefers-reduced-motion CSS, Tailwind motion-safe and motion-reduce classes, and a React hook, so the check is part of the workflow.
Does css-animation-creator work with Tailwind?
It does. The skill's stated scope includes Tailwind, and the references include Tailwind transitions, motion-safe and motion-reduce usage, and a tailwind-config file with drop-in animation and keyframe definitions for tailwind.config.js.
Does it only work in Claude Code?
The README targets Claude Code and says the skills follow the Agent Skills open standard. It names OpenAI Codex CLI, Gemini CLI and Cursor as tools where the same files work unchanged. Treat support in other tools as the README's claim, and test it.
Why limit animation to transform and opacity?
The performance reference explains GPU-accelerated properties. Step five of the workflow constrains animated properties to transform and opacity, and step seven asks you to confirm there is no layout thrash on low-end devices before shipping.
What license is css-animation-creator under?
The OneWave-AI/claude-skills repository is MIT licensed, and the skill sits inside it. Read the license file in the repository before you copy the skill into any product that you distribute to others.