Habilidades vercel-react-view-transitions
📦

vercel-react-view-transitions

Seguro

Agregar Transiciones de Vista Nativas a Apps React

Agregar transiciones de página fluidas y animaciones de elementos compartidos a apps React requiere entender la API de Transiciones de Vista y sus patrones de integración. Esta habilidad proporciona guía paso a paso, recetas CSS y patrones de Next.js de Vercel Labs.

Soporta: Claude Codex Code(CC)
🥈 79 Plata
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "vercel-react-view-transitions". Agregar transiciones a mi lista de productos

Resultado esperado:

Envuelve tus productos en <ViewTransition> con claves únicas, agrega CSS para los pseudo-elementos ::view-transition-old/new, y usa startTransition para activar animaciones cuando el estado cambia.

Usando "vercel-react-view-transitions". ¿Por qué el botón atrás del navegador no está animando?

Resultado esperado:

Los botones atrás/adelante del navegador usan eventos popstate síncronos, los cuales son incompatibles con startViewTransition. Usa router.push() con URLs explícitas en su lugar para mantener el soporte de animación.

Usando "vercel-react-view-transitions". ¿Cómo animo el reordenamiento de listas?

Resultado esperado:

Asigna valores únicos de view-transition-name a cada elemento usando su ID. Cuando los elementos se reordenan, el navegador captura automáticamente el cambio de posición y lo anima suavemente.

Auditoría de seguridad

Seguro
v1 • 4/19/2026

All static findings are false positives. The skill is legitimate documentation from Vercel Labs for implementing React View Transitions. No malicious code patterns exist. All 781 flagged instances are benign keyword matches in markdown documentation (backticks for code formatting, words like 'keystroke' in UI context, TypeScript type names, and standard documentation URLs).

8
Archivos escaneados
2,199
Líneas analizadas
0
hallazgos
1
Auditorías totales
No se encontraron problemas de seguridad
Auditado por: claude

Puntuación de calidad

59
Arquitectura
100
Mantenibilidad
87
Contenido
50
Comunidad
100
Seguridad
91
Cumplimiento de la especificación

Lo que puedes crear

Agregar Transiciones de Página a Next.js App

Implementar transiciones de deslizamiento fluidas cuando los usuarios navegan entre rutas en una aplicación Next.js usando App Router y el flag experimental viewTransition.

Crear Animaciones de Elementos Compartidos

Hacer que las imágenes de productos se transformen suavemente desde una tarjeta de cuadrícula a la vista de página de detalle, creando una sensación premium como apps móviles nativas.

Animar Estados de Carga de Datos

Reemplazar destellos abruptos de contenido con revelaciones de Suspense fluidas que animan graciosamente la aparición del contenido después de las búsquedas de datos.

Prueba estos prompts

Agregar transiciones de página 
Agregar transiciones de vista a mi app Next.js para que las páginas se deslizen al navegar
Implementar elemento compartido 
Tengo una cuadrícula de productos. Al hacer clic en un producto, la imagen debe animarse desde la cuadrícula hasta el héroe de la página de detalle
Corregir conflictos de animación 
Mis transiciones de vista se rompen cuando Suspense se resuelve. ¿Cómo.preventir que las animaciones anidadas interfieran con las transiciones de página?
Navegación direccional 
Implementar animaciones de navegación adelante y atrás que se deslicen en direcciones opuestas para que los usuarios sientan profundidad espacial en mi app

Mejores prácticas

  • Comienza con el paso de auditoría - identifica todos los lugares que necesitan transiciones antes de escribir código
  • Copia las recetas CSS de la habilidad en lugar de escribir animaciones personalizadas desde cero
  • Siempre prueba con preferencias de movimiento reducido y degradación elegante para navegadores antiguos

Evitar

  • No llames a document.startViewTransition() directamente - deja que el componente ViewTransition lo maneje
  • Evita deslizamientos direccionales para navegación lateral (pestañas) - esto falsamente implica profundidad espacial
  • No envuelvas ViewTransition dentro de un div - el componente debe ser el contenedor externo para habilitar entrada/salida

Preguntas frecuentes

¿Qué versión de React necesito?
Se requiere React canary. Next.js App Router lo incluye automáticamente. Para otros frameworks, instala react@canary y react-dom@canary.
¿Esto funciona con App Router?
Sí. Habilita experimental.viewTransition en next.config.js, usa la prop transitionTypes en next/link, y sigue los patrones en references/nextjs.md.
¿Por qué mis animaciones no están funcionando?
Verifica que ViewTransition envuelva el componente como el elemento externo, usa startTransition/useDeferredValue/Suspense como disparadores, y establece default="none" a menos que quieras cross-fade en cada cambio.
¿Cómo manejo el soporte del navegador?
Los navegadores no compatibles omiten las animaciones elegantemente. Siempre agrega el CSS de media query de movimiento reducido del archivo de referencia css-recipes.
¿Puedo animar el botón atrás del navegador?
No. Los botones atrás/adelante del navegador usan popstate síncrono que es incompatible con startViewTransition. Usa router.push() con URLs explícitas en su lugar.
¿Cómo.preventir animaciones durante actualizaciones en segundo plano?
Establece default="none" en los componentes ViewTransition. Esto deshabilita las animaciones a menos que se habiliten explícitamente con las props enter/exit/share.

Detalles del desarrollador

Licencia

MIT

Repositorio

https://github.com/vercel-labs/agent-skills/tree/main/skills/react-view-transitions/

Ref.

main

Estructura de archivos

📁 references/

📄 css-recipes.md

📄 implementation.md

📄 nextjs.md

📄 patterns.md

📄 AGENTS.md

📄 metadata.json

📄 README.md

📄 SKILL.md