react-vite-dashboard

bởi google-labs-code

Chuyển đổi thiết kế Stitch thành dashboard React + Vite cho production với TanStack Query, token truy cập từ DESIGN.md, và các pattern sẵn sàng cho Web3 (ethers/viem).

npx skills add https://github.com/google-labs-code/stitch-skills --skill react-vite-dashboard

Tải ZIP GitHub

8.4k

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.

HTML → React mapping

Pattern	Implementation
Layout grid / flex	Tailwind utilities or CSS modules aligned to DESIGN.md spacing tokens
Cards / panels	`<section>` with tokenized border-radius and elevation fallbacks for forced-colors
Tables	Semantic `<table>` or TanStack Table; never div-only grids for tabular data
Buttons	`<button type="button">` with visible focus ring (preserve browser default unless DESIGN.md defines focus tokens)
Forms	`<label htmlFor>` + `<input id>`; associate errors with `aria-describedby`
Loading	Skeleton components; `aria-busy` on containers during fetch
Wallet connect	Isolate in `WalletProvider`; never embed private keys in generated code

DESIGN.md integration

/* src/index.css — example token bridge */
:root {
  --color-primary: /* from DESIGN.md colors.primary */;
  --font-body: /* typography.body-md.fontFamily */;
}

Run the design.md linter locally before shipping UI:

npx @google/design.md lint DESIGN.md

Web3 dashboard conventions

Read-only contract calls via useReadContract (viem/wagmi) or ethers Contract + TanStack Query queryFn.
Format token amounts with formatUnits; show network name and chain ID in settings footer.
Surface transaction errors in plain language; link to block explorer when txHash exists.
Gas-sensitive flows: batch reads, avoid redundant eth_call in render loops.

File structure

src/
├── components/     # Presentational UI from Stitch
├── pages/          # Route-level screens
├── hooks/          # useQuery wrappers, wallet hooks
├── lib/            # ABI helpers, formatters
└── styles/         # Token CSS variables

Quality checklist

WCAG 2.2 AA: contrast from DESIGN.md component pairs passes linter
Keyboard navigable: focus order matches visual order
Responsive: test at 375px and 1280px widths
No secrets in repo: RPC URLs from env (VITE_* prefix only for public endpoints)
TypeScript strict: no any on contract ABIs

Stitch docs note

When following links on stitch.withgoogle.com/docs, use the full https://stitch.withgoogle.com/docs/... URL if relative navigation redirects incorrectly.