Skip to content
Development
Skill

/stitch-mcp-list-screens

Lists all screens in a Stitch project. Use this after generate_screen_from_text to find the screenId of the newly generated screen, then call stitch-mcp-get-screen to retrieve it.

From plugin
stitch-kit
4936 skills1 agent2 hooks

Claude Code

$ npx -y skills add gabelul/stitch-kit --skill stitch-mcp-list-screens --agent claude-code

SKILL.md

stitch-mcp-list-screens.SKILL.md
name: stitch-mcp-list-screens
description: Lists all screens in a Stitch project. Use this after generate_screen_from_text to find the screenId of the newly generated screen, then call stitch-mcp-get-screen to retrieve it.
allowed-tools:
  - "stitch*:*"

Stitch MCP — List Screens

Lists all screens contained within a specific Stitch project. You typically call this right after `generate_screen_from_text` to find the `screenId` of the screen that was just created.

Critical prerequisite

**Only use this skill when the user explicitly mentions "Stitch".**

When to use

  • Immediately after `generate_screen_from_text` — to find the new screen's ID
  • User wants to browse all screens in a project
  • You need a `screenId` to call `get_screen`
  • Checking what screens already exist before generating a new one

Call the MCP tool

**Important: Use the `projects/ID` format — not the numeric ID alone.**

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

Output schema

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

After listing

1. Identify the target screen (usually the most recently generated — last in the list) 2. Extract the numeric `screenId` from the `name` field:

  • `"projects/3780309359108792857/screens/88805abc123def456"` → screenId = `"88805abc123def456"`

3. Call `stitch-mcp-get-screen` with the numeric `projectId` and `screenId`

ID format reminder

For the next call (`get_screen`), you need the **numeric IDs** for both project and screen:

  • `projectId` → `3780309359108792857` (strip `projects/` prefix)
  • `screenId` → `88805abc123def456` (strip `projects/.../screens/` prefix)
Read more
@gabelul
Ships withstitch-kit

Your coding agent writes decent code and designs terrible UI. stitch-kit fixes the second half — it wires agents into Google Stitch (text prompts → genuinely beautiful screens) and teaches them to drive it properly.

4936 skills1 agent
Get the whole plugin

Stars on GitHub

Momentum

stars in total
49
Star history of gabelul/stitch-kit on GitHub, a chart by star-history.com

Other skills on stitch-kit.

stitch-a11y

stitch-a11y

Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attributes,…

@gabelul@gabelulInstall Skill
stitch-animate

stitch-animate

Adds a purposeful animation layer to Stitch-generated components — CSS transitions, Framer Motion (React/Next.js), or Svelte…

@gabelul@gabelulInstall Skill
stitch-design-md

stitch-design-md

Analyzes a Stitch project's screens and synthesizes a natural-language DESIGN.md — visual atmosphere, color palette with hex…

@gabelul@gabelulInstall Skill
stitch-design-system

stitch-design-system

Extracts a Stitch design and generates production code artifacts — CSS custom properties with dark mode tokens, a Tailwind v4…

@gabelul@gabelulInstall Skill
stitch-html-components

stitch-html-components

Converts a Stitch screen, a local HTML file, or a URL into clean, platform-agnostic HTML5 + CSS — semantic markup, CSS custom…

@gabelul@gabelulInstall Skill
stitch-ideate

stitch-ideate

Conversational design ideation agent that researches trends, explores visual directions, and refines ideas through adaptive…

@gabelul@gabelulInstall Skill

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills2w309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc2w293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react5d252k
@facebook@facebookInstall Skill

Questions about stitch-mcp-list-screens.

Which coding agents can use stitch-mcp-list-screens?
stitch-mcp-list-screens installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.