skills.rest
mauriciodelrio
mauriciodelrioCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

animations-and-transitions

Implement performant UI animations in React/Next.js with Framer Motion and CSS transitions.

3|Updated Apr 12, 2026
Search Tags:#react#next.js#animations#framer-motion#css-transitions#skeleton-loading#view-transitions-api
One-click install
npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill animations-and-transitions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animations-and-transitions
Source: https://github.com/mauriciodelrio/delriodev-skills/tree/main/es-skills/software/frontend/animations-and-transitions
Command: npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill animations-and-transitions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Soluciona la complejidad de implementar animaciones y transiciones en aplicaciones React/Next.js, asegurando rendimiento, accesibilidad y consistencia visual.

Core Features & Use Cases

  • Guía paso a paso para decidir entre Framer Motion y CSS transitions
  • Soporta View Transitions API para transiciones entre rutas
  • Incluye patrones de skeleton loading y micro-interacciones
  • Considera prefers-reduced-motion para usuarios con limitaciones de movimiento
  • Enfoque de rendimiento: usa transform y opacity, evita reflows

Quick Start

Sigue el flujo de trabajo del agente para implementar animaciones eficientes en tu proyecto React/Next.

Frequently Asked Questions about animations-and-transitions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What's the best way to implement performant React and Next.js animations?▼

To implement performant React animations, use transform and opacity properties to avoid reflows. This Skill automates that process by guiding you through Framer Motion, CSS transitions, and skeleton loading patterns optimized for performance.

How do I decide between using Framer Motion and CSS transitions for UI animations?▼

To decide between Framer Motion and CSS transitions, follow the step-by-step evaluation flow provided by the Skill. It helps you choose the right approach for your interactive components and page navigations in React and Next.js.

Does the View Transitions API work for page navigations in Next.js?▼

Yes, the View Transitions API works for Next.js page navigations. This Skill supports implementing the API to create smooth route transitions while maintaining accessibility and performance standards.

How do I add skeleton loading and micro-interactions to a React app?▼

To add skeleton loading and micro-interactions to a React app, apply the patterns included in this Skill. It automates the implementation of these UI elements to ensure visual consistency during data fetching and user interaction.

How do I handle prefers-reduced-motion when building React animations?▼

To handle prefers-reduced-motion in React animations, apply the accessibility patterns built into this Skill. It ensures your Framer Motion and CSS transitions respect user limitations by adjusting or disabling motion for those who request it.

Related Skills

Explore More Software Engineering Skills→
robotostudiorobotostudio
172

vercel-react-view-transitions

Implement UI state transitions in React apps using the View Transition API with Next.js routing support.

Official
Advanced
Alfie728Alfie728

web-animation-design

Design web animations with timing, easing, and accessibility guidelines.

Community
Advanced
rnavarychrnavarych
14

role-frontend:react-expert

Provide React 19 expertise for Next.js 15 and Remix applications.

Community
Advanced
DanielV-94DanielV-94

animation-designer

Create web UI animations with Framer Motion, CSS keyframes, and GSAP.

Community
Intermediate