Tavero

Compact Markdown brief of this React app's design system: stack, tokens, the canonical button/icon-button/card components with files and props, dominant radius/spacing/typography, and open problems. Call it BEFORE writing or changing UI, then reuse the components and tokens it names instead of inventing styles.

UI consistency problems of the latest scan, worst first: distinct button and card styles, colors outside the tokens, Tailwind defaults, hardcoded literals, off-scale radius/spacing/typography. Each row has a stable id, severity, rule, title and evidence count; evidence is not included. Filter by rule or severity; paginate with limit/page. Open one with tavero_finding. A human may have triaged findings in the Tavero panel: `decision.status` fix means confirmed work (listed first), findings marked accepted are hidden, `decision.note` is a message to you.

One finding with paged evidence rows: current value, `expected` (the project token or canonical component to use instead, or a note that no close token exists and one should be added), component, file:line, route/viewport and a crop image path. Rows valued "literal … in source" are where the value is written (often CSS); the other rows are where it renders (the component JSX). Fix the code using `expected`, then rescan only the affected routes with tavero_scan (routes + rules) and confirm with tavero_diff.

React components seen in the latest scan with instance counts, pages and source file:line. Search by name or file with `query`; sort by instances (default) or name; `unresolved` lists components without a source file.

One component by id or name: source file:line, prop names, instance count, which pages and viewports render it, and crop image paths.

Absolute paths of PNG crops showing how a component actually renders, optionally for one viewport. Open them with your image/file reader to see the component.

Design tokens found in the app (CSS custom properties and Tailwind theme): name, kind, raw and resolved value, source file:line. Use these names instead of literal colors and sizes.

Findings that are new, resolved or unchanged (with changed stats) between the previous and the latest scan, by stable id. A finding is fixed when it is listed under resolved. After a partial rescan, `note` says how many routes were not rescanned and may still carry the finding.

Crawl the app in a real browser at mobile/tablet/desktop widths (plus one dark-theme pass at desktop width when the project styles a dark theme), map every element to its React component and file:line, and recompute findings. A full scan takes minutes; after a code fix pass only the affected `routes` and the finding's `rules` (seconds) — findings on other routes are carried over. Needs the dev server url (it is started with `npm run dev` if nothing answers and kept running for later scans). Then call tavero_diff.