{
  "markdown": "# Animate Skill for Claude Code\n\nAnimation patterns and best practices for Next.js/React applications. Based on Emil Kowalski's \"Animations on the Web\" course.\n\n## Installation\n\n```bash\nnpx skills add https://github.com/delphi-ai/animate-skill --skill animate\n```\n\n## What's Included\n\n- **SKILL.md** - Quick reference for easing, timing, and common patterns\n- **examples/** - 8 complete working examples (hover effects, toasts, modals, etc.)\n- **references/** - Detailed docs on CSS animations, Framer Motion, performance, accessibility\n\n## Usage\n\nOnce installed, the skill triggers automatically when you ask Claude Code to implement animations, transitions, hover effects, modals, or any motion in React components.\n\nYou can also invoke it directly with `/animate`.\n\n## Examples Included\n\n| Example | Description |\n|---------|-------------|\n| `card-hover.tsx` | Slide-up description on hover |\n| `toast-stacking.tsx` | Animated toast notifications |\n| `text-reveal.tsx` | Staggered letter animation |\n| `shared-layout.tsx` | Framer Motion layoutId morph |\n| `animate-height.tsx` | Smooth height changes |\n| `multi-step-flow.tsx` | Directional step wizard |\n| `feedback-popover.tsx` | Button-to-popover expansion |\n| `app-store-card.tsx` | iOS-style card expansion |\n\n## Dependencies\n\nFor Framer Motion examples:\n```bash\npnpm add framer-motion react-use-measure usehooks-ts\n```\n",
  "bytes": 1379,
  "sha": "25565b3a12678da1b3c3191febe73bc74e25b4f4c9de550cabed6b5198fbd9d4",
  "repo_slug": "delphi-ai/animate-skill",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_delphi_ai_animate_skill_animate_fb201dd9/readme"
}