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.