Skill · em Construir interface

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…

Procedência

Antes de instalar

9 arquivos · 118,8 KB · só texto, nenhum script

Instalar na sua CLI

O comando baixa a versão fixada (commit 063bee9) direto da origem, para a pasta que a CLI lê. Precisa de curl (macOS e Linux); no Windows não há comando, porque o Rook Labs é para macOS.

Claude Code

Neste projeto: instala em .claude/skills/vercel-react-view-transitions/.

d=".claude/skills/vercel-react-view-transitions"
u="https://raw.githubusercontent.com/vercel-labs/agent-skills/063bee94c3f4df8453406c830b0a7df0f2860278/skills/react-view-transitions"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/AGENTS.md" "$u/AGENTS.md" \
  -o "$d/metadata.json" "$u/metadata.json" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/references/css-recipes.md" "$u/references/css-recipes.md" \
  -o "$d/references/implementation.md" "$u/references/implementation.md" \
  -o "$d/references/nextjs.md" "$u/references/nextjs.md" \
  -o "$d/references/patterns.md" "$u/references/patterns.md" \
  -o "$d/references/troubleshooting.md" "$u/references/troubleshooting.md"

Global: instala em ~/.claude/skills/vercel-react-view-transitions/.

d="$HOME/.claude/skills/vercel-react-view-transitions"
u="https://raw.githubusercontent.com/vercel-labs/agent-skills/063bee94c3f4df8453406c830b0a7df0f2860278/skills/react-view-transitions"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/AGENTS.md" "$u/AGENTS.md" \
  -o "$d/metadata.json" "$u/metadata.json" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/references/css-recipes.md" "$u/references/css-recipes.md" \
  -o "$d/references/implementation.md" "$u/references/implementation.md" \
  -o "$d/references/nextjs.md" "$u/references/nextjs.md" \
  -o "$d/references/patterns.md" "$u/references/patterns.md" \
  -o "$d/references/troubleshooting.md" "$u/references/troubleshooting.md"

Codex

Neste projeto: instala em .agents/skills/vercel-react-view-transitions/.

d=".agents/skills/vercel-react-view-transitions"
u="https://raw.githubusercontent.com/vercel-labs/agent-skills/063bee94c3f4df8453406c830b0a7df0f2860278/skills/react-view-transitions"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/AGENTS.md" "$u/AGENTS.md" \
  -o "$d/metadata.json" "$u/metadata.json" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/references/css-recipes.md" "$u/references/css-recipes.md" \
  -o "$d/references/implementation.md" "$u/references/implementation.md" \
  -o "$d/references/nextjs.md" "$u/references/nextjs.md" \
  -o "$d/references/patterns.md" "$u/references/patterns.md" \
  -o "$d/references/troubleshooting.md" "$u/references/troubleshooting.md"

Global: instala em ~/.agents/skills/vercel-react-view-transitions/.

d="$HOME/.agents/skills/vercel-react-view-transitions"
u="https://raw.githubusercontent.com/vercel-labs/agent-skills/063bee94c3f4df8453406c830b0a7df0f2860278/skills/react-view-transitions"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/AGENTS.md" "$u/AGENTS.md" \
  -o "$d/metadata.json" "$u/metadata.json" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/references/css-recipes.md" "$u/references/css-recipes.md" \
  -o "$d/references/implementation.md" "$u/references/implementation.md" \
  -o "$d/references/nextjs.md" "$u/references/nextjs.md" \
  -o "$d/references/patterns.md" "$u/references/patterns.md" \
  -o "$d/references/troubleshooting.md" "$u/references/troubleshooting.md"

Antigravity

Neste projeto: instala em .agents/skills/vercel-react-view-transitions/.

d=".agents/skills/vercel-react-view-transitions"
u="https://raw.githubusercontent.com/vercel-labs/agent-skills/063bee94c3f4df8453406c830b0a7df0f2860278/skills/react-view-transitions"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/AGENTS.md" "$u/AGENTS.md" \
  -o "$d/metadata.json" "$u/metadata.json" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/references/css-recipes.md" "$u/references/css-recipes.md" \
  -o "$d/references/implementation.md" "$u/references/implementation.md" \
  -o "$d/references/nextjs.md" "$u/references/nextjs.md" \
  -o "$d/references/patterns.md" "$u/references/patterns.md" \
  -o "$d/references/troubleshooting.md" "$u/references/troubleshooting.md"

Global: instala em ~/.gemini/antigravity-cli/skills/vercel-react-view-transitions/.

d="$HOME/.gemini/antigravity-cli/skills/vercel-react-view-transitions"
u="https://raw.githubusercontent.com/vercel-labs/agent-skills/063bee94c3f4df8453406c830b0a7df0f2860278/skills/react-view-transitions"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/AGENTS.md" "$u/AGENTS.md" \
  -o "$d/metadata.json" "$u/metadata.json" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/references/css-recipes.md" "$u/references/css-recipes.md" \
  -o "$d/references/implementation.md" "$u/references/implementation.md" \
  -o "$d/references/nextjs.md" "$u/references/nextjs.md" \
  -o "$d/references/patterns.md" "$u/references/patterns.md" \
  -o "$d/references/troubleshooting.md" "$u/references/troubleshooting.md"

Peça ao Rook

Já usa o Rook Labs? Cole no chat do Rook: instale a skill https://rooklabs.sh/marketplace/vercel-labs.agent-skills.vercel-react-view-transitions

Prévia do SKILL.md

---
name: vercel-react-view-transitions
description: 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, a…
license: MIT
metadata:
  author: vercel
  version: "1.0.0"
---

# React View Transitions

Animate between UI states using the browser's native `document.startViewTransition`. Declare *what* with `<ViewTransition>`, trigger *when* with `startTransition` / `useDeferredValue` / `Suspense`, control *how* with CSS classes. Unsupported browsers skip animations gracefully.

## When to Animate

Every `<ViewTransition>` should communicate a spatial relationship or continuity. If you can't articulate what it communicates, don't add it.

Implement **all** applicable patterns from this list, in this order:

| Priority | Pattern | What it communicates |
|----------|---------|---------------------|
| 1 | **Shared element** (`name`) | "Same thing — going deeper" |
| 2 | **Suspense reveal** | "Data loaded" |
| 3 | **List identity** (per-item `key`) | "Same items, new arrangement" |
| 4 | **State change** (`enter`/`exit`) | "Something appeared/disappeared" |
| 5 | **Route change** (page-level) | "Going to a new place" |

This is an implementation order, not a "pick one" list. Implement every pattern that fits the app. Only skip a pattern if the app has no use case for it.

### Choosing Animation Style

| Context | Animation | Why |
|---------|-----------|-----|
| Hierarchical navigation (list → detail) | Type-keyed `nav-forward` / `nav-back` | Communicates spatial depth |
| Lateral navigation (tab-to-tab) | Bare `<ViewTransition>` (fade) or `default="none"` | No depth to communicate |
| Suspense reveal | `enter`/`exit` string props | Content arriving |
| Revalidation / background refresh | `default="none"` | Silent — no animation needed |

Reserve directional slides for hierarchical navigation (list → detail) and ordered sequences (prev/next photo, carousel, paginated results). For ordered sequences, the direction communicates position: "next" slides from right, "previous" from left. Lateral/unordered navigation (tab-to-tab) should not use directional sl…
…

Ver todo o marketplace