Agent Skills

animate

Claude Code skill for Next.js/React animations based on Emil Kowalski's course

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

Install this skill with the CLI and start using the SKILL.md workflow in your workspace.

Last updated 4/24/2026

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