Animate Skill

Animate Skill for Claude Code

Animation patterns and best practices for Next.js/React applications. Based on Emil Kowalski's "Animations on the Web" course.

Installation

npx skills add https://github.com/delphi-ai/animate-skill --skill animate

What's Included

• SKILL.md - Quick reference for easing, timing, and common patterns
• examples/ - 8 complete working examples (hover effects, toasts, modals, etc.)
• references/ - Detailed docs on CSS animations, Framer Motion, performance, accessibility

Usage

Once installed, the skill triggers automatically when you ask Claude Code to implement animations, transitions, hover effects, modals, or any motion in React components.

You can also invoke it directly with `/animate`.

Examples Included

Example	Description
card-hover.tsx	Slide-up description on hover
toast-stacking.tsx	Animated toast notifications
text-reveal.tsx	Staggered letter animation
shared-layout.tsx	Framer Motion layoutId morph
animate-height.tsx	Smooth height changes
multi-step-flow.tsx	Directional step wizard
feedback-popover.tsx	Button-to-popover expansion
app-store-card.tsx	iOS-style card expansion

Dependencies

For Framer Motion examples:

pnpm add framer-motion react-use-measure usehooks-ts