stitch-skill-creator

Stitch Skill Creator

用于创建新的 stitch-kit skills 的工厂。强制遵循标准结构、命名约定和插件的架构模式。

何时使用此技能

• 为新框架添加支持（例如“ Astro”“Qwik”“Flutter”）
• 创建特定领域的提示词架构师（例如 stitch-ui-ecommerce-architect）
• 添加新的质量工具（例如 stitch-performance、stitch-seo）
• 任何需要创建与 stitch-kit 生态系统集成的新 SKILL.md 的情况

---

命名约定

技能类型	名称模式	示例
框架转换	stitch-[framework]-components	stitch-astro-components
领域提示词架构师	stitch-ui-[domain]-architect	stitch-ui-ecommerce-architect
MCP 封装器	stitch-mcp-[tool-name]	stitch-mcp-edit-screen
质量 / 分析工具	stitch-[capability]	stitch-performance
元工具 / 实用工具	stitch-[name]	stitch-setup

规则：

• 始终使用 kebab-case
• 始终以 stitch- 开头
• 框架转换技能以 -components 结尾
• MCP 封装器遵循 docs/mcp-naming-convention.md 中的 stitch-mcp-{snake_case_tool → kebab} 规则

---

必需的目录结构

skills/[skill-name]/
├── SKILL.md              ← Required: frontmatter + workflow (keep under 500 lines)
├── examples/
│   └── usage.md          ← Required: 2+ worked examples
├── resources/            ← Optional: templates, checklists, reference tables
│   ├── component-template.[ext]
│   └── architecture-checklist.md
├── scripts/              ← Optional: bash scripts
│   └── fetch-stitch.sh   ← Copy from stitch-mcp-get-screen/scripts/ if needed
└── references/           ← Optional: style guides, contracts, long reference docs

---

SKILL.md 模板

---
name: stitch-[skill-name]
description: [One clear sentence — when to use this skill and what it does. This is used for routing by the orchestrator and for marketplace display.]
allowed-tools:
  - "stitch*:*"   # Include if skill calls Stitch MCP tools
  - "Bash"        # Include if skill runs shell commands
  - "Read"        # Usually yes
  - "Write"       # Usually yes
---

# Stitch → [Target] [Type]

**Constraint:** Only use this skill when the user explicitly mentions "Stitch" [and any additional trigger condition].

[One sentence explaining what this skill does and who the agent "is" while using it.]

## When to use this skill vs. similar skills

[Table comparing this skill to its nearest alternatives — help the orchestrator route correctly]

## Prerequisites

[What the user/environment needs before this skill can run]

## Step 1: Retrieve the design

1. Run `list_tools` → find Stitch MCP prefix
2. Call `[prefix]:get_screen` with numeric `projectId` and `screenId`
3. Download HTML: `bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"`

## Step 2: [Core conversion / workflow]

[The main logic of this skill]

## Step N: Output

[What the skill produces — files, code, commands]

## Troubleshooting

| Issue | Fix |
|-------|-----|

## References

- `resources/component-template.[ext]` — [description]
- `resources/architecture-checklist.md` — Pre-ship checklist
- `scripts/fetch-stitch.sh` — Reliable GCS HTML downloader

---

示例模板（examples/usage.md）

# [Skill Name] — Usage Examples

## Example 1: [Scenario title]

**User:** "[Specific user request]"

**Skill activates because:** [Why this triggers the skill]

**What the skill does:**
1. [Step 1]
2. [Step 2]
3. ...

**Output:**
[Description or code snippet of what gets generated]

---

## Example 2: [Different scenario]

[Same format]

---

架构检查清单模板（resources/architecture-checklist.md）

根据目标平台 / 框架进行调整：

# [Framework] Components — Architecture Checklist

Run through this checklist before marking the task complete.

## Structure
- [ ] [Project structure check]
- [ ] Components are in separate files

## [Framework-specific category]
- [ ] [Framework-specific check]

## TypeScript / Types
- [ ] No `any` types
- [ ] All props have Readonly<> wrapper

## Dark mode
- [ ] Theme tokens used everywhere — no hardcoded colors

## Accessibility
- [ ] All interactive elements are keyboard accessible
- [ ] Images have descriptive alt text

## Performance
- [ ] No console.log in production code

---

创建框架转换技能

对于新框架（例如 Astro）：

1. 创建目录

mkdir -p skills/stitch-astro-components/resources
mkdir -p skills/stitch-astro-components/examples
mkdir -p skills/stitch-astro-components/scripts

2. 复制 fetch 脚本

cp skills/stitch-mcp-get-screen/scripts/fetch-stitch.sh \
   skills/stitch-astro-components/scripts/fetch-stitch.sh

3. 编写 SKILL.md

使用上面的模板。框架技能的关键部分：

• 何时使用及与类似技能的区别 — 区分它与 Next.js、Svelte 等
• 项目结构 — 展示文件布局
• HTML → 框架映射 — 列出 HTML/CSS 模式 → 框架对应项的表格
• 设计令牌 — 说明如何在此框架中处理 Stitch 的 CSS 变量
• 深色模式 — 说明此框架如何处理深色模式
• 无障碍 — 特定于框架的 ARIA 模式

4. 创建组件模板

编写 resources/component-template.[ext] — 一个可运行的样板组件，展示：

• Props 接口
• 主题令牌的使用
• 深色模式
• 无障碍属性
• 条件渲染模式

5. 创建架构检查清单

编写 resources/architecture-checklist.md，包含特定于框架的检查项。

6. 编写示例

在 examples/usage.md 中至少添加 2 个示例。

7. 在 marketplace.json 中注册

将其添加到 .claude-plugin/marketplace.json 中相应的插件组：

• Web 框架 → stitch-frameworks
• 移动端 → stitch-mobile
• 新类别 → 创建新组

8. 更新 docs/skills-index.md

将新技能添加到表格中。

9. 更新 README.md

将其添加到相应的层级表格中。

---

创建特定领域的提示词架构师

对于新领域（例如电子商务）：

技能名称：stitch-ui-ecommerce-architect

此技能不会生成或执行 — 它会生成结构化的 Stitch 提示词。模式如下：

1. 确定特定领域的组件（商品卡片、购物车、结账流程、评论星级等）
2. 为此领域定义 [Context] [Layout] [Components] 提示词模板
3. 参考 stitch-ued-guide 中的视觉词汇
4. 输出内容：可直接用于 stitch-mcp-generate-screen-from-text 的提示词

---

参考资料

• docs/skills-index.md — 现有技能（创建前先检查是否有重复项）
• docs/mcp-naming-convention.md — MCP 工具命名规则
• stitch-nextjs-components/SKILL.md — 结构良好的框架转换技能参考
• stitch-swiftui-components/SKILL.md — 移动平台技能参考