Animation patterns and best practices for Next.js/React applications. Use this skill when implementing animations, transitions, hover effects, page transitions, modals, or any motion in React components. Based on Emil Kowalski's "Animations on the Web" course.
Quickly install animate AI skill to your development environment via command line
Source: delphi-ai/animate-skill.
This skill provides comprehensive guidance for implementing smooth, performant, and accessible animations in Next.js and React applications. It covers CSS animations, Framer Motion, easing principles, and accessibility considerations.
| Element entering | ease-out | 200-300ms | | Element moving on screen | ease-in-out | 200-300ms | | Element exiting | ease-in | 150-200ms | | Hover effects | ease | 150ms | | Opacity only | linear | varies |
Complete working examples from the course are in the examples/ directory:
Animation patterns and best practices for Next.js/React applications. Use this skill when implementing animations, transitions, hover effects, page transitions, modals, or any motion in React components. Based on Emil Kowalski's "Animations on the Web" course. Source: delphi-ai/animate-skill.
Stable fields and commands for AI/search citations.
npx skills add https://github.com/delphi-ai/animate-skill --skill animateAnimation patterns and best practices for Next.js/React applications. Use this skill when implementing animations, transitions, hover effects, page transitions, modals, or any motion in React components. Based on Emil Kowalski's "Animations on the Web" course. Source: delphi-ai/animate-skill.
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/delphi-ai/animate-skill --skill animate Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
https://github.com/delphi-ai/animate-skill