stitch-skill-creator

Stitch スキル作成ツール

新しい stitch-kit スキルを作成するためのファクトリーです。標準的な構成、命名規則、プラグインのアーキテクチャパターンを適用します。

このスキルを使う場面

• 新しいフレームワークのサポートを追加する場合（例：「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

ルール：

• 常にケバブケースを使います
• 常に 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. フェッチスクリプトをコピーする

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 を更新する

適切なレイヤーの表に追加します。

---

ドメイン固有のプロンプトアーキテクトの作成

新しいドメイン（例：eコマース）の場合：

スキル名：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 — モバイルプラットフォームスキルの参考例