view-transitions
Guía para implementar View Transitions API en SPAs y MPAs, con soporte para React y Next.js.
Triggers
| Frases que activan el skill |
|---|
| “view transitions” / “startViewTransition” |
| “view-transition-name” / “cross-document transitions” |
| “MPA transitions” / “shared element transition” |
| “hero animation entre paginas” / “morph entre rutas” |
| “animar navegacion entre paginas” |
| “transicion entre vistas” / “page transition nativa” |
Qué cubre
SKILL.md principal
- Modelo mental (FLIP automático)
- Same-document (SPA) y Cross-document (MPA)
- Pseudo-elementos del browser
- ViewTransition object y promises
- View Transition Types
- Features nuevas:
match-element,view-transition-class, scoped transitions - Integración con React y Next.js
- Debugging y checklist pre-deploy
references/
- react-nextjs.md: Patrones de integración con React canary, Next.js, next-view-transitions
- animation-patterns.md: Slide direction, product gallery, modal transitions
Relación con otros skills
- web-animations: Cubre WAAPI, CSS Transitions/Animations y scroll-driven.
view-transitionses específico para navegación entre estados/páginas.