skill CX Codex

animate · delphi-ai — Claude Code skill: what it does, how to install

Q: How do I install animate in Claude Code?

Run `npx skills add delphi-ai/animate-skill --skill animate -a claude-code` in your terminal.

Animation guidelines and ready-made patterns for React and Next.js interfaces. Helps agents write performant transitions and Framer Motion code.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add delphi-ai/animate-skill --skill animate -a claude-code
npx skills add delphi-ai/animate-skill --skill delphi-ai-animate -a claude-code

Open on GitHub

What animate does

The skill supplies your coding assistant with UI motion patterns for React and Next.js. It compiles timing tables and custom easing curves inspired by Emil Kowalski's web animation course.

Guidance restricts transitions mostly to transform and opacity to keep rendering on the GPU. Assistants learn to make closing transitions roughly a quarter faster than opening ones. For advanced layout morphing or measuring DOM nodes, your app must install framer-motion, react-use-measure, and usehooks-ts.

What it helps with

configure durations and cubic-bezier curves for UI state changes
implement modal entrance and exit transitions with AnimatePresence
build sliding tab indicators using layoutId layout morphing
respect user accessibility preferences via prefers-reduced-motion

Example prompts for the agent

Animate our pricing cards on hover with a slight lift and shadow change using CSS variables.
Create a staggered list entrance using Framer Motion variants.
Build an accessible modal component that exits faster than it enters.

How to install animate

1Skills CLI (Vercel)

npx skills add delphi-ai/animate-skill --skill animate -a claude-code

npx skills add delphi-ai/animate-skill --skill delphi-ai-animate -a claude-code

2Manually: put the files in place

~/.claude/skills/delphi-ai-animate/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/delphi-ai-animate/

1Skills CLI (Vercel)

npx skills add delphi-ai/animate-skill --skill delphi-ai-animate -a codex

2Manually: put the files in place

.agents/skills/delphi-ai-animate/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add delphi-ai/animate-skill --skill delphi-ai-animate -a cursor

2Manually: put the files in place

.cursor/skills/delphi-ai-animate/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install delphi-ai/animate-skill delphi-ai-animate

2Manually: put the files in place

.github/skills/delphi-ai-animate/SKILL.md

1Skills CLI (Vercel)

npx skills add delphi-ai/animate-skill --skill delphi-ai-animate -a gemini-cli

2Platform CLI

gemini skills install https://github.com/delphi-ai/animate-skill

Manually: put the files in place

.devin/skills/delphi-ai-animate/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add delphi-ai/animate-skill --skill delphi-ai-animate -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about animate

How do I install animate in Claude Code?

Run npx skills add delphi-ai/animate-skill --skill animate -a claude-code in your terminal.

What motion technologies does this skill cover?

It covers standard CSS transitions and keyframes alongside Framer Motion components.

What packages are required for the animated components?

While basic transitions use pure CSS, advanced interactive components require framer-motion, react-use-measure, and usehooks-ts.

Similar skills

Everything for Frontend and UI →

animate by other authors comes first.

animate emilkowalski Builds UI animations from scratch following Emil Kowalski's motion philosophy. Use it when adding motion, transitions, or component interactions. CX Codex +1 172,700installs animate aladicf Adds movement to an interface: transitions, micro-interactions, gestures, hover states. Useful when the UI feels dead or stutters under frequent use. CX Codex +1 607installs mastering-animate-presence raphael-salaja Checks Motion and Framer Motion code for AnimatePresence mistakes and exit animation problems. Useful when reviewing modals and lists. CX Codex +1 322installs framer-motion-animator patricio0312rev Generates smooth Framer Motion animations and micro-interactions in React. Useful for building page transitions, drag gestures, and scroll effects. CX Codex +1 11,100installs animation-performance emilkowalski A diagnostic skill that tracks down dropped frames in web animations and points to the cheaper property to animate instead. CX Codex +1 36,800installs page-transition-animation iart-ai A skill for animating page transitions in Next.js App Router and fixing Framer Motion AnimatePresence exit animations that never fire on navigation. CX Codex +1 2,300installs motion-dev-animations Motion Dev Standards Generates GPU-accelerated Motion.dev animations for React, Next.js, Svelte, and Astro. Implements spring physics, gesture handling, and scroll reveals with accessibility checks. CX Codex +1 594installs micro-interaction iart-ai A skill for small UI motion: hover and press feedback, toggles, toasts, drawers, list reordering. Useful when an interface needs to feel responsive. CX Codex +1 2,500installs