Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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.
.claude/skills/onewave-ai-css-animation-creator/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-09 | ✗→✓ | ▲ Improved | 16% | 0% |
| case-01 | ✗→✓ | ▲ Improved | 30% | 0% |
| case-07 | ✗→✓ | ▲ Improved | -13% | 0% |
| case-14 | ✗→✓ | ▲ Improved | -1% | 0% |
| case-15 | ✗→✓ | ▲ Improved | 36% | 0% |
Build production-grade, accessible, GPU-efficient motion for web UIs using CSS, Tailwind, and Framer Motion.
references/principles-and-timing.md.transform and opacity for GPU acceleration. Apply references/performance.md.references/accessibility.md.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.| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-09 | fail→pass | 8,457 | 7,479 | -12% | 1 | 1 | 0% | 1,585 | 1,845 | +16% | 0 | 0 | — |
case-10 | pass→pass | 13,287 | 12,609 | -5% | 1 | 1 | 0% | 2,111 | 2,816 | +33% | 0 | 0 | — |
case-01 | fail→pass | 14,940 | 22,319 | +49% | 1 | 1 | 0% | 2,904 | 3,774 | +30% | 0 | 0 | — |
case-02 | pass→pass | 23,726 | 36,397 | +53% | 1 | 1 | 0% | 4,566 | 6,656 | +46% | 0 | 0 | — |
case-03 | pass→pass | 12,946 | 16,133 | +25% | 1 | 1 | 0% | 2,326 | 3,616 | +55% | 0 | 0 | — |
case-16 | pass→pass | 15,237 | 18,379 | +21% | 1 | 1 | 0% | 2,574 | 3,429 | +33% | 0 | 0 | — |
case-04 | pass→pass | 19,854 | 24,505 | +23% | 1 | 1 | 0% | 4,019 | 5,638 | +40% | 0 | 0 | — |
case-05 | pass→pass | 11,952 | 14,231 | +19% | 1 | 1 | 0% | 2,060 | 3,064 | +49% | 0 | 0 | — |
case-06 | pass→pass | 12,495 | 11,291 | -10% | 1 | 1 | 0% | 2,420 | 2,638 | +9% | 0 | 0 | — |
case-07 | fail→pass | 11,713 | 7,708 | -34% | 1 | 1 | 0% | 2,303 | 1,993 | -13% | 0 | 0 | — |
case-08 | fail→fail | 11,256 | 13,211 | +17% | 1 | 1 | 0% | 2,090 | 3,162 | +51% | 0 | 0 | — |
case-11 | pass→fail | 9,794 | 10,531 | +8% | 1 | 1 | 0% | 2,008 | 2,637 | +31% | 0 | 0 | — |
case-12 | pass→pass | 13,346 | 10,086 | -24% | 1 | 1 | 0% | 2,378 | 2,313 | -3% | 0 | 0 | — |
case-13 | pass→pass | 6,259 | 7,149 | +14% | 1 | 1 | 0% | 1,059 | 1,821 | +72% | 0 | 0 | — |
case-14 | fail→pass | 25,285 | 19,712 | -22% | 1 | 1 | 0% | 4,227 | 4,184 | -1% | 0 | 0 | — |
case-15 | fail→pass | 15,694 | 16,823 | +7% | 1 | 1 | 0% | 2,733 | 3,707 | +36% | 0 | 0 | — |
case-17 | fail→pass | 13,386 | 15,629 | +17% | 1 | 1 | 0% | 2,585 | 3,706 | +43% | 0 | 0 | — |
case-18 | fail→pass | 16,358 | 18,503 | +13% | 1 | 1 | 0% | 2,983 | 3,971 | +33% | 0 | 0 | — |
case-19 | pass→pass | 14,767 | 13,172 | -11% | 1 | 1 | 0% | 2,675 | 3,236 | +21% | 0 | 0 | — |
case-20 | fail→pass | 11,277 | 13,064 | +16% | 1 | 1 | 0% | 2,321 | 3,275 | +41% | 0 | 0 | — |
case-21 | fail→pass | 13,379 | 15,619 | +17% | 1 | 1 | 0% | 2,263 | 3,619 | +60% | 0 | 0 | — |
case-22 | fail→pass | 12,173 | 13,022 | +7% | 1 | 1 | 0% | 2,258 | 2,924 | +29% | 0 | 0 | — |
case-23 | fail→pass | 9,126 | 13,812 | +51% | 1 | 1 | 0% | 1,677 | 3,211 | +91% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 23 cases were attempted. The headline lift of +43 percentage points is the difference between those two pass rates over the 23 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.