react-vite-dashboardby Google Labs

React Vite Dashboard Skill.

A Claude Code and Codex skill for UI design: converts Stitch designs into React + Vite dashboards with TanStack Query.

Web & UI
UI code

google-labs-code/stitch-skills · plugins/stitch-build/skills/react-vite-dashboard/SKILL.mdSKILL.md

--- 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). --- ## Prerequisites ## Workflow ## HTML → React mapping ## DESIGN.md integration ## Web3 dashboard conventions ## File structure

Front matter and section headings read from the upstream file on 2026-09-14 · 3,656 characters in full

01 What it does

What the react-vite-dashboard Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

A build skill for frontend engineers converting Stitch screens into data-dense dashboards on React 18, Vite, TypeScript, TanStack Query and React Router, with optional ethers v6 or viem for on-chain reads.

Its workflow runs six steps: discover the Stitch MCP prefix, fetch the screen, persist the HTML and screenshot under .stitch/designs/, read DESIGN.md and map colors, typography and spacing to CSS variables in src/index.css, generate components and pages, then wire data through TanStack Query while keeping presentational components pure. A mapping table fixes behaviour for tables, buttons, forms, loading and wallet connect, and the file closes with a WCAG 2.2 AA quality checklist.

What it produces

A production React + Vite dashboard built from the Stitch screen, using TanStack Query for its data layer.
Local copies of the source design kept in the repo as .stitch/designs/{screen}.html and a matching .png screenshot.
A source tree separated by responsibility, with hooks holding useQuery wrappers and wallet hooks, plus lib for ABI helpers and formatters.

See the example prompt ↗

How It Works

01
Discover the MCP Prefix
Run list_tools first and note the Stitch prefix the tools are exposed under, since every later call is built from it.
02
Fetch the Screen
Call the get_screen tool on the discovered prefix, passing both the Stitch project ID and the screen ID.
03
Bridge DESIGN.md Tokens
Read the project DESIGN.md and translate its color, typography and spacing entries into CSS variables inside src/index.css.
04
Split the Generated UI by Role
Generated code lands in src/components, src/pages and src/hooks rather than one flat file.
05
Wire Data Through TanStack Query
Async fetches go through TanStack Query so the presentational components built from the Stitch screen stay pure.

02 Find your fit

When to Use the react-vite-dashboard Skill

Use the react-vite-dashboard skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Turning Stitch screens into data-heavy dashboard interfaces rather than marketing pages, with many components per screen.
Web3 front ends that need on-chain reads through ethers v6 or viem alongside the rest of the dashboard data layer.
Teams whose design system already lives in a DESIGN.md and who need generated UI to stay faithful to those tokens.

Know the Boundaries

It assumes Stitch MCP is already configured; the file only points at the external setup guide if it is not.
On-chain work is scoped to read-only contract calls, so signing or write flows are outside what the skill describes.

What to Provide

NeedsGoogle Stitch — named in the SKILL.md as required.
InputStitch MCP configured (setup guide)
InputA project DESIGN.md (see the design-md skill) for token fidelity
InputVite + React + TypeScript scaffold (npm create vite@latest)

03 Inside the skill

Rules the react-vite-dashboard Skill Gives Claude Code and Codex

7 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Tables Stay Semantic
Tabular data must use a real table element or TanStack Table; div-only grids are explicitly ruled out for it.
Wallet Code Is Isolated and key-free
Wallet connect lives inside a WalletProvider, and generated code must never embed private keys.
Label Every Input and Tie Errors to It
Forms pair label htmlFor with input id, and validation errors are associated with aria-describedby rather than shown loose.
Keep the Default Focus Ring on Buttons
Buttons are type="button" with a visible focus ring, and the browser default is preserved unless DESIGN.md defines focus tokens.
Signal Loading State Programmatically
Fetching screens use skeleton components, with aria-busy set on containers while the request is in flight.
Batch Reads in gas-sensitive Flows
Reads should be batched and redundant eth_call requests must not be issued from render loops.
No Secrets in the Repository
RPC URLs come from environment variables, and the VITE_ prefix is only for public endpoints.

04 Put it to work

Install react-vite-dashboard in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add react-vite-dashboard to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

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

Generic skills CLI form for plugins/stitch-build/skills/react-vite-dashboard/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Turn the Stitch screen [screen ID] in project [project ID] into a React + Vite dashboard page. Pull the numbers through the TanStack Query hooks in src/hooks instead of fetching in the component, and bridge the tokens from DESIGN.md into src/index.css so the colors and spacing match. Add a read-only balance card for [token contract] that shows the network name and chain ID in the settings footer.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Run the design.md linter against DESIGN.md locally before shipping any UI.
Contrast must clear WCAG 2.2 AA for the component pairs defined in DESIGN.md, verified by passing the linter.
Keyboard navigation must work, with focus order matching the visual order of the dashboard.
Test the layout at 375px and 1280px widths.
TypeScript runs in strict mode and contract ABIs must not be typed as any.

In OpenDesign import react-vite-dashboard from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Branch main
Skill file: plugins/stitch-build/skills/react-vite-dashboard/SKILL.md Content checksum recorded at verification; commit 0337446
License: Apache-2.0 From LICENSE.
Repository stars: 8,304 GitHub snapshot taken 2026-09-14 for the whole google-labs-code/stitch-skills repository, which contains 12 skills in this catalog. Not a rating or usage count for react-vite-dashboard.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

PrerequisitesStitch MCP, a DESIGN.md, and a Vite React TypeScript scaffold
WorkflowSix steps from MCP prefix discovery through component generation and data wiring
HTML → React mappingTable converting layout, cards, tables, buttons, forms, loading and wallet connect into markup
DESIGN.md integrationCSS variable bridge from DESIGN.md tokens plus the design.md lint command
Web3 dashboard conventionsRead-only contract calls, formatUnits amounts, plain-language tx errors, batched reads
File structureFive source folders for components, pages, hooks, lib and styles
Quality checklistFive checks covering WCAG 2.2 AA, keyboard order, breakpoints, secrets and strict types
Stitch docs noteUse absolute stitch.withgoogle.com URLs when relative doc links redirect incorrectly

The Skill's Own Description

“Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).”

Front-matter description from SKILL.md. The full file is about 3,656 characters. Read the full file on GitHub.

06 Before you install

Questions About the react-vite-dashboard Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Do I have to use Tailwind for the layout?

No. The mapping table allows either Tailwind utilities or CSS modules, as long as the spacing follows the tokens in DESIGN.md.

Does this skill handle writing to a contract?

The conventions it sets out are about reads and about presenting results: transaction errors should be explained in plain language and linked to a block explorer when a txHash exists. No signing or write flow is described.

Anything unusual about the Stitch documentation links?

When you follow links on stitch.withgoogle.com/docs, use the full https://stitch.withgoogle.com/docs/... URL, because relative navigation can redirect incorrectly.

React Vite Dashboard

Run react-vite-dashboard on a Real UI Design Task.

Download OpenDesign, import react-vite-dashboard from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills