CSS animations work with HyperFrames to create smooth motion on web pages. You can add keyframes, delays, and fill modes that the system can seek forward and backward. This is great for backgrounds, glows, shimmers, and decorative loops.
The adapter finds animated elements and controls them using browser tools. You provide a data-start value so the animation matches the clip timing. Use finite repeat counts for best results.
Simple one-element motions work well here. For complex scenes, other tools might be easier. But for a single pulse or a dot stagger, CSS animations are fast and clean.
Global
mkdir -p ~/.claude/skills/css-animationsProject
mkdir -p .claude/skills/css-animationsSource Repository
Frontend Designanthropics/skills
Create striking frontend interfaces with bold design and polished code every time
Vercel React Best Practicesvercel-labs/agent-skills
Optimize React and Next.js apps using proven Vercel performance guidelines
Design Taste Frontendleonxlnx/taste-skill
Enforce premium frontend design with metric-based rules and smart component architecture
Vercel Composition Patternsvercel-labs/agent-skills
Clean React components with composition instead of boolean props
Shadcnshadcn/ui
Manage shadcn UI components easily with CLI commands and clear styling rules
Impeccablepbakaus/impeccable
Polish your frontend interfaces with expert design critique and code
Minimalist Uileonxlnx/taste-skill
Build warm minimal web interfaces with editorial typography and flat bento grids
Industrial Brutalist Uileonxlnx/taste-skill
Raw mechanical UIs fusing Swiss print with military terminal aesthetics and high data density