react-vite-dashboard作者 Google Labs

React Vite Dashboard Skill.

Claude Code 和 Codex skill，用于 UI 设计：将 Stitch 设计转换为 React + Vite 仪表板，集成 TanStack Query。

Web & UI
UI 代码

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

从上游文件读取的前言和章节标题（2026-09-14）· 完整内容 3,656 字符

01 功能说明

react-vite-dashboard Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物，均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

这是一个面向前端工程师的构建 skill，用于将 Stitch 屏幕转换为基于 React 18、Vite、TypeScript、TanStack Query 和 React Router 的数据密集型仪表盘，并可选使用 ethers v6 或 viem 进行链上读取。

其工作流分六个步骤运行：发现 Stitch MCP 前缀、获取屏幕、将 HTML 和截图保存到 .stitch/designs/ 下、读取 DESIGN.md 并将颜色、排版和间距映射为 src/index.css 中的 CSS 变量、生成组件和页面，然后通过 TanStack Query 接入数据，同时保持展示型组件的纯粹性。一张映射表规定了表格、按钮、表单、加载状态和钱包连接的行为，文件末尾附有 WCAG 2.2 AA 质量检查清单。

它产出什么

一个基于 Stitch 屏幕构建的生产级 React + Vite 仪表盘，其数据层使用 TanStack Query。
源设计的本地副本，以 .stitch/designs/{screen}.html 及对应的 .png 截图形式保存在仓库中。
按职责划分的源代码目录树，hooks 中包含 useQuery 封装和钱包相关 hooks，lib 中包含 ABI 辅助函数和格式化工具。

查看示例提示词 ↗

工作方式

01
发现 MCP 前缀
先运行 list_tools 并记录工具所暴露的 Stitch 前缀，因为之后的每次调用都基于它构建。
02
获取屏幕
在已发现的前缀上调用 get_screen 工具，同时传入 Stitch 项目 ID 和屏幕 ID。
03
桥接 DESIGN.md 中的 Token
读取项目的 DESIGN.md，将其中的颜色、排版和间距条目转换为 src/index.css 中的 CSS 变量。
04
按角色拆分生成的 UI
生成的代码会分布在 src/components、src/pages 和 src/hooks 中，而不是集中在一个文件里。
05
通过 TanStack Query 传输数据
异步请求通过 TanStack Query 处理，以保证由 Stitch 屏幕构建出的展示组件保持纯粹。

02 找到适合场景

何时使用 react-vite-dashboard Skill

在 Claude Code 或 Codex 中使用 react-vite-dashboard skill 处理此类 UI 设计工作。适用范围和限制来自该 skill 的文件。

适合场景

将 Stitch 屏幕转化为数据密集型的仪表盘界面而非营销页面，每个屏幕包含多个组件。
需要通过 ethers v6 或 viem 进行链上读取的 Web3 前端，与仪表盘其余数据层协同工作。
设计系统已存在于 DESIGN.md 中的团队，需要生成的 UI 忠实遵循这些 token。

了解边界

该文件假定 Stitch MCP 已配置完成；仅在未配置时才指向外部设置指南。
链上工作仅限于只读合约调用，签名或写入流程不在此 skill 的描述范围内。

需要提供的信息

需要Google Stitch——在 SKILL.md 中标明为必需。
输入已配置 Stitch MCP（设置指南）
输入项目 DESIGN.md（参见 design-md skill）以确保 token 保真度
输入Vite + React + TypeScript 脚手架（npm create vite@latest）

03 Skill 内部

react-vite-dashboard Skill 为 Claude Code 和 Codex 设定的规则

SKILL.md 为 Agent 设定的 7 条具体指令、默认值与限制——正是文件中真正改变结果的部分。

表格保持语义化
表格数据必须使用真正的 table 元素或 TanStack Table；纯 div 网格明确被排除在外。
钱包代码隔离且不含密钥
钱包连接位于 WalletProvider 内部，生成的代码绝不能嵌入私钥。
为每个输入添加标签并关联错误信息
表单将 label 的 htmlFor 与 input 的 id 配对，验证错误通过 aria-describedby 关联，而非松散展示。
保留按钮的默认焦点环
按钮为 type="button" 并带有可见的焦点环，除非 DESIGN.md 定义了焦点 token，否则保留浏览器默认样式。
以程序化方式表明加载状态
处于加载中的屏幕使用骨架组件，容器在请求进行期间设置 aria-busy。
在对 gas 敏感的流程中批量读取
读取操作应进行批处理，渲染循环中不得发出冗余的 eth_call 请求。
仓库中不含任何机密信息
RPC URL 来自环境变量，VITE_ 前缀仅用于公开端点。

04 投入使用

在 Claude Code 或 Codex 中安装 react-vite-dashboard

一条 npx skills add 命令，然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 react-vite-dashboard 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行；安装程序会询问要把它添加到哪个 Agent。

Terminal

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

针对 plugins/stitch-build/skills/react-vite-dashboard/SKILL.md 的通用 skills CLI 形式；仓库可能会记录其自身路径。

给 Skill 一个首次 UI 设计任务

按 skill 自身的术语撰写；把括号中的部分换成你的内容。

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.

来源：依据 SKILL.md，按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果：

在发布任何 UI 之前，先在本地对照 DESIGN.md 运行 design.md linter。
对比度必须在 DESIGN.md 中定义的组件配对上通过 WCAG 2.2 AA 标准，并通过 linter 校验。
键盘导航必须可用，且焦点顺序要与仪表盘的视觉顺序一致。
在 375px 和 1280px 宽度下测试布局。
TypeScript 以严格模式运行，合约 ABI 不得类型化为 any。

在 OpenDesign 中通过 SKILL.md 链接导入 react-vite-dashboard：Plugins → Add → Skill → Import from link，然后在顶部栏中选择它。

下载 OpenDesign 阅读快速入门

05 开源、可追溯

来源、许可与验证

本页面事实的来源，以及最后检查时间。

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills 分支 main
Skill 文件: plugins/stitch-build/skills/react-vite-dashboard/SKILL.md 验证时记录的内容校验和；提交 0337446
License: Apache-2.0 来自 LICENSE。
仓库星标数: 8,304 GitHub 快照拍摄于 2026-09-14，针对整个 google-labs-code/stitch-skills 仓库，该仓库在此目录中包含 12 个 skills。不是 react-vite-dashboard 的评分或使用计数。
已由 OpenDesign 验证: 2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序（检查日期 2026-08-28）；本页面未记录实际运行。

SKILL.md 内部

前置条件Stitch MCP、一份 DESIGN.md，以及一个 Vite React TypeScript 脚手架
工作流从 MCP 前缀发现到组件生成与数据接入的六个步骤
HTML → React 映射将布局、卡片、表格、按钮、表单、加载状态和钱包连接转换为标记的表格
DESIGN.md 集成基于 DESIGN.md token 的 CSS 变量桥接，以及 design.md lint 命令
Web3 仪表盘规范只读合约调用、formatUnits 金额格式、通俗易懂的交易错误提示、批量读取
文件结构五个源代码文件夹，分别用于组件、页面、hooks、lib 和样式
质量检查清单五项检查，涵盖 WCAG 2.2 AA、键盘顺序、断点、密钥安全和严格类型
Stitch 文档说明当相对文档链接跳转错误时，使用绝对的 stitch.withgoogle.com URL

Skill 自身的描述

"将 Stitch 设计转换为生产级 React + Vite 仪表板，支持 TanStack Query、从 DESIGN.md 获取的无障碍 token，以及 Web3 模式（ethers/viem）。"

来自 SKILL.md 的前置描述。完整文件约 3,656 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 react-vite-dashboard Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md，而非某次实际运行的记录。

布局必须使用 Tailwind 吗？

不必须。映射表允许使用 Tailwind 工具类或 CSS modules，只要间距遵循 DESIGN.md 中的 token 即可。

这个 skill 处理合约写入操作吗？

它所定义的规范只涉及读取和结果展示：交易错误应以通俗易懂的语言解释，且当存在 txHash 时应链接到区块浏览器。文档中未描述签名或写入流程。

Stitch 文档链接有什么特别之处吗？

在 stitch.withgoogle.com/docs 上点击链接时，请使用完整的 https://stitch.withgoogle.com/docs/... URL，因为相对导航可能会跳转错误。

React Vite Dashboard

在真实 UI 设计任务上运行 react-vite-dashboard。

下载 OpenDesign，从 SKILL.md 链接导入 react-vite-dashboard，粘贴上述提示，在查看结果前先阅读计划。

下载 OpenDesign 浏览所有 skills

终端

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