For teams adding native animations to a React app
View Transition DeskViewTransition, startTransition, name, share. The rules are checked right here, the CSS is written; the animation plan gets a review.
Paste one React or Next.js component - and your global stylesheet, if you like. Your browser checks it against the View Transition rules: a <ViewTransition> must come before any DOM node, updates animate only inside startTransition (never flushSync or a hand-rolled document.startViewTransition), a name must be unique per item, default="none" silences share unless it is set, and a type map needs a default key and never belongs on a Suspense reveal. The mechanical fixes are made, and the skill's CSS recipes are written for every class your props name - with the reduced-motion block. No transition yet? The page lists what the file offers to animate.
The source file free
The scan free
What the scan found
The skill's View Transition rules
The fixed copy and the CSS free
What the page changed itself - the canary import, flushSync to startTransition, a list name keyed per item, share on a silenced named VT, the missing default key, default="none" on a Suspense content VT, the key moved onto the list VT - and the CSS to add: the skill's recipe for every class your props name, the timing variables and keyframes they use, and reduced motion. Placement, layouts and type maps on Suspense need a decision and are left as they were.
component.tsx
view-transitions.css
The review metered
Pricing as soon as the session is ready...
Sign inThe reply could not be read. Here it is as it came back:
Caveats
Caveats
The page's check of this reply
Saved reviews
How it works - and what it cannot see
The scan reads the JSX itself: comments, strings, template literals and regex literals are masked and every element is matched to its parent, so the page knows a ViewTransition sits inside a div, inside a .map(), inside a Suspense fallback or around {children} in a layout. Every fix is a small edit that never overlaps another, and the CSS comes from the skill's recipes, only for the classes your props name and the stylesheet does not already style.
It cannot see which navigation goes forward or back, which image on the list is the same thing as the hero on the detail page, or how a Suspense boundary resolves - that is the review, which writes the navigation map and picks the patterns in the skill's priority order. The page re-scans the rewritten file, so a rule broken again is flagged rather than trusted.