Stitch React Vite Dashboard

This skill is a catalog-normalized import from https://github.com/google-labs-code/stitch-skills at commit 7b53207b94e62911777d53d4238b5f8c88c2b519, source path plugins/stitch-build/skills/react-vite-dashboard. The upstream control file was corrected for this workspace: the verified Stitch MCP surface here is design-system oriented, so screen lookup, screen generation, and screen editing tools must be used only when the current host explicitly exposes them.

When to Use This Skill

• Use when a Stitch design should become a data-dense React and Vite dashboard rather than a general component library.
• The task involves Google Stitch project IDs, .stitch/ artifacts, DESIGN.md files, Stitch exports, or Stitch-specific validation.
• The broader stitch-design router points here as the narrowest workflow.

Workflow

1. Acquire approved Stitch HTML and screenshots from local exports, the Stitch web UI, or current host-listed screen tools; do not assume screen retrieval tools exist.
2. Read DESIGN.md and map real color, typography, spacing, radius, and focus tokens into CSS variables or the selected styling system.
3. Scaffold or confirm React, Vite, TypeScript, React Router, and TanStack Query boundaries before generating dashboard components.
4. Use semantic tables or TanStack Table for tabular data, native buttons and labels, visible focus states, and aria-busy for loading regions.
5. Keep presentational components pure and place asynchronous access in typed query hooks.
6. For optional Web3 reads, isolate providers, format token values safely, show network identity, and never embed private keys or private RPC credentials.
7. Run the local build, type checks, responsive checks at narrow and desktop widths, and an accessibility review.