# View Transition Desk

> A check of one React or Next.js component file - and its global stylesheet, if given - against the React View
> Transition API rules of the skill from vercel-labs/agent-skills. Paste the file (or drop it); the browser masks
> comments, strings, template literals and regex literals and checks <ViewTransition> placement before any DOM node,
> the triggers (startTransition - never document.startViewTransition or flushSync - and addTransitionType inside the
> transition), names unique per list item, default="none" against share, type maps with a default key and never on a
> Suspense reveal, keyed list items, layouts around {children}, and the CSS every class name needs. It makes the
> mechanical fixes (the canary import, flushSync, a keyed name, share on a silenced named VT, the missing default key,
> default="none" on Suspense content, the key on the list VT), writes the skill's CSS recipes with reduced motion,
> and lists the candidates (Suspense, lists, navigations) when the file has no transition yet. Metered runs write the
> review and the whole file with the CSS to add. Built on the SkillSafe skill @vercel-labs/react-view-transitions,
> from vercel-labs/agent-skills (MIT).

An independent tool: not affiliated with or endorsed by the React project, Meta or Vercel (Next.js).

https://view-transition-desk.skillsafe.ai/

## What is free
- The scan: every finding with an id (V1, V2, ...), an area, a severity (blocker, major, minor), the line, where it sits, what the page saw, the fix, and whether the page already fixed it.
- The skill's rules marked from the scan, the install notes for Next.js or React 19.3+.
- The fixed file, the CSS to add (recipes, timing variables, keyframes, reduced motion), findings as CSV, everything as JSON.

## The metered lanes
Two tasks on gpt-terra, metered per run, routed by `task`. Input string fields: `task` (review or rewrite), `unit`, `code`, `css` (the stylesheet, may be empty), `carry` (rewrite only: the review's decisions) and `facts` (the page's scan).
- `review` replies with `summary`, `patterns` (the skill's five patterns that fit, in priority order, each with where and why), `nav_map`, `findings`, `cleared`, `extra` (up to five issues a scan cannot see, on real lines), `plan` and `caveats`.
- `rewrite` replies with `summary`, `code` (the whole file), `css` (the CSS to add), `changes`, `kept` and `caveats`.
The page holds every reply to its scan: each id accounted for exactly once, the patterns in priority order, every component and the whole file kept, and the rewritten file re-scanned with its CSS - a rule broken again, or a class with no rule, is flagged.

## Links
- API tutorial: https://view-transition-desk.skillsafe.ai/api.html
- Source skill: https://skillsafe.ai/skill/@vercel-labs/react-view-transitions