react-vite-dashboard
Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).
Target: React / Next.js. Automatically collected · unverified.
Excerpt from the author’s documentation
Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.
Read the original English text
Topics in the source
- 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
This is an excerpt. Refer to the complete source and its current requirements.
- Source repository
- google-labs-code/stitch-skills
- Source file
- plugins/stitch-build/skills/react-vite-dashboard/SKILL.md
- Fixed revision
- 0337446dadde6f8c94210444e2aa9d546126480f
Requirements
- Only the author’s Skill metadata is included. Read the full instructions to check dependencies, licensing and conditions of use.
A small first task
先阅读原作者说明，再决定是否在自己的 AI 工具中使用。
Instructions for your AI tool
- Claude Desktop: resource-specific guide not available yet
- Claude Code: resource-specific guide not available yet
- Cursor: resource-specific guide not available yet
- Codex: resource-specific guide not available yet
Author documentation is not live verification by this site. Without evidence, we do not mark a resource as compatible, safe or free.
Sources and evidence
This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.
Author: Google Stitch Skills · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-09T14:01:41.115Z.
Categories are inferred from names, descriptions and paths. They do not establish compatibility.
License and attribution
Apache-2.0. Third-party content and copyright remain with their authors. Refer to the original license and terms.
Original license ↗Synchronization, copying and user-reported success do not mark a resource as runtime-tested.
Limitations and notes
- Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.