react-vite-dashboard

Name: react-vite-dashboard
Author: google-labs-code

483installs916forks

How to install react-vite-dashboard?

google-labs-code/stitch-skills/react-vite-dashboard

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

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	# Stitch to React + Vite Dashboard
2
3	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.
4
5	## Prerequisites
6
7	- Stitch MCP configured ([setup guide](https://stitch.withgoogle.com/docs/mcp/setup/))
8	- A project `DESIGN.md` (see the `design-md` skill) for token fidelity
9	- Vite + React + TypeScript scaffold (`npm create vite@latest`)
10
11	## Workflow
12
13	1. Discover MCP prefix — run `list_tools`, note the Stitch prefix (e.g. `stitch:`).
14	2. Fetch screen — `[prefix]:get_screen` with project and screen IDs.
15	3. Download assets — persist HTML/screenshot under `.stitch/designs/{screen}.html` and `.png`.
16	4. Read DESIGN.md — map `colors.`, `typography.`, `spacing.*` to CSS variables in `src/index.css`.
17	5. Generate components — split into `src/components/`, `src/pages/`, `src/hooks/`.
18	6. Wire data — use TanStack Query for async fetches; keep presentational components pure.
19
20	## HTML → React mapping
21
22	\| Pattern \| Implementation \|
23	\|---------\|----------------\|
24	\| Layout grid / flex \| Tailwind utilities or CSS modules aligned to DESIGN.md spacing tokens \|
25	\| Cards / panels \| `<section>` with tokenized border-radius and elevation fallbacks for forced-colors \|
26	\| Tables \| Semantic `<table>` or TanStack Table; never div-only grids for tabular data \|
27	\| Buttons \| `<button type="button">` with visible focus ring (preserve browser default unless DESIGN.md defines focus tokens) \|
28	\| Forms \| `<label htmlFor>` + `<input id>`; associate errors with `aria-describedby` \|
29	\| Loading \| Skeleton components; `aria-busy` on containers during fetch \|
30	\| Wallet connect \| Isolate in `WalletProvider`; never embed private keys in generated code \|
31
32	## DESIGN.md integration
33
34	```css
35	/* src/index.css — example token bridge */
36	:root {
37	--color-primary: /* from DESIGN.md colors.primary */;
38	--font-body: /* typography.body-md.fontFamily */;
39	}
40	```
41
42	Run the design.md linter locally before shipping UI:
43
44	```bash
45	npx @google/design.md lint DESIGN.md
46	```
47
48	## Web3 dashboard conventions
49
50	- Read-only contract calls via `useReadContract` (viem/wagmi) or ethers `Contract` + TanStack Query `queryFn`.
51	- Format token amounts with `formatUnits`; show network name and chain ID in settings footer.
52	- Surface transaction errors in plain language; link to block explorer when `txHash` exists.
53	- Gas-sensitive flows: batch reads, avoid redundant `eth_call` in render loops.
54
55	## File structure
56
57	```
58	src/
59	├── components/ # Presentational UI from Stitch
60	├── pages/ # Route-level screens
61	├── hooks/ # useQuery wrappers, wallet hooks
62	├── lib/ # ABI helpers, formatters
63	└── styles/ # Token CSS variables
64	```
65
66	## Quality checklist
67
68	- [ ] WCAG 2.2 AA: contrast from DESIGN.md component pairs passes linter
69	- [ ] Keyboard navigable: focus order matches visual order
70	- [ ] Responsive: test at 375px and 1280px widths
71	- [ ] No secrets in repo: RPC URLs from env (`VITE_*` prefix only for public endpoints)
72	- [ ] TypeScript strict: no `any` on contract ABIs
73
74	## Stitch docs note
75
76	When following links on [stitch.withgoogle.com/docs](https://stitch.withgoogle.com/docs/), use the full `https://stitch.withgoogle.com/docs/...` URL if relative navigation redirects incorrectly.

People who liked this also viewed

6 picks

Type

react-vite-dashboard

483installs916forks

View on GitHub

How to install react-vite-dashboard?

google-labs-code/stitch-skills/react-vite-dashboard

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

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	# Stitch to React + Vite Dashboard
2
3	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.
4
5	## Prerequisites
6
7	- Stitch MCP configured ([setup guide](https://stitch.withgoogle.com/docs/mcp/setup/))
8	- A project `DESIGN.md` (see the `design-md` skill) for token fidelity
9	- Vite + React + TypeScript scaffold (`npm create vite@latest`)
10
11	## Workflow
12
13	1. Discover MCP prefix — run `list_tools`, note the Stitch prefix (e.g. `stitch:`).
14	2. Fetch screen — `[prefix]:get_screen` with project and screen IDs.
15	3. Download assets — persist HTML/screenshot under `.stitch/designs/{screen}.html` and `.png`.
16	4. Read DESIGN.md — map `colors.`, `typography.`, `spacing.*` to CSS variables in `src/index.css`.
17	5. Generate components — split into `src/components/`, `src/pages/`, `src/hooks/`.
18	6. Wire data — use TanStack Query for async fetches; keep presentational components pure.
19
20	## HTML → React mapping
21
22	\| Pattern \| Implementation \|
23	\|---------\|----------------\|
24	\| Layout grid / flex \| Tailwind utilities or CSS modules aligned to DESIGN.md spacing tokens \|
25	\| Cards / panels \| `<section>` with tokenized border-radius and elevation fallbacks for forced-colors \|
26	\| Tables \| Semantic `<table>` or TanStack Table; never div-only grids for tabular data \|
27	\| Buttons \| `<button type="button">` with visible focus ring (preserve browser default unless DESIGN.md defines focus tokens) \|
28	\| Forms \| `<label htmlFor>` + `<input id>`; associate errors with `aria-describedby` \|
29	\| Loading \| Skeleton components; `aria-busy` on containers during fetch \|
30	\| Wallet connect \| Isolate in `WalletProvider`; never embed private keys in generated code \|
31
32	## DESIGN.md integration
33
34	```css
35	/* src/index.css — example token bridge */
36	:root {
37	--color-primary: /* from DESIGN.md colors.primary */;
38	--font-body: /* typography.body-md.fontFamily */;
39	}
40	```
41
42	Run the design.md linter locally before shipping UI:
43
44	```bash
45	npx @google/design.md lint DESIGN.md
46	```
47
48	## Web3 dashboard conventions
49
50	- Read-only contract calls via `useReadContract` (viem/wagmi) or ethers `Contract` + TanStack Query `queryFn`.
51	- Format token amounts with `formatUnits`; show network name and chain ID in settings footer.
52	- Surface transaction errors in plain language; link to block explorer when `txHash` exists.
53	- Gas-sensitive flows: batch reads, avoid redundant `eth_call` in render loops.
54
55	## File structure
56
57	```
58	src/
59	├── components/ # Presentational UI from Stitch
60	├── pages/ # Route-level screens
61	├── hooks/ # useQuery wrappers, wallet hooks
62	├── lib/ # ABI helpers, formatters
63	└── styles/ # Token CSS variables
64	```
65
66	## Quality checklist
67
68	- [ ] WCAG 2.2 AA: contrast from DESIGN.md component pairs passes linter
69	- [ ] Keyboard navigable: focus order matches visual order
70	- [ ] Responsive: test at 375px and 1280px widths
71	- [ ] No secrets in repo: RPC URLs from env (`VITE_*` prefix only for public endpoints)
72	- [ ] TypeScript strict: no `any` on contract ABIs
73
74	## Stitch docs note
75
76	When following links on [stitch.withgoogle.com/docs](https://stitch.withgoogle.com/docs/), use the full `https://stitch.withgoogle.com/docs/...` URL if relative navigation redirects incorrectly.

People who liked this also viewed

6 picks

Type