por Juanjo LunaAnimaciones con View Transitions en React
Ayuda a crear transiciones suaves entre estados de interfaz en React usando View Transition API. Te sirve cuando quieres animar cambios de ruta, elementos compartidos o reordenaciones sin librerías externas.
Descripción original (inglés)
vercel-react-view-transitions: Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.
Cómo instalarla
Una skill es una carpeta con un fichero SKILL.md. Para instalarla basta con copiar la carpeta react-view-transitions en el sitio donde tu agente busca sus skills.
- Sin terminal: abre la carpeta en GitHub, descárgala y cópiala en la carpeta de tu agente (tabla de abajo).
- Con terminal (macOS, Linux o Git Bash en Windows): elige tu agente y copia los comandos.
git clone --depth 1 https://github.com/vercel-labs/agent-skills.git /tmp/skill-src
mkdir -p ~/.claude/skills
cp -r "/tmp/skill-src/skills/react-view-transitions" ~/.claude/skills/react-view-transitions
rm -rf /tmp/skill-src| Agente | Para todos tus proyectos | Solo un proyecto |
|---|---|---|
| Claude Code | ~/.claude/skills | .claude/skills |
| GitHub Copilot | ~/.copilot/skills | .github/skills |
| Codex | ~/.agents/skills | .agents/skills |
| Gemini CLI | ~/.gemini/skills | .gemini/skills |
Muchos agentes leen también .agents/skills. Reinicia el agente después de instalar. Antes de instalar una skill, revisa su SKILL.md y los scripts que incluya: se ejecutan con tus permisos.
Más skills de vercel-labs/agent-skills
- Desplegar aplicaciones en Vercel deploy-to-vercel
- Desplegar en Vercel con tokens vercel-cli-with-tokens
- Patrones de composición en React vercel-composition-patterns
- Optimizar costes y rendimiento en Vercel vercel-optimize
- Buenas prácticas de React Native y Expo vercel-react-native-skills
- Revisar guías de escritura writing-guidelines
Explicación redactada con ayuda de IA a partir de la descripción original.