web-animation-design
Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate specific UI elements, which easing to use, animation best practices, or accessibility considerations for motion. Triggers on: easing, ease-out, ease-in, ease-in-out, cubic-bezier, bounce, spring physics, keyframes, transform, opacity, fade, slide, scale, hover effects, microinteractions, Framer Motion, React Spring, GSAP, CSS transitions, entrance/exit animations, page transitions, stagger, will-change, GPU acceleration, prefers-reduced-motion, modal/dropdown/tooltip/popover/drawer animations, gesture animations, drag interactions, button press feel, feels janky, make it smooth.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/aa-on-ai/web-animation-designWeb Animation Design
⚠️ Creative Pack — NOT auto-apply
This skill is part of the creative pack. Use when the task explicitly involves animation, motion, or interaction feel. Do NOT load this for general UI building — the motion reference in design-review covers baseline motion quality.
Use when: user asks about animations, easing, springs, transitions, interaction feel, or "make it smooth." Skip when: building standard UI where the motion reference in design-review is sufficient.
A comprehensive guide for creating animations that feel right, based on Emil Kowalski's "Animations on the Web" course.
Initial Response
When this skill is first invoked without a specific question, respond only with:
I'm ready to help you with animations based on Emil Kowalski's animations.dev course.
Do not provide any other information until the user asks a question.
Review Format (Required)
When reviewing animations, you MUST use a markdown table. Do NOT use a list with "Before:" and "After:" on separate lines. Always output an actual markdown table like this:
| Before | After |
|---|---|
transform: scale(0) | transform: scale(0.95) |
animation: fadeIn 400ms ease-in | animation: fadeIn 200ms ease-out |
| No reduced motion support | @media (prefers-reduced-motion: reduce) {...} |
Wrong format (never do this):
Before: transform: scale(0)
After: transform: scale(0.95)
────────────────────────────
Before: 400ms duration
After: 200ms
Correct format: A single markdown table with | Before | After | columns, one row per issue.
Decision Tree: What Tool Do I Use?
Does this involve layout changes, shared transitions, or exit animations in React?
├── Yes → Framer Motion (layout animations, AnimatePresence, layoutId)
│ Import from "motion/react" (NOT "framer-motion")
└── No
├── Is it a simple enter/exit or hover? → CSS transitions/keyframes
├── Is it performance-critical (heavy page, many elements)? → CSS (hardware-accelerated)
├── Does it need spring physics or interruptibility? → Framer Motion
├── Does it need gesture tracking (drag, cursor follow)? → FM motion values
└── Is it a constant-speed loop? → CSS keyframes
Always check prefers-reduced-motion. No exceptions.
Quick Start
Every animation decision starts with these questions:
- Is this element entering or exiting? → Use
ease-out - Is an on-screen element moving? → Use
ease-in-out - Is this a hover/color transition? → Use
ease - Will users see this 100+ times daily? → Don't animate it
The Easing Blueprint
ease-out (Most Common)
Use for user-initiated interactions: dropdowns, modals, tooltips, any element entering or exiting the screen.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-aa-on-ai-web-animation-design": {
"enabled": true,
"auto_update": true
}
}
}Related Skills
ux-baseline-check
Core pack — always active for visual work. Enforces UX quality standards on any screen, flow, form, or dashboard. Ensures nothing ships with missing states. Auto-activates alongside design-review for all frontend work.
Whimsical Design
Skill by aa-on-ai
agent-friendly-design
Design websites and applications that AI agents can consume, navigate, and interact with. Use when building any site, app, or product that agents will use as an end-user — not just crawl or index. Covers semantic structure, accessibility-as-agent-interface, machine-readable data, API-first patterns, and the emerging protocols (llms.txt, MCP, NLWeb, A2UI) that make sites agent-ready. Triggers on: agent-friendly, agent-readable, agent-accessible, AX, agent experience, agentic web, dual-interface, machine-readable, llms.txt, MCP integration, NLWeb, accessibility tree, ARIA for agents, structured data, JSON-LD, Schema.org, API-first design, build for agents, agent-ready.
World Build
Skill by aa-on-ai
design-review
Core pack — always active for visual work. Quality gate for UI, components, pages, layouts, or frontend work. Triggers on any visual/design task automatically. Use before presenting work, during builds, and for design QA.