Back to catalog / Developer tools
React View Transitions: make each animation express spatial continuity
Choose applicable shared-element, Suspense, list, enter/exit, and route patterns.
Skills
Check React/Next and browser support; follow the source implementation reference starting with an audit. Use type-keyed forward/back for list-to-detail hierarchy; use fade/no direction for lateral tabs. Declare objects with `<ViewTransition>` and trigger through `startTransition`, `useDeferredValue`, or Suspense; do not call `document.startViewTransition` yourself. Ensure the boundary precedes DOM nodes for enter/exit and use transition pseudo-element CSS. Test target browsers and preserve graceful fallback.
Permissions
Prerequisites
- Implement route, shared-element, list-reorder, or enter/exit transitions in React or Next.js.
Permissions
- May change component boundaries, transition triggers, and CSS pseudo-element animations.
Limitations
ViewTransition is version/framework-sensitive; respect browser support and do not call startViewTransition manually.
Pinned upstream source
- Repository
- vercel-labs/agent-skills
- File path
- skills/react-view-transitions/SKILL.md
- Pinned commit
063bee94c3f4df8453406c830b0a7df0f2860278- Source checked
- 2026-10-14 · Reviewed against the pinned upstream source
Repository metrics
These values describe the upstream repository, not popularity or likes for an individual skill or playbook.
- Stars
- Not collected
- Forks
- Not collected
- Observed at
- Not collected
No metrics snapshot is available yet.
License: MIT
Compatible tools
React ViewTransition API · CSS view-transition pseudo-elements · browser support matrix · existing route tests
Main topic
Take a coding Agent change from context to verification