back
loading skill details...
Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).
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
Discover MCP prefix — run list_tools, note the Stitch prefix (e.g. stitch:).
Fetch screen — [prefix]:get_screen with project and screen IDs.
Download assets — persist HTML/screenshot under .stitch/designs/{screen}.html and .png.
Read DESIGN.md — map colors.*, typography.*, spacing.* to CSS variables in src/index.css.
Generate components — split into src/components/, src/pages/, src/hooks/.
Wire data — use TanStack Query for async fetches; keep presentational components pure.don't have the plugin yet? install it then click "run inline in claude" again.