B
baccaraaa/tavero
Keep the UI your agent writes consistent
no SECURITY.md
View on GitHub ↗Link checked 2026-11-12 · HTTP 200 · opens the vendor's own site
Official descriptionKeep the UI your agent writes consistent. Scans your running React app for drift in buttons, cards, colors and spacing, and gives your coding agent each fix. CLI, MCP server, local panel.
Install & config
Client config (built from the install command this repo gives)
{
"mcpServers": {
"baccaraaa-tavero": {
"command": "npx",
"args": ["playwright"]
}
}
}Parsed from the README we fetched on 2026-10-26; we have not executed it.
command/args come from the install command the repository states. When it is ambiguous, the project README wins.
VS Code (.vscode/mcp.json - the key is servers)
{
"servers": {
"baccaraaa-tavero": {
"command": "npx",
"args": ["playwright"]
}
}
}Same server, but VS Code keeps it under <code>servers</code>.
Claude Code (command line)
claude mcp add --transport stdio baccaraaa-tavero -- npx playwright
Claude Code does not read a config file; add the server with this command.
Key names differ by client: Clients & CLI
- Star count
- 3 ★ · baccaraaa/tavero · read from the GitHub search API · (checked 2026-11-13 20:00:50)
- Source
- read directly from its GitHub page · type: open-source project
- Harvest history
- first seen 2026-10-23 · last seen 2026-11-14 · seen 26× · listed by 3 sources
- Score
- score 303 · 3 ★ · 3 sources · repo
- Install
npx playwright
FAQ (answers come from our records)
How do I install it?
The repository provides this install command:
npx playwright. It comes from the repository itself; we cannot guarantee it runs as-is in your client.Who is it for?
We filed it under these tags: 开源项目. The tags come from the entry itself, not a taxonomy we imposed.
Who maintains it?
repository
baccaraaa/tavero；first catalogued 2026-10-23；last seen 2026-11-14。There is no official certification or quality rating here — we record sources and dates only.Tavero
以下摘录自该仓库的 README（片段） · 在 GitHub 读完整 README →
Keep the UI your agent writes consistent.
taveroui.com · Docs · Demo
Tavero scans your running React app, finds drift in buttons, cards, colors and spacing, and gives your coding agent each fix with the file, the line and the token to use. It runs on your machine, as a CLI, an MCP server for Claude Code, Cursor, Codex and other agents, and a local panel where you decide what is intended.
A real finding from the Acme demo in this repository (demo/acme): six pages scanned at three widths.
## How it works
1. Scan. Tavero opens your dev server in Chromium at mobile, tablet and desktop widths, with your login if the app needs one. If the project styles a dark theme, it adds one dark pass.
2. Attribute. Every visible element is mapped to the React component and the source line that rendered it, from React's own dev-mode data. Nothing is added to your project.
3. Find. Four rules compare what renders with your tokens and with itself: buttons, cards, colors and scales.
4. Fix. Each finding is a task: what, where (file:line), the current value, and the token or component expected. Your agent fixes it, rescans one route in seconds, and checks that the finding is resolved.
## Quick start
Node 20 or later, a Vite or Next app on React 19 that runs in dev mode.
bash
npm i -D tavero
npx playwright install chromium # once per machine
npx tavero login --url http://localhost:5173/login # once, if the app has a login
npx tavero scan --url http://localhost:5173
npx tavero findings
id sev rule decision title evidence
fc75ac3d6a2 high buttons 7 text button styles 7
f36cb934b5e high scales 13 distinct padding values, 1 declared 12
f94269275c1 medium buttons Two text button styles differ only in radius, paddingY, pa… 2
f057122e1f9 medium buttons 4 place(s) write directly in page or section mark… 4
… 30 more, use --page 2
bash
npx tavero finding fff30adc07c # evidence: file:line, current value, expected token, crops
npx tavero context # a ~1,500-token brief of the design system for an agent
npx tavero report # a self-contained HTML report
Tavero writes only to /.tavero/. Every read command takes --json, and text output is capped at 20 rows so it fits an agent's context.
## Use it from your agent
tavero mcp is an MCP server on stdio with nine tools. Print the config for your client and paste it where it says:
bash
npx tavero mcp --print-config claude # Claude Code: .mcp.json
npx tavero mcp --print-config cursor # .cursor/mcp.json
npx tavero mcp --print-config codex # .codex/config.toml
npx tavero mcp --print-config gemini # .gemini/settings.json
npx tavero mcp --print-config antigravity # .agents/mcpconfig.json
npx tavero mcp --print-config vscode # .vscode/mcp.json (GitHub Copilot)
npx tavero mcp --print-config windsurf # ~/.codeium/windsurf/mcpconfig.json
Then paste docs/AGENTS.snippet.md into AGENTS.md, CLAUDE.md or GEMINI.md, so the agent reads the design context before writing UI. SKILL.md is an Agent Skill with the full workflow.
A recorded run of Claude Code on the Acme demo, with no shell, 29 seconds:
› taverocontext
Action button is Button from src/components/Button.tsx (props: variant)
› taverofindings rule=colors
fff30adc07c Color #4263eb is not a project token
taveroui.com · Docs · Demo
Tavero scans your running React app, finds drift in buttons, cards, colors and spacing, and gives your coding agent each fix with the file, the line and the token to use. It runs on your machine, as a CLI, an MCP server for Claude Code, Cursor, Codex and other agents, and a local panel where you decide what is intended.
A real finding from the Acme demo in this repository (demo/acme): six pages scanned at three widths.
## How it works
1. Scan. Tavero opens your dev server in Chromium at mobile, tablet and desktop widths, with your login if the app needs one. If the project styles a dark theme, it adds one dark pass.
2. Attribute. Every visible element is mapped to the React component and the source line that rendered it, from React's own dev-mode data. Nothing is added to your project.
3. Find. Four rules compare what renders with your tokens and with itself: buttons, cards, colors and scales.
4. Fix. Each finding is a task: what, where (file:line), the current value, and the token or component expected. Your agent fixes it, rescans one route in seconds, and checks that the finding is resolved.
## Quick start
Node 20 or later, a Vite or Next app on React 19 that runs in dev mode.
bash
npm i -D tavero
npx playwright install chromium # once per machine
npx tavero login --url http://localhost:5173/login # once, if the app has a login
npx tavero scan --url http://localhost:5173
npx tavero findings
id sev rule decision title evidence
fc75ac3d6a2 high buttons 7 text button styles 7
f36cb934b5e high scales 13 distinct padding values, 1 declared 12
f94269275c1 medium buttons Two text button styles differ only in radius, paddingY, pa… 2
f057122e1f9 medium buttons 4 place(s) write directly in page or section mark… 4
… 30 more, use --page 2
bash
npx tavero finding fff30adc07c # evidence: file:line, current value, expected token, crops
npx tavero context # a ~1,500-token brief of the design system for an agent
npx tavero report # a self-contained HTML report
Tavero writes only to /.tavero/. Every read command takes --json, and text output is capped at 20 rows so it fits an agent's context.
## Use it from your agent
tavero mcp is an MCP server on stdio with nine tools. Print the config for your client and paste it where it says:
bash
npx tavero mcp --print-config claude # Claude Code: .mcp.json
npx tavero mcp --print-config cursor # .cursor/mcp.json
npx tavero mcp --print-config codex # .codex/config.toml
npx tavero mcp --print-config gemini # .gemini/settings.json
npx tavero mcp --print-config antigravity # .agents/mcpconfig.json
npx tavero mcp --print-config vscode # .vscode/mcp.json (GitHub Copilot)
npx tavero mcp --print-config windsurf # ~/.codeium/windsurf/mcpconfig.json
Then paste docs/AGENTS.snippet.md into AGENTS.md, CLAUDE.md or GEMINI.md, so the agent reads the design context before writing UI. SKILL.md is an Agent Skill with the full workflow.
A recorded run of Claude Code on the Acme demo, with no shell, 29 seconds:
› taverocontext
Action button is Button from src/components/Button.tsx (props: variant)
› taverofindings rule=colors
fff30adc07c Color #4263eb is not a project token
Listed badge (optional)
Copy this line into the README if you want the listing mark. Optional, and it does not affect being listed.
[](https://anclum.com/en/s/baccaraaa-tavero/)
- Source
- github · https://github.com/baccaraaa/tavero
- Browse by field
- Open source
- Traction
- 3 ★
- Listed by
- 3 independent sources
- added
- today
- Security policy
- no
SECURITY.mdat the repository root (which does not mean it is unsafe)
More like this
Filed under
Every tag opens the full list for that filter. Counts are the live catalogue figures.