view-transitions
View Transitions API
Guia para implementar view transitions en SPAs y MPAs, con soporte para React y Next.js.
Modelo Mental
La View Transitions API automatiza el patron FLIP (First, Last, Invert, Play) a nivel del browser. El browser captura screenshots del estado actual, vos actualizas el DOM, el browser captura el nuevo estado y anima entre ambos usando CSS Animations sobre pseudo-elementos generados.
Hay dos variantes que comparten los mismos building blocks:
| Variante | Trigger | Caso de uso |
|---|---|---|
| Same-document (SPA) | document.startViewTransition(callback) |
Cambios de estado en SPAs |
| Cross-document (MPA) | Navegacion + @view-transition CSS at-rule |
Navegacion entre paginas HTML |
Browser Support
- Same-document: Chrome 111+, Edge 111+, Safari 18+, Firefox 133+ — Baseline Newly Available
- Cross-document: Chrome 126+, Edge 126+, Safari 18.2+ — Firefox: en desarrollo
More from testacode/llm-toolkit
claude-md-writer
Escribe y mejora archivos CLAUDE.md siguiendo best practices de Anthropic. Este skill se activa cuando el usuario dice "crear CLAUDE.md", "mejorar CLAUDE.md", "actualizar CLAUDE.md", "revisar CLAUDE.md", "escribir instrucciones del proyecto", "create CLAUDE.md", "improve CLAUDE.md", "review CLAUDE.md", "write project instructions", "optimize docs for Claude", "auditar CLAUDE.md", "audit CLAUDE.md", "limpiar CLAUDE.md", "dead weight", o configura un nuevo repositorio.
53doc-writer
Este skill se usa para crear documentos tecnicos organizados en /docs (specs, planes de implementacion, ADRs, documentacion de referencia). Se activa cuando el usuario dice "crear documento", "escribir spec", "documentar esto", "creame una spec", "escribime documentacion", "hacer documentacion", "write a spec", "create documentation", "write an ADR", o quiere agregar documentacion tecnica al proyecto.
45llms-txt-generator
This skill generates llms.txt documentation optimized for AI/LLM consumption. It should be used when the user says "crear llms.txt", "generate llms.txt", "documentar para AI", "document for AI", "crear documentacion para LLMs", "generate docs for LLMs", "make repo readable for Claude", or wants to create structured machine-readable documentation following the llms.txt standard.
41feature-planner
Planifica features con entrevista estructurada y crea tareas. Este skill se activa cuando el usuario dice "quiero agregar", "planificar feature", "nueva funcionalidad", "implementar esto", "crear plan", "planificar antes de codear", "disenar feature", "como deberia implementar esto", "pensar la arquitectura", o quiere alinear antes de escribir codigo.
28doc-organizer
Este skill se usa cuando el usuario pide "organizar docs", "ordenar documentacion", "mover documentos a carpetas", "categorizar archivos md", "reorganizar documentacion", o cuando hay archivos .md sueltos en docs/ que necesitan ser movidos a subcarpetas tematicas. Organiza y categoriza documentos tecnicos en la estructura correcta del proyecto.
28nextjs-project-starter
Creates Next.js projects with a configurable stack (Mantine, Supabase, Zustand, Zod). This skill should be used when the user says "create a Next.js project", "new web project", "bootstrap fullstack app", "start new app", "crear proyecto Next.js", "nuevo proyecto web", "empezar app fullstack", or wants to scaffold a new personal project from scratch.
25