vercel-react-view-transitions

To add native-feeling UI transitions in React, use the View Transition API with `<ViewTransition>`, `addTransitionType`, and CSS pseudo-elements. This Skill provides copy-paste CSS recipes and component patterns to animate state changes without external dependencies.

The best way to animate shared element morphs across screens is using named View Transitions with the `name` and `share` attributes. This allows React components like thumbnails to visually morph into detail images during route navigations.

To coordinate Suspense skeleton-to-content reveals, use `startTransition`, `useDeferredValue`, and `Suspense` alongside the View Transition API. This ensures smooth visual handoffs when React swaps loading skeletons for fetched content.

Yes, the View Transition API works with Next.js link-driven navigation by enabling `experimental.viewTransition` and applying `transitionTypes`. This setup allows animated entering and exiting pages during hierarchical route changes.

Handle accessibility for React view transitions by implementing `prefers-reduced-motion` fallbacks in your CSS pseudo-element recipes. This ensures users with motion sensitivities see safe, static state changes instead of animations.

List reorder animations fail when trigger usage is incorrect. You must use per-item keys for list transitions and properly wrap state updates in `startTransition` or `useDeferredValue` to ensure the View Transition API captures the DOM changes.