Agent Skills

animate

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

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

CLI를 사용하여 이 스킬을 설치하고 작업 공간에서 SKILL.md 워크플로 사용을 시작하세요.

최근 업데이트: 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