vercel-react-view-transitions
Adicionar Transições de Visualização Nativas a Aplicações React
Adicionar transições de página suaves e animações de elementos compartilhados a aplicações React requer compreensão da API View Transitions e seus padrões de integração. Esta skill fornece orientação passo a passo, receitas CSS e padrões Next.js do Vercel Labs.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "vercel-react-view-transitions". Adicionar transições à minha lista de produtos
Resultado esperado:
Envolva seus itens de produto em <ViewTransition> com chaves únicas, adicione CSS para pseudo-elementos ::view-transition-old/new, e use startTransition para acionar animações quando o estado muda.
A utilizar "vercel-react-view-transitions". Por que o botão voltar do navegador não está animando?
Resultado esperado:
Os botões voltar/avançar do navegador usam eventos popstate síncronos, que são incompatíveis com startViewTransition. Use router.push() com URLs explícitos para manter o suporte a animações.
A utilizar "vercel-react-view-transitions". Como animo a reordenação de listas?
Resultado esperado:
Atribua valores view-transition-name únicos a cada item usando seu ID. Quando os itens são reordenados, o navegador captura automaticamente a mudança de posição e a anima suavemente.
Auditoria de Segurança
SeguroAll 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).
Pontuação de qualidade
O Que Você Pode Construir
Adicionar Transições de Página ao Next.js App
Implementar transições de slide suaves quando os usuários navegam entre rotas em uma aplicação Next.js usando o App Router e a flag experimental viewTransition.
Criar Animações de Elementos Compartilhados
Fazer imagens de produtos se transformarem suavemente de um card de grade para uma visualização de página de detalhes, criando uma sensação premium como aplicações móveis nativas.
Animar Estados de Carregamento de Dados
Substituir flashes de conteúdo bruscos por revelações de Suspense suaves que animam graciosamente o conteúdo que aparece após buscas de dados.
Tente Estes Prompts
Adicionar transições de visualização ao meu app Next.js para que as páginas deslizem ao navegar
Tenho uma grade de produtos. Ao clicar em um produto, a imagem deve animar da grade para o herói da página de detalhes
Minhas transições de visualização estão quebrando quando o Suspense é resolvido. Como posso evitar que animações aninhadas interfiram nas transições de página?
Implementar animações de navegação avançar e voltar que deslizam em direções opostas para que os usuários sintam profundidade espacial no meu app
Melhores Práticas
- Comece com a etapa de auditoria - identifique todos os lugares que precisam de transições antes de escrever código
- Copie receitas CSS da skill em vez de escrever animações personalizadas do zero
- Sempre teste com preferências de movimento reduzido e degradação graciosa para navegadores antigos
Evitar
- Não chame document.startViewTransition() diretamente - deixe o componente ViewTransition lidar com isso
- Evite slides direcionais para navegação lateral (abas) - isso falsamente implica profundidade espacial
- Não envolva ViewTransition dentro de uma div - o componente deve ser o wrapper externo para habilitar entrada/saída
Perguntas Frequentes
Qual versão do React eu preciso?
Isso funciona com o App Router?
Por que minhas animações não estão funcionando?
Como lidar com suporte do navegador?
Posso animar o botão voltar do navegador?
Como prevenir animações durante atualizações em segundo plano?
Detalhes do Desenvolvedor
Estrutura de arquivos
📄 SKILL.md