Use React View Transitions by Vercel Labs to plan and implement transitions between React interface states. Connect cards to detail views, preserve identity during list changes, and reveal loaded content with motion that fits the relationship, your framework setup, and users’ reduced-motion preferences.
Start with the relationship between two interface states and describe what should remain recognizable. The request can compare shared elements, stable item identity, and content reveals while retaining navigation and reduced-motion behavior as review requirements.
Describe the source view, destination, shared elements, and reduced-motion expectations.
Copy the request into a new Floatboat conversation and provide the required material.
Download FloatboatPreview and copy the request. It is not sent automatically from this page.
Reference: Vercel React View Transitions https://github.com/vercel-labs/agent-skills/blob/main/skills/react-view-transitions/SKILL.md Read the original documentation and check the current environment and dependencies. Propose any new installation or tool connection before proceeding. My task: Make this gallery's card-to-detail navigation feel continuous, but leave tab switching and background refresh unobtrusive. Expected deliverable: A transition proposal that distinguishes navigation from background updates and accounts for reduced motion.
React View Transitions is an Agent Skill published by Vercel Labs for implementing interface transitions with React’s ViewTransition APIs and CSS. It organizes motion around relationships between states: shared elements, arriving content, persistent list items, and navigation. The guidance helps an agent choose what should remain visually connected, when to trigger a transition, and which styles communicate that change. API availability depends on the React and framework setup, so version checks belong before implementation. Use the Skill with a specific transition rather than an open-ended request to animate everything, and verify navigation, reduced-motion behavior, and the fallback when animation cannot run.
List-to-detail navigation, item reordering, and Suspense reveals communicate different relationships. Compare shared-element identity and refresh behavior before selecting a React transition, including return navigation and the experience when motion is reduced or absent.
Opening a detail view from a list can use a named shared element to preserve the relationship with the selected card. Identify the image or title shared by both routes and design the transition around that origin. Check return navigation as well as entry so the visual connection remains understandable in both directions.
Filtering or sorting a persistent list should communicate rearrangement rather than disappearance and recreation. Check the item IDs and the states before and after the change, then use stable identity for the transition. Existing records should remain recognizable as the same items even when their positions change.
Content arriving after Suspense can benefit from a restrained reveal, but every refresh does not need the same animation. Inspect boundaries, placeholders, and refresh triggers, then distinguish initial arrival from background updates. Include reduced-motion behavior so the transition rules remain appropriate across user preferences.
Navigation and content relationships still need to make sense when a person prefers reduced motion or a transition is unavailable. Compare the animated and non-animated paths, including focus and return navigation, without making motion the only signal that an action succeeded. Record the required behavior first, then treat the visual transition as a supporting part of the interface.
A view transition begins with the relationship between two interface states, not an animation effect. Check React and framework support before implementation, then review navigation, reduced-motion settings, and usable behavior when animation is absent.
Show the starting and ending views. Identify whether the change is a shared element, list reorder, content reveal, or navigation.
Check the React and framework prerequisites with the agent. Apply the appropriate transition trigger, element identity, and CSS.
Check the flow in supported browsers and with reduced motion enabled. Confirm the same action still works without animation.
Read another Skill guide and check its original source before using it.
