For agents
Tavero is built to be called by a coding agent. Outputs are compact and paginated, ids are stable across scans, and every finding says what to rescan after the fix.
Instructions file
Paste this into the instructions file your agent reads: AGENTS.md (Codex, Cursor, VS Code and GitHub Copilot, Gemini CLI, Windsurf and others), CLAUDE.md (Claude Code) or GEMINI.md (Gemini CLI).
## UI consistency (Tavero)
- Before adding or changing UI, call `tavero_context` (CLI: `tavero context`) and reuse the components and tokens it names.
- After UI changes, call `tavero_scan` with the changed `routes`, then `tavero_findings` (CLI: `tavero scan --url <dev url> --routes …`, `tavero findings`).
- Work through findings with `tavero_finding`; its `expected` field is the token or component to use.
- Close a finding with a partial `tavero_scan` (`routes` + `rules`) and `tavero_diff`; it is done when listed as resolved.
- Never write under `.tavero/`; if pages land on a login screen, ask a human to run `tavero login`.
- Full guidance: `node_modules/tavero/SKILL.md`.
Agent Skill
The package includes SKILL.md, an Agent Skill with the full workflow: setup, the loop, how to read findings and what not to do. For Claude Code, copy it to .claude/skills/tavero/SKILL.md.
The loop
tavero_contextbefore writing UI.tavero_findings, thentavero_findingfor one problem.- Edit the code, using the token or component named in
expected. tavero_scanwith only theroutesandrulestouched.tavero_diff. The finding is done when it is listed as resolved.
Findings a person marked as Fix come first. Findings marked as intended are hidden. On variants findings, expected names the canonical a person chose.
Tools
| Tool | Does | Inputs |
|---|---|---|
tavero_context | 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. | budget |
tavero_findings | 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. | rule, severity, decision, includeAccepted, limit, page |
tavero_finding | 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. | id, evidenceLimit, evidencePage |
tavero_components | React components seen in the latest scan with instance counts, pages and source file:line. | query, sort, unresolved, limit, page |
tavero_component | One component by id or name: source file:line, prop names, instance count, which pages and viewports render it, and crop image paths. | idOrName |
tavero_show | Absolute paths of PNG crops showing how a component actually renders, optionally for one viewport. | idOrName, viewport |
tavero_tokens | Design tokens found in the app (CSS custom properties and Tailwind theme): name, kind, raw and resolved value, source file:line. | kind, limit, page |
tavero_diff | Findings that are new, resolved or unchanged (with changed stats) between the previous and the latest scan, by stable id. | from, to |
tavero_scan | Crawl the app in a real browser at mobile/tablet/desktop widths, map every element to its React component and file:line, and recompute findings. | url, routes, rules, viewports |