Stitch React Native 构建器
将 Stitch HTML 设计转换为可维护的 React Native 组件，并同步现有原生界面。
证据显示技能要求使用 Stitch MCP、Bash、Read、Write 和 web_fetch，并将设计、元数据写入项目及工作区；对已有文件要求用户确认，且要求验证、打包器和模拟器操作先获许可，这些是积极的最小化控制。扣分原因是权限范围较宽，强制外部下载和多屏抓取，未说明数据流、敏感数据处理、回滚机制或依赖供应链风险；发布者身份也未被验证。
证据显示流程分阶段且有明确门槛，fetch 脚本具备参数检查、超时、失败退出和错误提示，validate.js 具备语法解析及若干静态检查。扣分原因是静态材料无法证明关键路径可运行；CI 仅验证 react-components 而非本技能，缺少选定技能的集成测试，且规范存在潜在不一致，例如要求所有组件具备导出的 Props 接口但未提供可核验样例。静态校准下不超过10分。
证据显示目标用户、输入场景和主要输出较明确：把 Stitch HTML 转为 React Native，并支持同步现有组件；README 提供触发示例和 MCP 前置条件。扣分原因是未明确非适用范围、输入异常和不同 React Native/Expo 版本边界，未提供中文使用支持；核心流程依赖 Stitch MCP、Google Cloud Storage 下载和相关网络环境，面向中国大陆用户的可达性未被证明。
证据显示 SKILL.md、README、package.json、脚本、资源清单和安全策略构成了较清晰的文档层次，Apache-2.0 许可证、安装方式、依赖、Node 版本和安全报告入口均有说明。扣分原因是缺少 changelog、明确维护责任人和技能级更新路径，README 所述 examples 目录未在所给材料中出现；package.json 的1.0.0版本与 SECURITY.md 的0.1.x支持范围不一致，故不能给高分。
证据显示技能覆盖检索、主题提取、HTML到React Native映射、组件架构、导航、无障碍和可选验证，理论上能完成核心设计转码任务；提供 AST 验证器和模板/清单说明。扣分原因是没有选定技能的代表性生成结果、编译结果或运行截图，且若不允许验证则流程要求不能证明产物可直接使用；静态校准下有效性不超过7分。
证据显示关键行为被写入 SKILL.md，fetch 与 validate 脚本已提交，并有仓库级 GitHub Actions 验证材料。扣分原因是 CI 工作目录和测试目标是 react-components，不覆盖 react-native；没有测试套件、实际运行日志或多来源交叉证据，因此只能给予有限的静态可审计性，且静态校准下不超过5分。
- 核心流程强制访问 Stitch MCP 和外部 Google Cloud Storage URL；在中国大陆网络环境中可能无法稳定完成抓取，材料未提供替代方案。
- SKILL.md 要求所有组件导出 Props 接口、禁止硬编码颜色并运行验证，但所给 CI 未覆盖该技能，需人工确认这些规则在实际项目中可执行。
- 技能会写入设计文件和 .stitch/metadata.json；使用前应确认目标路径、覆盖行为和备份/回滚策略。
- 不要将下载 URL、设计内容或项目元数据视为非敏感数据；技能未定义脱敏或凭据保护流程。
这个 Skill 能做什么，适合哪些场景？
这是 Stitch Skills 集合中的一个 React Native 构建技能，专门把 Stitch HTML 设计转换为使用 React Native 原语和 StyleSheet 的组件。它也能将现有原生组件同步到最新 Stitch 设计。工作流包含设计下载、截图审查、主题提取、组件架构、数据解耦和导航配置。它依赖已配置并运行的 Stitch MCP 服务，适合需要从 Stitch 设计生成移动端代码的工程团队。
通过 Stitch MCP 发现工具并获取项目中每个屏幕的设计元数据；使用 scripts/fetch-stitch.sh 下载 HTML 和指定宽度的 PNG 截图；要求逐个审查截图，并将项目元数据保存到 .stitch/metadata.json。随后从 HTML head 中提取 Tailwind 配置，生成或更新 src/theme.ts，创建 mock 数据、模块化 React Native 组件、必要的导航配置，并要求使用导出的 Props 接口、可访问性属性和 StyleSheet。可选地运行 npm install、npm run validate 和 tsc --noEmit，但启动打包器或模拟器审查前必须先获得用户许可。
- 移动端工程师已有 Stitch 页面设计，需要生成 React Native 屏幕和组件。
- 产品团队更新了 Stitch 设计，需要将现有原生组件同步到最新版本。
- 需要把网页式 HTML/CSS 布局映射为 View、Text、Image、Pressable、TextInput 等 React Native 原语。
- 团队希望在生成代码中统一使用从当前设计提取的颜色、间距、字体和圆角令牌。
这个 Skill 有哪些优点和局限？
- 覆盖从 Stitch 设计获取到 React Native 组件生成的完整流程。
- 明确要求主题令牌、模块化组件、数据解耦、TypeScript Props 接口和可访问性。
- 包含平台差异处理、响应式尺寸、长列表和安全区域等 React Native 规则。
- 支持将现有原生组件同步到最新 Stitch 设计。
- 必须依赖已配置并运行的 Stitch MCP 服务、网络访问和本地文件读写。
- 流程要求下载所有屏幕并逐一进行截图审查，可能增加执行时间。
- 验证、打包器启动和模拟器审查不会自动进行，且需要用户许可。
- 源材料未提供具体测试套件、支持的 React Native 版本范围或已验证的平台列表。
如何安装这个 Skill？
README 没有记录单独安装该技能的专用目录。可按仓库文档运行 npx skills add google-labs-code/stitch-skills；Codex 用户也可先将 google-labs-code/stitch-skills 添加为插件市场，再安装 stitch-build 插件。使用前需配置并运行 Stitch MCP 服务，并准备相应环境变量和凭据。
如何使用这个 Skill？
在已配置 Stitch MCP 的编码代理中提出类似：Convert the Stitch design to React Native components with proper theme and navigation. 或 Sync the app to the last updates of the Stitch project 13039335308618232534. 如果本地已有 .stitch/designs/{page}.html 和 .png 文件，技能会要求你先选择刷新设计还是复用本地文件。验证脚本、打包器和模拟器审查需要分别按流程获得许可。