stitch-react-vite-dashboard

name	stitch-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

1. Discover MCP prefix — run list_tools, note the Stitch prefix (e.g. stitch:).
2. Fetch screen — [prefix]:get_screen with project and screen IDs.
3. Download assets — persist HTML/screenshot under .stitch/designs/{screen}.html and .png.
4. Read DESIGN.md — map colors.*, typography.*, spacing.* to CSS variables in src/index.css.
5. Generate components — split into src/components/, src/pages/, src/hooks/.
6. 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.