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