AI导哈

代理技能库

一个为Symbiote.js 3.x生态系统设计的代理技能库，用于增强提示、生成设计文档、转换组件代码和自动化多页面应用生成。

  • by rnd-pro
  • JavaScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 rnd-pro/stitch-skills

使用说明

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 references

MCP工具对

此库旨在与两个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压缩）·当前代理构建基线： @symbiotejs/symbiote@3.8.0-webmcp.2 · AI_REFERENCE.md
  • symbiote-ui@0.3.0-alpha.6 --可重用的UI组件、图形/布局助手、提供程序元数据、令牌、模式、规则和WebMCP UI描述符
  • symbiote-engine@0.3.0-alpha.6 --工作流/运行时引擎、处理程序、包、持久性和运行时CLI/服务器契约
  • 原生CSS --自定义属性、现代嵌套、属性选择器
  • 欧洲稳定机制 --使用导入映射进行导入/导出以共享依赖关系
  • JSDoc --类型文档（无TypeScript）

symbiote-node 是用于迁移兼容性的传统终端外观。新Stitch生成的项目应该选择 @symbiotejs/symbiote, symbiote-ui，或 symbiote-engine 根据他们消费的合同。

重新设计工作流程

对于需要通过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就绪组件的技能。

相关 MCP