What is the stitch-react-vite-dashboard skill?
The stitch-react-vite-dashboard skill, called react-vite-dashboard in the repo, tells an AI coding agent to build data-dense dashboards from Stitch screens. The target stack is React 18, Vite, TypeScript, TanStack Query and React Router, with optional ethers or viem for on-chain reads and tokens taken from DESIGN.md.
The skill sits in the stitch-build plugin of Google's stitch-skills repository, in a folder named react-vite-dashboard. Its SKILL.md casts the agent as a frontend engineer building data-dense dashboards from Stitch screens on a fixed stack.
The stack is React 18, Vite, TypeScript, TanStack Query and React Router, plus optional ethers v6 or viem when a dashboard reads from a blockchain. The skill expects the Stitch MCP server and a project DESIGN.md.
What changes in your agent's output
- The agent saves each screen's HTML and screenshot under .stitch/designs before it writes a component.
- Colors, typography and spacing from DESIGN.md become CSS variables in src/index.css, so the dashboard follows the design tokens.
- Code is split into src/components, src/pages, src/hooks, src/lib and src/styles, with presentational components kept pure.
- Tabular data goes into a semantic table or TanStack Table, never a grid made of divs.
- Wallet connection is isolated in a WalletProvider, and private keys never appear in generated code.
Dashboard conventions it applies
- Forms use a label with htmlFor, an input with an id, and errors tied in with aria-describedby.
- Loading states use skeleton components, and containers get aria-busy while data is fetched.
- Buttons are real button elements with a visible focus ring unless DESIGN.md defines focus tokens.
- On-chain reads use useReadContract or an ethers Contract inside a TanStack Query queryFn, with amounts formatted by formatUnits.
Who it is for
Best for
- Admin panels, analytics views and portfolio pages designed in Stitch that need a typed Vite codebase.
- Teams that keep a DESIGN.md and want the linter run before UI ships.
- Web3 dashboards that only read from contracts. The skill's patterns cover reads, not transactions.
Not for
- Native mobile apps. The same README lists a separate React Native skill for that target.
- General React component systems without a dashboard focus, where stitch-react-components is the closer match.
- Projects without a DESIGN.md. The skill points you to the design-md skill to generate one first.
Use it with UiChemy
A Vite dashboard is an application, not WordPress content. For pages that should live in WordPress, UiChemy imports AI builds and sites, or works from Figma and Composer. Click Get Started on uichemy.com. Related: fixing-accessibility.
How to install Stitch React Vite Dashboard Skill: Build Data-Dense Dashboards from Stitch
npx plugins add google-labs-code/stitch-skills --scope project --target claude-codeRegister the Stitch MCP server
Complete the Stitch MCP setup at https://stitch.withgoogle.com/docs/mcp/setup/ so the agent can reach your projects and screens.
Install the plugins
For Claude Code, run
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code. For Cursor, use--scope workspace --target cursor. The skill is part of the stitch-build plugin.Scaffold the app
The skill expects a Vite, React and TypeScript scaffold, which you can create with
npm create vite@latest, plus a DESIGN.md for the project.Ask for the dashboard
Use the README's example prompt as a pattern, such as building a portfolio dashboard from a Stitch screen using your DESIGN.md.
Check that it loaded
Ask the agent to build one screen. It should find the Stitch MCP prefix, save the screen under .stitch/designs and then write CSS variables into src/index.css from your DESIGN.md.
Key features
- Fixed target stackReact 18, Vite, TypeScript, TanStack Query and React Router are named in SKILL.md, with ethers v6 or viem as optional additions for on-chain reads.
- Six step workflowThe agent discovers the MCP prefix, fetches the screen, downloads assets, reads DESIGN.md, generates components and wires data through TanStack Query.
- DESIGN.md token bridgeThe skill maps colors, typography and spacing tokens from DESIGN.md to CSS variables in src/index.css, such as a primary color and a body font variable.
- Design linter stepThe skill tells the agent to run
npx @google/design.md lint DESIGN.mdbefore shipping UI, so contrast pairs in the design file are checked. - HTML to React mappingCards become sections with tokenized radius, tables become semantic tables, and buttons get type button with a visible focus ring.
- Web3 read patternsRead-only contract calls go through useReadContract or an ethers Contract, token amounts use formatUnits, and the settings footer shows the network name and chain ID.
- Plain language errorsTransaction errors are surfaced in plain language and link to a block explorer when a txHash exists. Gas-sensitive flows batch reads and avoid repeated eth_call in render loops.
- Folder layoutThe skill lays out components, pages, hooks, lib helpers for ABI and formatters, and a styles folder for token variables.
- Quality checklistTargets include WCAG 2.2 AA contrast, keyboard focus order, tests at 375px and 1280px, RPC URLs from env with the VITE prefix, and no any on contract ABIs.
Frequently asked questions
What is the stitch-react-vite-dashboard skill?
It is the react-vite-dashboard skill in the stitch-build plugin of google-labs-code/stitch-skills. It tells an AI coding agent to convert Stitch screens into React and Vite dashboards with TypeScript, TanStack Query, tokens from DESIGN.md and optional read-only blockchain patterns using ethers or viem.
How do I install the react-vite-dashboard skill?
Set up the Stitch MCP server, then run the repository's plugin install, for example npx plugins add google-labs-code/stitch-skills with a project scope and your agent as the target. Codex users add the repo as a plugin marketplace. The skill ships inside the stitch-build plugin.
Does the skill require a DESIGN.md file?
The prerequisites list a project DESIGN.md for token fidelity and point to the design-md skill for creating one. The workflow reads it to map color, typography and spacing tokens into CSS variables, so a project without one loses the main benefit of the skill.
Which AI coding agents work with this skill?
The repository README says its skills are compatible with agents such as Codex, Antigravity, Gemini CLI, Claude Code and Cursor, and with OpenCode through a manual install. The skill also needs the Stitch MCP server to be available in whichever agent you use.
Can the skill build a dashboard that sends blockchain transactions?
The skill's Web3 section covers read-only contract calls through useReadContract or ethers with TanStack Query, formatting token amounts and showing transaction errors in plain language. It does not describe a signing or sending flow, and it forbids private keys in generated code.
What does the design.md linter do here?
The skill tells the agent to run npx @google/design.md lint on DESIGN.md before shipping UI. Its quality checklist says contrast from the design file's component pairs must pass that linter, which ties the WCAG 2.2 AA target to the tokens rather than to the finished pages.
How is it different from stitch-react-components?
Both turn Stitch screens into React code. The dashboard skill fixes a stack of Vite, TanStack Query and React Router and adds table, loading and Web3 conventions, while the README describes stitch-react-components as a general React component system with automated validation.