Stitch to React + Vite Dashboard

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

<section>

<table>

<button type="button">

<label htmlFor>

<input id>

aria-describedby

aria-busy

WalletProvider

DESIGN.md integration

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

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

https://stitch.withgoogle.com/docs/...