Stitch React 仪表盘构建器
将 Stitch 设计屏幕转换为生产级 React + Vite 数据密集型仪表盘。
技能明确限制为 Stitch 工具、读取、写入、Bash 和 web_fetch，并要求不得在生成代码中嵌入私钥，也建议通过环境变量提供 RPC URL；但权限仍较宽，未规定用户确认、网络数据流披露、写入范围、回滚方案或外部操作确认，因此扣分。
工作流步骤、目录结构和质量清单较一致，且包含异常交易错误展示建议；但依赖 Stitch MCP、DESIGN.md、Vite 项目和外部包，工具调用格式含糊，缺少目标技能专属脚本、测试和失败诊断路径；静态评估按上限限制，扣分。
目标用户、技术栈、数据密集型仪表盘场景和若干 Web3 适用模式较明确；但非适用范围、触发边界、输入输出契约及中文环境说明不足，核心 Stitch MCP 依赖海外服务，未证明中国大陆网络可达，因此扣分。
SKILL.md 采用先决条件、流程、映射、结构和检查清单分层，README 提供安装命令、示例提示和相关技能，仓库有 Apache-2.0、Security Policy 与支持版本信息；但缺少该技能的版本策略、变更记录、维护责任人和明确更新路径，且依赖说明和故障排查不完整，因此扣分。
该技能提供从 Stitch 屏幕到 React/Vite 仪表盘的可执行流程，并覆盖设计令牌、可访问性、数据查询和只读 Web3 读取，核心任务价值明确；但没有已验证的代表性输出或测试证据，生成结果仍需人工实现、集成和审查，静态上限为 7，扣分。
源文件提供了可审计的流程、代码模式和检查项，但目标技能没有专属测试或示例输出；仓库 CI 仅验证 react-components 技能，不能作为本技能关键路径的执行证据，因此证据覆盖薄弱并扣分。
- 使用前应确认 Stitch MCP 的凭据、网络可达性和数据传输范围，并限制其访问权限。
- 应在写入前要求用户确认目标目录，保留版本控制回滚点，并补充该技能专属的构建、可访问性和 Web3 读取测试。
- 不要将任何私钥或敏感凭据放入 VITE_* 变量；这些变量会暴露给客户端。
- 当前 CI 未覆盖 react-vite-dashboard，不能据此断言其可运行。
这个 Skill 能做什么，适合哪些场景？
该技能面向需要从 Google Stitch 屏幕构建数据密集型仪表盘的前端工程师。它以 React 18、Vite、TypeScript、TanStack Query 和 React Router 为目标技术栈，并支持可选的 ethers v6 或 viem 链上读取模式。工作流会从 Stitch MCP 获取屏幕和资源，读取 DESIGN.md 中的设计令牌，并生成按组件、页面和钩子组织的前端代码。它还强调无障碍、响应式布局、严格 TypeScript 和避免在代码库中保存秘密。
发现 Stitch MCP 工具前缀，调用 get_screen 获取项目屏幕，保存 HTML 和 PNG 资源到 .stitch/designs/{screen}.html 与 .png，读取 DESIGN.md 并将颜色、字体和间距映射为 CSS 变量，生成 src/components、src/pages 和 src/hooks 中的 React 结构，使用 TanStack Query 连接异步数据，并为钱包连接、合约读取、错误展示和区块浏览器链接提供实现约定。
- 前端工程师需要把 Stitch 中的数据后台屏幕落地为 React + Vite 应用时。
- 团队已有 DESIGN.md，希望生成的仪表盘沿用现有颜色、字体和间距令牌时。
- 开发者需要为仪表盘接入 TanStack Query 异步数据获取时。
- Web3 团队需要在仪表盘中加入只读合约调用、网络信息和交易错误提示时。
- 产品团队需要检查生成界面在 375px 和 1280px 宽度及键盘操作下的实现时。
这个 Skill 有哪些优点和局限？
- 明确针对数据密集型仪表盘，而非泛化的界面转换。
- 提供从 Stitch MCP 获取屏幕、保存资源到生成 React 文件结构的具体流程。
- 内置 DESIGN.md 令牌、语义表格、焦点状态、表单关联和 aria-busy 等实现要求。
- 包含 ethers v6 或 viem 的只读 Web3 仪表盘约定。
- 依赖已配置并运行的 Stitch MCP，以及项目中的 DESIGN.md 和 Vite/React/TypeScript 脚手架。
- 源材料没有提供测试套件、支持平台的实际测试结果或失败恢复说明。
- 安装文档面向整个 stitch-skills 集合，未说明单独安装此技能的命令。
- Web3 功能是可选模式，不能据此推断完整的钱包交易功能。
如何安装这个 Skill？
先按 Stitch MCP 设置指南配置并运行 Stitch MCP。然后可使用 README 支持的选择性安装命令：npx skills add google-labs-code/stitch-skills。该命令安装技能集合；源材料未说明如何只安装 react-vite-dashboard 这一项。
如何使用这个 Skill？
准备 DESIGN.md 和 Vite + React + TypeScript 项目（可使用 npm create vite@latest）。触发示例："Convert the Stitch screens in project projects/123 into a production React + Vite data dashboard using DESIGN.md tokens." 技能随后会发现 Stitch 前缀、获取屏幕、下载资源并组织 React 代码。发布前可运行 npx @google/design.md lint DESIGN.md。