react-vite-dashboard

Use it when:: You've designed a data-dense dashboard in Google Stitch, Google's AI UI design tool, and want it as React code.
It does:: Fetches a screen through the Stitch MCP server, saves its HTML and screenshot, maps DESIGN.md tokens to CSS variables, then splits the screen into components, pages and hooks.
You get:: A React 18, Vite and TypeScript src/ tree with TanStack Query for data and, if you need it, read-only contract calls with viem or ethers.
Checks:: WCAG 2.2 AA contrast with the design.md linter, focus order, 375px and 1280px widths, no secrets in the repo and no any on contract ABIs.
Needs:: The Stitch MCP server, a project DESIGN.md, which the repo's design-md skill writes, and a Vite, React and TypeScript project you've already scaffolded.

Needs the Stitch MCP server, a Vite React TypeScript scaffold and a project DESIGN.md, which the repo's design-md skill writes.

TL;DR

One of Google's Stitch skills, written as a frontend engineer's checklist for data-dense dashboards. The agent finds the Stitch MCP tool prefix, fetches a screen by project and screen ID, and keeps its HTML and screenshot under .stitch/designs/. It bridges DESIGN.md colors, typography and spacing into CSS variables in src/index.css, then rebuilds the screen from a mapping table: semantic tables rather than div grids, buttons with visible focus rings, labelled form fields with errors linked by aria-describedby, and skeletons marked aria-busy while data loads. Data fetching goes through TanStack Query, with presentational components kept pure. For Web3 dashboards it makes read-only contract calls with viem, wagmi or ethers, formats token amounts, shows the network and chain ID, explains transaction errors in plain words with a block explorer link, and never puts private keys in code; RPC URLs come from environment variables. A final checklist covers contrast, keyboard order, responsive widths, secrets and strict TypeScript.

Summarizes the skill at 0337446.

npx skills add https://github.com/google-labs-code/stitch-skills --skill react-vite-dashboard

skills.sh page Source on GitHub All skills from google-labs-code/stitch-skills

Total Downloads: 6,100 on skills.sh, Nov 9, 2026
Repo stars: 8,705 google-labs-code/stitch-skills
First seen: Jul 13, 2026 on skills.sh

Weekly Downloads

303

-20% over the 8 weeks to Nov 9

Weekly values

Week to	Installs
Sep 21	380
Sep 28	351
Oct 5	350
Oct 12	385
Oct 19	337
Oct 26	379
Nov 2	336
Nov 9	303

Category	category:design category:software-engineering Taste for interfaces that don't look generated: direction, motion and accessibility. Everything for building software: planning, coding, debugging, design, frameworks, cloud, agents and skills.
Type	type:workflow A multi-step process the agent follows: interview, debug, run a TDD loop, review.
Effect	effect:local Its own steps create or change files, git state or local tools.
Needs	needs:mcp needs:account Needs an MCP server connected. An account, API key or paid plan with an outside service.
Publisher	by:official A verified publisher on skills.sh, or the company or maintainer behind the product the skill operates.
Topics	design implementation accessibility web3
Stack	stack:stitch stack:react stack:vite stack:typescript stack:tanstack-query

SKILL.md

From google-labs-code/stitch-skills at 0337446. Checked daily, last changed Nov 7, 2026.

Frontmatter

name: react-vite-dashboard
description: Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).
allowed-tools:
  - "stitch*:*"
  - "Read"
  - "Write"
  - "Bash"
  - "web_fetch"

Stitch to React + Vite Dashboard

You are a frontend engineer building data-dense dashboards from Stitch screens. Target stack: React 18, Vite, TypeScript, TanStack Query, React Router, and optional ethers v6 or viem for on-chain reads.

Prerequisites

Stitch MCP configured (setup guide)
A project DESIGN.md (see the design-md skill) for token fidelity
Vite + React + TypeScript scaffold (npm create vite@latest)

Workflow

Discover MCP prefix — run list_tools, note the Stitch prefix (e.g. stitch:).
Fetch screen — [prefix]:get_screen with project and screen IDs.
Download assets — persist HTML/screenshot under .stitch/designs/{screen}.html and .png.
Read DESIGN.md — map colors.*, typography.*, spacing.* to CSS variables in src/index.css.
Generate components — split into src/components/, src/pages/, src/hooks/.
Wire data — use TanStack Query for async fetches; keep presentational components pure.

HTML → React mapping

Pattern	Implementation
Layout grid / flex	Tailwind utilities or CSS modules aligned to DESIGN.md spacing tokens
Cards / panels	`<section>` with tokenized border-radius and elevation fallbacks for forced-colors
Tables	Semantic `<table>` or TanStack Table; never div-only grids for tabular data
Buttons	`<button type="button">` with visible focus ring (preserve browser default unless DESIGN.md defines focus tokens)
Forms	`<label htmlFor>` + `<input id>`; associate errors with `aria-describedby`
Loading	Skeleton components; `aria-busy` on containers during fetch
Wallet connect	Isolate in `WalletProvider`; never embed private keys in generated code

DESIGN.md integration

/* src/index.css — example token bridge */
:root {
  --color-primary: /* from DESIGN.md colors.primary */;
  --font-body: /* typography.body-md.fontFamily */;
}

Run the design.md linter locally before shipping UI:

npx @google/design.md lint DESIGN.md

Web3 dashboard conventions

Read-only contract calls via useReadContract (viem/wagmi) or ethers Contract + TanStack Query queryFn.
Format token amounts with formatUnits; show network name and chain ID in settings footer.
Surface transaction errors in plain language; link to block explorer when txHash exists.
Gas-sensitive flows: batch reads, avoid redundant eth_call in render loops.

File structure

src/
├── components/     # Presentational UI from Stitch
├── pages/          # Route-level screens
├── hooks/          # useQuery wrappers, wallet hooks
├── lib/            # ABI helpers, formatters
└── styles/         # Token CSS variables

Quality checklist

[ ] WCAG 2.2 AA: contrast from DESIGN.md component pairs passes linter
[ ] Keyboard navigable: focus order matches visual order
[ ] Responsive: test at 375px and 1280px widths
[ ] No secrets in repo: RPC URLs from env (VITE_* prefix only for public endpoints)
[ ] TypeScript strict: no any on contract ABIs

Stitch docs note

When following links on stitch.withgoogle.com/docs, use the full https://stitch.withgoogle.com/docs/... URL if relative navigation redirects incorrectly.