stitch-mcp-list-screens

Name: stitch-mcp-list-screens
Author: gabelul

github.com/gabelulデザイン・UI4738 回インストール14 週間前に更新

リポジトリ

stitch-mcp-list-screens について

Stitch プロジェクト内の画面を一覧表示し、確認に必要な画面 ID を探すスキルです。ユーザーが Stitch に明示的に言及した場合のみ使用します。

主な機能

01プロジェクト内の画面一覧表示
02get_screen 用の画面 ID の特定
03projects/ID 形式でのプロジェクト ID 指定
04生成前の既存画面の確認

活用シーン

01新しく生成した画面の ID の特定
02Stitch プロジェクト内の画面の閲覧
03画面を追加する前の既存内容の確認

MCP 対応

Stitch MCP の list_screens ツールを呼び出します。プロジェクト ID は projects/ID 形式で指定します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/gabelul/stitch-kit --skill stitch-mcp-list-screens

インストール後、Claude Code で/stitch-mcp-list-screensを入力して読み込まれたか確認します。

詳細

Stitch MCP — 画面一覧

特定の Stitch プロジェクトに含まれるすべての画面を一覧表示します。通常、作成した画面の screenId を確認するために、generate_screen_from_text の直後に呼び出します。

重要な前提条件

ユーザーが「Stitch」と明示的に言及した場合にのみ、このスキルを使用してください。

使用するタイミング

generate_screen_from_text の直後 — 新しい画面の ID を確認するため
ユーザーがプロジェクト内のすべての画面を表示したい場合
get_screen を呼び出すために screenId が必要な場合
新しい画面を生成する前に、既存の画面を確認する場合

MCP ツールを呼び出す

重要：数値 ID のみではなく、projects/ID の形式を使用してください。

{
  "name": "list_screens",
  "arguments": {
    "projectId": "projects/3780309359108792857"
  }
}

✅ "projects/3780309359108792857"
❌ "3780309359108792857"

出力スキーマ

{
  "screens": [
    {
      "name": "projects/3780309359108792857/screens/88805abc123def456",
      "title": "Login Screen",
      "screenshot": {
        "downloadUrl": "https://storage.googleapis.com/..."
      },
      "deviceType": "MOBILE"
    }
  ]
}

一覧表示後

対象の画面を特定します（通常は、一覧の最後にある最も新しく生成された画面です）
name フィールドから数値の screenId を抽出します：
- "projects/3780309359108792857/screens/88805abc123def456" → screenId = "88805abc123def456"
数値の projectId と screenId を指定して、stitch-mcp-get-screen を呼び出します