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

Dependencies

For Framer Motion examples:

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