react-vite-dashboard

1# Stitch to React + Vite Dashboard
2 
3You 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.
4 
5## Prerequisites
6 
7- Stitch MCP configured ([setup guide](https://stitch.withgoogle.com/docs/mcp/setup/))
8- A project `DESIGN.md` (see the `design-md` skill) for token fidelity
9- Vite + React + TypeScript scaffold (`npm create vite@latest`)
10 
11## Workflow
12 
131. **Discover MCP prefix** — run `list_tools`, note the Stitch prefix (e.g. `stitch:`).
142. **Fetch screen** — `[prefix]:get_screen` with project and screen IDs.
153. **Download assets** — persist HTML/screenshot under `.stitch/designs/{screen}.html` and `.png`.
164. **Read DESIGN.md** — map `colors.*`, `typography.*`, `spacing.*` to CSS variables in `src/index.css`.
175. **Generate components** — split into `src/components/`, `src/pages/`, `src/hooks/`.
186. **Wire data** — use TanStack Query for async fetches; keep presentational components pure.
19 
20## HTML → React mapping
21 
22| Pattern | Implementation |
23|---------|----------------|
24| Layout grid / flex | Tailwind utilities or CSS modules aligned to DESIGN.md spacing tokens |
25| Cards / panels | `<section>` with tokenized border-radius and elevation fallbacks for forced-colors |
26| Tables | Semantic `<table>` or TanStack Table; never div-only grids for tabular data |
27…