Symbiote.js的缝合代理技能
一个Agent技能库，旨在与Stitch MCP服务器和Project Graph MCP配合使用 Symbiote.js 3.x 生态系统。每种技能都遵循Agent Skills开放标准，与Gemini CLI、Claude Code、Cursor、Antigravity和其他启用MCP的编码代理兼容。
安装
克隆存储库并将所需技能复制到项目中 .agent/skills/ 目录：
git clone https://github.com/rnd-pro/stitch-skills.git
# Copy a specific skill
cp -r stitch-skills/skills/symbiote-components .agent/skills/
# Or copy all skills at once
cp -r stitch-skills/skills/* .agent/skills/代理将自动从中发现技能 .agent/skills/ 目录。
可用技能
技能按推荐的工作流程顺序列出——从提示增强到最终视频输出。
1.加强提示
将模糊的UI想法转化为经过优化的提示。增强特异性，添加UI/UX关键字，使用 CSS自定义属性，并构造输出以获得更好的生成结果。
2.设计md
分析Stitch项目并生成全面的 DESIGN.md 使用文档记录设计系统的文件 CSS自定义属性 （设计标记）和针对Stitch屏幕生成优化的语义视觉语言。
3.共生体成分
将缝合屏幕转换为 Symbiote.js 3.x 具有三文件架构的组件系统(Component.js + Component.tpl.js + Component.css.js)，通过项目图MCP自动验证，以及设计令牌一致性。
4.线圈
使用Stitch和自主接力棒系统从单个提示生成完整的多页SPA， AppRouter 基于路径的路由集成和遵循Symbiote约定的文件组织。将技能1-3组合成一个自主循环。
典型工作流程
enhance-prompt → Stitch MCP → design-md → symbiote-components → Project Graph MCP
(1) ↕ (2) (3) (validate)
generates converts
screens to code或使用 线圈 （4） 使连续构建周期中的步骤1-3自动化。
存储库结构
内的每个目录 skills/ 遵循标准化的结构，以确保AI代理拥有执行“少镜头”学习和自动质量检查所需的一切。
stitch-skills/
├── resources/ — Shared resources across all skills
│ ├── project-graph-workflow.md
│ ├── symbiote-3x-reference.md
│ └── global-styles-template.md
└── skills/[skill-name]/
├── SKILL.md — The "Mission Control" for the agent
├── scripts/ — Executable enforcers (Validation & Networking)
├── resources/ — Skill-specific knowledge base
└── examples/ — The "Gold Standard" syntactically valid referencesMCP工具对
此库旨在与两个MCP服务器协同工作。 两者都可以从MCP存储中激活 反重力 IDE（搜索→ 安装→ 认证）。
缝合MCP
UI设计生成和项目管理(@\_davideast/缝合mcp):
| 工具 | 目的 |
|---|---|
list_projects / get_project | 发现和访问Stitch项目 |
list_screens / get_screen | 检索屏幕元数据、HTML源代码和屏幕截图 |
generate_screen_from_text | 根据文本提示生成新的屏幕设计 |
edit_screens | 使用文本指令修改现有屏幕 |
generate_variants | 创建现有屏幕的设计变体 |
项目图MCP
代码分析、质量验证和框架特定规则(项目图mcp):
| 工具 | 目的 |
|---|---|
get_skeleton | 紧凑的项目概述——10-50x压缩，适合上下文窗口 |
expand / deps / usages | 浏览代码库：深入符号，跟踪依赖关系 |
get_full_analysis | 运行所有质量检查+健康评分（0-100） |
get_dead_code | 查找未使用的函数、类、导出 |
get_complexity | 圈复杂度度量（标志>10） |
get_similar_functions | 检测代码重复 |
check_custom_rules | 框架特定的lint——自动检测共生体，应用17个共生体3.x规则 |
get_pending_tests | 列表 @test / @expect 验证注释 |
mark_test_passed / mark_test_failed | 跟踪测试执行进度 |
generate_jsdoc | 自动生成带有测试注释的JSDoc模板 |
看 resources/project-graph-workflow.md 完整的验证工作流程。
测试注释(@test / @expect)
Project Graph MCP集成的一个关键特性是：将JSDoc注释添加到交互式方法中，然后代理自动发现、执行和跟踪测试。
/**
* Toggle card expanded state
*
* @test click: Click the card header
* @test key: Press Enter on focused card
* @expect attr: [expanded] attribute appears
* @expect visual: Content section becomes visible
*/
toggleExpand() {
this.$.isExpanded = !this.$.isExpanded;
}代理工作流程：
get_pending_tests("src/") → agent executes each step → mark_test_passed(id) → get_test_summary("src/")支持的测试类型： click, key, drag, type, scroll, hover （浏览器）， request, call API run, exec （CLI）。 支持的预期类型： attr, visual, element, text （UI）， status, body API output, file （CLI）。
技术栈
- Symbiote.js 3.x --组件框架（自定义元素，约6KB gzip压缩）· AI_REFERENCE.md
- 原生CSS --自定义属性、现代嵌套、属性选择器
- ESM --使用导入映射进行导入/导出以共享依赖关系
- JSDoc --类型文档（无TypeScript）
重新设计工作流程
对于需要通过Stitch进行视觉刷新的现有Symbiote.js项目：
Analyze existing Generate new design Update components Validate
──────────────── → ─────────────────── → ──────────────── → ────────────
get_skeleton() edit_screens() Update .css.js check_custom_rules()
get_full_analysis() generate_variants() Update .tpl.js get_full_analysis()
Read DESIGN.md Download new HTML Preserve .js logic get_pending_tests()关键的原则：从新的Stitch HTML更新样式和模板，同时保留组件逻辑(init$、事件处理程序、PubSub上下文）。
添加新技能
所有新技能都需要遵循上述文件结构来实现代理技能开放标准。
新技能的优秀候选人
- 验证：将Stitch HTML转换为Symbiote组件并验证三重文件结构的技能。
- 数据解耦：通过PubSub将静态设计内容转换为外部数据上下文的技能。
- 生成设计：从给定的数据模式在Stitch中生成新设计屏幕的技能。
- SSR集成：生成具有水合支持的Symbiote SSR就绪组件的技能。