🛠️ 開発・MCP コミュニティ

stitch-to-react

StitchのデザインをReactのコンポーネントに変換する際に、モジュール化された構造（ロジックはhooks、データはmockData.ts、型定義はReadonly TypeScript、スタイルはTailwind）を適用し、効率的な開発を支援するSkill。

📜 元の英語説明(参考)

Use when converting Stitch designs into production React components. Enforces modular architecture: logic in hooks, data in mockData.ts, Readonly TypeScript interfaces, theme-mapped Tailwind classes. Triggers on: Stitch to React, design to code, stitch export, stitch MCP, stitch:get_screen.

🇯🇵 日本人クリエイター向け解説

一言でいうと

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o stitch-to-react.zip https://jpskill.com/download/9184.zip && unzip -o stitch-to-react.zip && rm stitch-to-react.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/9184.zip -OutFile "$d\stitch-to-react.zip"; Expand-Archive "$d\stitch-to-react.zip" -DestinationPath $d -Force; ri "$d\stitch-to-react.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して stitch-to-react.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → stitch-to-react フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Stitch を React コンポーネントに変換する

絶対にしないこと

絶対に .stitch/designs/ を確認せずに fetch しない — 再ダウンロードする前に、必ずユーザーに更新の意図を確認してください
絶対に Tailwind の任意の値を 16 進コードでハードコードしない (bg-[#2563eb]) — テーマに抽出し、セマンティッククラスを使用してください
絶対に AST の検証をスキップしない — アーキテクチャチェックリストは、完了とマークする前に必須です
絶対にロジックをコンポーネント本体に記述しない — イベントハンドラーと状態ロジックは src/hooks/ に記述してください
絶対に TypeScript のインターフェースを省略しない — すべてのコンポーネントには Readonly の Props 型が必要です
絶対にデータをコンポーネントファイルにバンドルしない — すべての静的なテキスト、画像、リストは src/data/mockData.ts に記述してください
生成された React コンポーネントに Google ライセンスヘッダーを含めないでください
Google Cloud Storage の URL に内部 AI fetch ツールを使用しないでください — GCS ドメインでは失敗します。bash スクリプトを使用してください

名前空間の発見

list_tools を実行して、Stitch MCP のプレフィックス（通常は stitch: または mcp_stitch:）を見つけます。すべての呼び出しにそのプレフィックスを使用してください。

[prefix]:get_screen を呼び出します — 以下を取得します:

screenshot.downloadUrl + htmlCode.downloadUrl
width、height、deviceType
designTheme (colors, fonts, roundness)

デザインのキャッシュに関する決定

.stitch/designs/{page}.html + .stitch/designs/{page}.png は存在しますか？
│
├─ YES → ユーザーに尋ねる: "キャッシュされたデザインを使用しますか、それとも Stitch から更新しますか？"
│         ユーザーが確認した場合のみ再ダウンロードします
│
└─ NO → ダウンロードに進みます

信頼性の高いダウンロード

内部 AI fetch は GCS で失敗します。bash スクリプトを使用してください:

# HTML
bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"

# スクリーンショット — URL に =w{width} を追加します
bash scripts/fetch-stitch.sh "[screenshot.downloadUrl]=w{width}" ".stitch/designs/{page}.png"

アーキテクチャルール（交渉不可）

ルール	強制
モジュール化されたファイル	シングルファイルのコンポーネントダンプを絶対に出力しない
ロジックの分離	イベントハンドラー → `src/hooks/`
データの分離	静的コンテンツ → `src/data/mockData.ts`
型の安全性	すべてのコンポーネントに `Readonly` インターフェース `[Component]Props` という名前を付ける
スタイルのマッピング	HTML の `<head>` から `tailwind.config` を抽出し、`resources/style-guide.json` に同期する

ファイル構造

src/
├── components/     # コンポーネントごとに 1 つのファイル + index.ts barrel
├── hooks/          # useNavigation.ts, useFormState.ts など
├── data/
│   └── mockData.ts # すべての静的なテキスト、画像、設定
├── styles/
│   └── theme.ts    # 抽出された Tailwind トークン
└── App.tsx

検証シーケンス

各コンポーネントを生成した後:

npm run validate <file_path> — AST 準拠
resources/architecture-checklist.md と照合
npm run dev — コンソールエラーがゼロであること

コンポーネントは、チェックリストに合格し、開発サーバーにエラーが表示されなくなるまで完了しません。

トラブルシューティング

問題	解決策
Fetch が失敗する (403)	スクリプトの引用符を確認します。`=w{width}` がスクリーンショットの URL に追加されていることを確認します
AST にハードコードされたスタイルが表示される	16 進数を `style-guide.json` に抽出し、Tailwind クラスに置き換えます
TypeScript の prop エラー	`resources/component-template.tsx` のテンプレートに従って `Readonly` インターフェースを追加します
テーマクラスが認識されない	`tailwind.config` が抽出され、`style-guide.json` に同期されていることを確認します
キャッシュされたスクリーンショットが古い	ファイルのタイムスタンプを確認します。ユーザーに更新を確認してもらいます

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Stitch to React Components

NEVER

NEVER fetch without checking .stitch/designs/ first — always ask user about refresh intent before re-downloading
NEVER hardcode hex codes as Tailwind arbitrary values (bg-[#2563eb]) — extract to theme, use semantic classes
NEVER skip AST validation — architecture checklist is non-optional before marking done
NEVER put logic in component bodies — event handlers and state logic go in src/hooks/
NEVER omit TypeScript interfaces — every component needs a Readonly Props type
NEVER bundle data in component files — all static text, images, lists go in src/data/mockData.ts
NEVER include Google license headers in generated React components
NEVER use internal AI fetch tools for Google Cloud Storage URLs — they fail on GCS domains; use the bash script

Namespace Discovery

Run list_tools to find the Stitch MCP prefix (usually stitch: or mcp_stitch:). Use that prefix for all calls.

Call [prefix]:get_screen — captures:

screenshot.downloadUrl + htmlCode.downloadUrl
width, height, deviceType
designTheme (colors, fonts, roundness)

Design Caching Decision

.stitch/designs/{page}.html + .stitch/designs/{page}.png exist?
│
├─ YES → Ask user: "Use cached designs or refresh from Stitch?"
│         Re-download ONLY if user confirms
│
└─ NO → Proceed to download

High-Reliability Download

Internal AI fetch fails on GCS. Use the bash script:

# HTML
bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"

# Screenshot — append =w{width} to URL
bash scripts/fetch-stitch.sh "[screenshot.downloadUrl]=w{width}" ".stitch/designs/{page}.png"

Architecture Rules (Non-Negotiable)

Rule	Enforcement
Modular files	Never output single-file component dumps
Logic isolation	Event handlers → `src/hooks/`
Data decoupling	Static content → `src/data/mockData.ts`
Type safety	`Readonly` interface named `[Component]Props` on every component
Style mapping	Extract `tailwind.config` from HTML `<head>`, sync to `resources/style-guide.json`

File Structure

src/
├── components/     # One file per component + index.ts barrel
├── hooks/          # useNavigation.ts, useFormState.ts, etc.
├── data/
│   └── mockData.ts # All static text, images, config
├── styles/
│   └── theme.ts    # Extracted Tailwind tokens
└── App.tsx

Validation Sequence

After generating each component:

npm run validate <file_path> — AST compliance
Check against resources/architecture-checklist.md
npm run dev — zero console errors required

A component is not done until it passes the checklist AND the dev server shows no errors.

Troubleshooting

Issue	Fix
Fetch fails (403)	Check script quotes; verify `=w{width}` appended to screenshot URL
AST shows hardcoded styles	Extract hex → `style-guide.json` → replace with Tailwind class
TypeScript prop errors	Add `Readonly` interface following template in `resources/component-template.tsx`
Theme class not recognized	Verify `tailwind.config` extracted and synced to `style-guide.json`
Cached screenshot stale	Check file timestamps; ask user to confirm refresh