react-vite-dashboard

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Stitch to React + Vite Dashboard

将Stitch转换为React + Vite仪表盘

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.

你是一名前端工程师，负责将Stitch界面转换为数据密集型仪表盘。目标技术栈：React 18、Vite、TypeScript、TanStack Query、React Router，以及可选的用于链上读取的ethers v6或viem。

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

已配置Stitch MCP（设置指南）
项目包含
```
DESIGN.md
```
文件（参考
```
design-md
```
技能，确保令牌保真度）
已搭建Vite + React + TypeScript脚手架（
```
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.

查找MCP前缀 — 运行
```
list_tools
```
，记录Stitch前缀（例如
```
stitch:
```
）。
获取界面 — 使用
```
[prefix]:get_screen
```
命令，传入项目和界面ID。
下载资源 — 将HTML/截图保存到
```
.stitch/designs/{screen}.html
```
和
```
.png
```
路径下。
读取DESIGN.md — 将
```
colors.*
```
、
```
typography.*
```
、
```
spacing.*
```
映射到
```
src/index.css
```
中的CSS变量。
生成组件 — 拆分到
```
src/components/
```
、
```
src/pages/
```
、
```
src/hooks/
```
目录。
数据对接 — 使用TanStack Query处理异步请求；保持展示组件纯函数特性。

HTML → React mapping

HTML → React映射规则

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

模式	实现方案
布局网格/弹性布局	使用Tailwind工具类或CSS模块，与DESIGN.md中的间距令牌对齐
卡片/面板	使用 `<section>` 标签，添加令牌化的圆角和针对强制色彩模式的降级阴影
表格	使用语义化 `<table>` 或TanStack Table；表格数据绝不能仅用div网格实现
按钮	使用 `<button type="button">` 标签，保留可见的焦点环（除非DESIGN.md定义了焦点令牌，否则保留浏览器默认样式）
表单	使用 `<label htmlFor>` + `<input id>` ；通过 `aria-describedby` 关联错误提示
加载状态	使用骨架屏组件；请求期间在容器上添加 `aria-busy` 属性
钱包连接	封装在 `WalletProvider` 中；绝不在生成的代码中嵌入私钥

DESIGN.md integration

DESIGN.md集成示例

css

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

bash

npx @google/design.md lint DESIGN.md

css

/* src/index.css — 示例令牌桥接 */
:root {
  --color-primary: /* 来自DESIGN.md的colors.primary */;
  --font-body: /* 来自DESIGN.md的typography.body-md.fontFamily */;
}

在交付UI前，本地运行design.md校验工具：

bash

npx @google/design.md lint DESIGN.md

Web3 dashboard conventions

Web3仪表盘开发规范

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.

通过
```
useReadContract
```
（viem/wagmi）或ethers
```
Contract
```
+ TanStack Query
```
queryFn
```
实现只读合约调用。
使用
```
formatUnits
```
格式化代币金额；在设置页脚显示网络名称和链ID。
用通俗易懂的语言展示交易错误；当存在
```
txHash
```
时，链接到区块浏览器。
对gas敏感的流程：批量读取，避免在渲染循环中重复调用
```
eth_call
```
。

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

src/
├── components/     # 来自Stitch的展示型UI组件
├── pages/          # 路由级界面
├── hooks/          # useQuery封装、钱包相关钩子
├── lib/            # ABI工具、格式化工具
└── styles/         # 令牌化CSS变量

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

WCAG 2.2 AA标准：DESIGN.md中组件对的对比度通过校验
支持键盘导航：焦点顺序与视觉顺序一致
响应式设计：在375px和1280px宽度下测试
仓库无敏感信息：RPC地址来自环境变量（仅公开端点使用
```
VITE_*
```
前缀）
TypeScript严格模式：合约ABI中无
```
any
```
类型

Stitch docs note

Stitch文档注意事项

When following links on stitch.withgoogle.com/docs, use the full

https://stitch.withgoogle.com/docs/...

URL if relative navigation redirects incorrectly.

当访问stitch.withgoogle.com/docs上的链接时，如果相对导航跳转异常，请使用完整的

https://stitch.withgoogle.com/docs/...

URL。