react-vite-dashboard

google-labs-code/stitch-skills

Convert Stitch designs into production React + Vite dashboards with TanStack Query and Web3 patterns.

What is react-vite-dashboard?

A skill for frontend engineers building data-dense dashboards from Stitch design screens. It bridges Stitch MCP, DESIGN.md tokens, and a React 18 + Vite + TypeScript stack, with optional Web3 support via ethers or viem for on-chain reads.

Fetch Stitch screens via MCP and persist design assets (HTML, screenshots)
Map design tokens (colors, typography, spacing) from DESIGN.md to CSS variables
Generate React components and pages from Stitch layouts with semantic HTML
Wire async data fetching using TanStack Query with type-safe hooks
Integrate Web3 read-only contract calls and wallet patterns (ethers v6 / viem)
Enforce WCAG 2.2 AA accessibility and keyboard navigation standards

How to install react-vite-dashboard

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

Prerequisites

Stitch MCP configured per setup guide
A project DESIGN.md file (from design-md skill) for token definitions
Vite + React + TypeScript scaffold (created via npm create vite@latest)

Claude Code

Cursor

Windsurf

Cline

How to use react-vite-dashboard

1.Run list_tools to identify your Stitch MCP prefix (e.g., stitch:)
2.Use [prefix]:get_screen to fetch the target screen by project and screen IDs
3.Download and persist screen assets under .stitch/designs/{screen}.html and .png
4.Read DESIGN.md and map tokens to CSS variables in src/index.css
5.Split the design into components (src/components/), pages (src/pages/), and hooks (src/hooks/)
6.Wire data fetching with TanStack Query; keep components pure and presentational
7.For Web3: isolate wallet logic in a WalletProvider; use read-only contract calls via viem/ethers
8.Test accessibility (WCAG 2.2 AA), keyboard navigation, and responsive behavior at 375px and 1280px

Use cases

Good for

Building a DeFi dashboard that reads token balances and swap rates on-chain
Converting a Figma-exported Stitch design into a production analytics dashboard
Creating a multi-page admin panel with form validation and real-time data updates
Prototyping a Web3 wallet interface with transaction history and gas estimation
Migrating a legacy HTML mockup into a maintainable React component library

Who it's for

Frontend engineers building dashboards with Stitch designs
Web3 / DeFi developers needing accessible on-chain UI patterns
Design systems teams integrating Stitch tokens into React applications
Teams using TanStack Query for data fetching and caching

react-vite-dashboard FAQ

Do I need to use Tailwind CSS?

No. The skill supports Tailwind utilities or CSS modules, both aligned to DESIGN.md spacing tokens. Choose based on your project preference.

Can I embed private keys or RPC secrets in the generated code?

No. Use environment variables with the VITE_ prefix for public endpoints only; never commit secrets to the repo.

What if my Stitch design uses a custom component not in the mapping table?

Implement it as a semantic HTML element (e.g., <section>, <article>) and apply tokenized styles from DESIGN.md. Refer to the HTML → React mapping table for guidance on similar patterns.

How do I handle loading states and skeleton screens?

Create skeleton components that match your layout; use aria-busy on containers during TanStack Query fetches to signal loading to assistive tech.

Is this skill suitable for non-Web3 dashboards?

Yes. Web3 patterns (ethers/viem) are optional. The core workflow applies to any data-dense dashboard built from Stitch designs.

Full instructions (SKILL.md)

Source of truth, from google-labs-code/stitch-skills.

name: react-vite-dashboard description: Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem). allowed-tools:

"stitch*:*"
"Read"
"Write"
"Bash"
"web_fetch"

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.