View Transitions do React

O que ela faz

Trezentas e trinta e três linhas sobre a API nativa que substitui biblioteca de animação em transição de rota, elemento compartilhado, reordenação de lista e navegação direcional no Next.

Ficha técnica

Descrição original

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.

Caminho no repo

skills/react-view-transitions/SKILL.md

SKILL.md

333 linhas

Documentos de apoio

AGENTS.md · README.md (+1.426 linhas)

Seções

When to Animate · Availability · Implementation Workflow · Core Concepts · Styling with View Transition Classes · Transition Types · Shared Element Transitions · Common Patterns · How Multiple VTs Interact · Next.js Integration · Accessibility · Reference Files · Full Compiled Document

Do mesmo pacote

• agent-browserBrowser para agente
• ai-elementsA interface de chat
• ai-sdkO AI SDK
• autoshipRelease automatizado
• before-and-afterAntes e depois no PR
• building-componentsConstruir componente