Stitch Build

Skill 3 of 16

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).

1 minute · 313 words · 9 sections

Install

$ npx skills add google-labs-code/stitch-skills --skill react-vite-dashboard

$ npx skills add google-labs-code/stitch-skills

» /plugin marketplace add google-labs-code/stitch-skills

The first command installs just this skill, by the name in its SKILL.md; the second installs the whole repository.

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 (opens in a new tab))
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

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

Stitch docs note

When following links on stitch.withgoogle.com/docs (opens in a new tab), use the full https://stitch.withgoogle.com/docs/... URL if relative navigation redirects incorrectly.

About this skill

Allowed tools: stitch*:*ReadWriteBashweb_fetch
Source: plugins/stitch-build/skills/react-vite-dashboard/SKILL.md

Colophon for this issue

Colophon

How this issue was made

Source

github.com/google-labs-code/stitch-skills, branch main, last pushed 17 August 2026.

Licence

Apache-2.0 — the text of every skill is reproduced unmodified, frontmatter included, under the upstream licence.

Discovery

16 skills found by walking the repository tree for SKILL.md, not by matching a directory convention. 3 distinct layouts observed: plugins/stitch-build/skills/*/SKILL.md, plugins/stitch-design/skills/*/SKILL.md, plugins/stitch-utilities/skills/*/SKILL.md.

Issue colours

Resolved from a deterministic hash of the owner name. Two accent tones are generated per issue and each is proven against its own ground before it ships: a single accent that passes AA on both light and dark paper is arithmetically impossible.

Heading repairs

1 repair applied to this skill so the document has one h1 and no skipped levels:

Shifted “9 headings” from h1 to h2 so the skill title is the only h1.

Spec compliance

16 editorial notes across 8 of 16 skills. They are printed in the margin of each skill rather than as errors here.

Images

Images inside a skill come from the upstream repository. Where the author gave no alternative text we mark the image decorative rather than inventing a description — a plausible caption we made up is worse than none for the reader who depends on it.

Marketplace

A plugin manifest is published at .agents/plugins/marketplace.json, declaring 3 plugins. It is read for editorial metadata only — never as the skill index, which is always the repository tree.

Signal

Install counts come from skills.sh. They measure downloads, not quality, and an unranked repository is not an unread one.

Agent surfaces

The whole issue is available as one markdown document at /google-labs-code/stitch-skills.md, and each skill at its own .md URL.

Publication

Set by Skills Docs from the source repository. Body text is Literata at the reader’s chosen size and measure; code is Geist Mono. Nothing on this page was written by us except this paragraph.

Stitch to React + Vite Dashboard

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)

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.

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

/* 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

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.

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

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

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

React Vite Dashboard

Stitch to React + Vite Dashboard

Prerequisites

Workflow

HTML → React mapping

DESIGN.md integration

Web3 dashboard conventions

File structure

Quality checklist

Stitch docs note

About this skill

Colophon

React Vite Dashboard

Stitch to React + Vite Dashboard

Prerequisites

Workflow

HTML → React mapping

DESIGN.md integration

Web3 dashboard conventions

File structure

Quality checklist

Stitch docs note

Appendix 3.1

Also bundledMarkdown · 1 file

About this skill

Colophon

Appendix 3.1

Also bundledMarkdown · 1 file