react-vite-dashboard

This skill converts Google Stitch designs into production React + Vite dashboards, targeting a modern data-dense frontend stack: React 18, Vite, TypeScript, TanStack Query, and React Router, with optional read-only Web3 integration via ethers v6 or viem. It solves the design-to-code handoff problem for dashboards by walking through discovering the Stitch MCP tool prefix, fetching a screen, persisting the HTML and screenshot assets, and mapping design tokens from a project DESIGN.md into CSS variables.

Its guidance emphasizes accessible, semantic implementation: an HTML-to-React mapping table (semantic tables over div grids, labeled form inputs with aria-describedby errors, skeleton loading with aria-busy), a DESIGN.md token bridge, and a quality checklist covering WCAG 2.2 AA contrast, keyboard navigability, responsive breakpoints at 375px and 1280px, and TypeScript strict mode. It recommends running the DESIGN.md linter (npx @google/design.md lint) before shipping UI. For Web3 dashboards it prescribes read-only contract calls (useReadContract or ethers Contract with TanStack Query), formatting token amounts, and surfacing transaction errors in plain language.

Notably the skill embeds security-conscious guidance: it explicitly warns never to embed private keys in generated code, to isolate wallet connection in a WalletProvider, to keep secrets out of the repo, and to only use VITE_-prefixed env vars for public RPC endpoints. Target users are frontend engineers building dashboards from Stitch screens, including Web3 portfolio and analytics interfaces. Typical use cases are generating tokenized dashboard components, wiring data fetches with TanStack Query, and adding read-only on-chain data displays.