react-vite-dashboard

原文涵盖的主题

• Stitch to React + Vite Dashboard
• Prerequisites
• Workflow
• HTML → React mapping
• DESIGN.md integration
• Web3 dashboard conventions
• File structure
• Quality checklist

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. 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) 1. Discover MCP prefix — run listtools, note the Stitch prefix (e.g. stitch:). 2. Fetch screen — [prefix]:getscreen 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. | Pattern | Implementation | |---------|----------------| | Layout grid / flex | Tailwind utilities or CSS modules aligned to DESIGN.md spacing tokens | | Cards / panels | with tokenized border-radius and elevation fallbacks for forced-colors | | Tables | Semantic or TanStack Table; never div-only grids for tabular data | | Buttons | with vi

这里只展示节选，请以完整原文和当前要求为准。