Skip to main content
Glama
LuciferDono

stitch-pro-mcp

by LuciferDono

The Problem

Google Stitch generates beautiful UI from text prompts. But it outputs raw HTML — no design system, no accessibility, no responsive breakpoints, no framework components.

Every existing Stitch MCP is a thin wrapper. Generate screen, get HTML, done.

stitch-pro-mcp fills the gap between generation and production.

Existing MCPs

stitch-pro-mcp

Generate screens

:white_check_mark:

:white_check_mark:

Design system enforcement

:x:

:white_check_mark:

WCAG 2.1 AA accessibility

:x:

:white_check_mark:

Responsive breakpoints

:x:

:white_check_mark:

React / Next.js output

:x:

:white_check_mark:

Vue 3 output

:x:

:white_check_mark:

SvelteKit output

:x:

:white_check_mark:

shadcn/radix/MUI mapping

:x:

:white_check_mark:

Multi-screen flows

:x:

:white_check_mark:

Auto-orchestration

:x:

:white_check_mark:

Related MCP server: Stitch MCP

Quick Start

1. Get a Stitch API Key

Visit stitch.withgoogle.com and create an API key.

2. Install

# Run directly (no install)
npx stitch-pro-mcp

# Or install globally
npm install -g stitch-pro-mcp

3. Configure Your Editor

Recommended (CLI):

# Install globally first
npm install -g stitch-pro-mcp

# Add to Claude Code with API key
claude mcp add -e STITCH_API_KEY=your-api-key --transport stdio stitch-pro -- node $(npm root -g)/stitch-pro-mcp/dist/bin/cli.js

Windows users: Use the full path to the installed CLI:

claude mcp add -e STITCH_API_KEY=your-api-key --transport stdio stitch-pro -- node "C:/Users/YOUR_USER/AppData/Roaming/npm/node_modules/stitch-pro-mcp/dist/bin/cli.js"

Note: MCP servers in Claude Code are configured in ~/.claude.json (local scope), NOT in ~/.claude/settings.json. Use claude mcp add to configure — it handles the correct file automatically.

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "stitch-pro": {
      "command": "npx",
      "args": ["-y", "stitch-pro-mcp"],
      "env": { "STITCH_API_KEY": "your-api-key" }
    }
  }
}

Add to .vscode/mcp.json:

{
  "servers": {
    "stitch-pro": {
      "command": "npx",
      "args": ["-y", "stitch-pro-mcp"],
      "env": { "STITCH_API_KEY": "your-api-key" }
    }
  }
}

Add to ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "stitch-pro": {
      "command": "npx",
      "args": ["-y", "stitch-pro-mcp"],
      "env": { "STITCH_API_KEY": "your-api-key" }
    }
  }
}

Add to ~/.gemini/settings.json:

{
  "mcpServers": {
    "stitch-pro": {
      "command": "npx",
      "args": ["-y", "stitch-pro-mcp"],
      "env": { "STITCH_API_KEY": "your-api-key" }
    }
  }
}

Add to ~/.codex/config.json:

{
  "mcpServers": {
    "stitch-pro": {
      "command": "npx",
      "args": ["-y", "stitch-pro-mcp"],
      "env": { "STITCH_API_KEY": "your-api-key" }
    }
  }
}
{
  "mcpServers": {
    "stitch-pro": {
      "command": "npx",
      "args": ["-y", "stitch-pro-mcp"],
      "env": { "STITCH_API_KEY": "your-api-key" }
    }
  }
}
{
  "mcpServers": {
    "stitch-pro": {
      "command": "npx",
      "args": ["-y", "stitch-pro-mcp"],
      "env": { "STITCH_API_KEY": "your-api-key" }
    }
  }
}

Tip: Set STITCH_API_KEY as a system environment variable and omit the env block entirely.

Troubleshooting

On Windows, npx doesn't work directly as an MCP command. Use one of these approaches:

Option A: Install globally + use node with full path (recommended)

npm install -g stitch-pro-mcp
# Then configure with absolute path to the CLI:
# node C:/Users/YOUR_USER/AppData/Roaming/npm/node_modules/stitch-pro-mcp/dist/bin/cli.js

Option B: Wrap npx with cmd /c

{
  "command": "cmd",
  "args": ["/c", "npx", "-y", "stitch-pro-mcp"]
}
  1. MCP servers are configured in ~/.claude.json, not ~/.claude/settings.json or ~/.claude/.mcp.json

  2. Use claude mcp add CLI command to configure — it writes to the correct file

  3. After adding, restart Claude Code for tools to appear

  4. Verify with: claude mcp list — should show stitch-pro: ✓ Connected

Check for double-start: if you see "Starting stitch-pro" logged twice, you're on v0.1.0 which had a bug where the server started twice. Update to v0.1.2+:

npm install -g stitch-pro-mcp@latest

Tools

Smart (Auto-Orchestration)

Tool

What It Does

sp_auto

The god tool. Describe what you want in plain English — auto-detects framework, library, theme, device type, and chains everything: design system → generation → a11y → responsive → conversion. One call.

sp_analyze

Feed it any HTML. Returns accessibility issues, responsiveness gaps, component mapping potential, and a prioritized tool chain recommendation.

sp_smart_convert

Like sp_to_react/sp_to_vue/sp_to_svelte, but auto-runs a11y fixes and responsive injection first. No manual chaining.

Generation

Tool

What It Does

sp_generate

Generate a UI page with full pipeline — design system, a11y, responsive, framework conversion

sp_flow

Generate multi-screen flows (login → dashboard → settings) in one call

Design System

Tool

What It Does

sp_design_create

Generate a complete design system from a brand description — colors, typography, spacing, rules

sp_design_apply

Apply a design system to existing HTML — CSS variable injection, font/color enforcement

Quality

Tool

What It Does

sp_a11y

WCAG 2.1 AA audit with auto-fix — contrast, ARIA, semantics, touch targets, lang attr

sp_responsive

Inject Tailwind responsive breakpoints for mobile, tablet, desktop

Framework Conversion

Tool

What It Does

sp_to_react

HTML → Next.js/React .tsx with useState, event handlers, component extraction

sp_to_vue

HTML → Vue 3 SFCs with <script setup>, ref(), @event bindings

sp_to_svelte

HTML → SvelteKit components with Svelte 5 $state runes

sp_extract

Map HTML elements to shadcn/radix/MUI components with confidence scoring

Project Management

Tool

What It Does

sp_create_project

Create a new Stitch project. Returns the project ID needed for generation tools.

Listing

Tool

What It Does

sp_projects

List all Stitch projects

sp_screens

List screens in a project

sp_screen

Get a screen's HTML source and image URL


Examples

One prompt, full output

sp_auto("Dark SaaS pricing page in React with shadcn")

  Auto-detects: react, shadcn, dark theme, SaaS
  Auto-chains:
    1. Create dark design system
    2. Enrich prompt with brand tokens
    3. Generate page via Stitch API
    4. WCAG 2.1 AA audit + auto-fix
    5. Responsive breakpoint injection
    6. Convert to Next.js .tsx with shadcn

  → Returns: files[], dependencies{}, a11y report, timings

Analyze before acting

sp_analyze(html)

  → sp_a11y (HIGH): missing lang, no <main>
  → sp_responsive (HIGH): fixed widths
  → sp_extract (MEDIUM): buttons + cards → shadcn
  → Suggested chain: [sp_a11y, sp_responsive, sp_extract, sp_to_react]

Smart convert

sp_smart_convert(html, "vue", "radix")

  Auto-runs: a11y → responsive → extract → Vue 3 emit
  → Returns: .vue SFCs, WCAG compliant, responsive

Manual tools

sp_to_react(html, { componentLibrary: "shadcn" })
sp_a11y(html, { autoFix: true })
sp_design_create({ name: "Acme", primaryColor: "#6366F1" })

Architecture

User prompt
    │
    ▼
┌──────────────────────────────────────────┐
│            stitch-pro-mcp                │
│                                          │
│  ┌─ sp_auto (intent parser) ───────────┐ │
│  │  Detects: framework, library, theme │ │
│  │  device type, dark mode, industry   │ │
│  └─────────────────────────────────────┘ │
│                                          │
│  Pre-Generate                            │
│  └─ Design System Enrichment             │
│                                          │
│  Stitch API Call                         │
│  └─ project.generate() → raw HTML       │
│                                          │
│  Post-Generate                           │
│  ├─ Design System Enforcement (CSS vars) │
│  ├─ Accessibility Audit + Auto-Fix       │
│  └─ Responsive Breakpoint Injection      │
│                                          │
│  Convert (if framework !== html)         │
│  ├─ HTML → ComponentTree (AST-based)     │
│  ├─ Component Library Mapping            │
│  └─ Framework Emitter (React/Vue/Svelte) │
│                                          │
│  Output: production-ready components     │
└──────────────────────────────────────────┘

Pipeline is linear, processors are stateless, Stitch API call is injected — fully testable without hitting the API.


Supported Platforms

Platform

Status

Claude Code

:white_check_mark:

Cursor

:white_check_mark:

VS Code (Copilot)

:white_check_mark:

Windsurf

:white_check_mark:

Gemini CLI

:white_check_mark:

Codex (OpenAI)

:white_check_mark:

Antigravity

:white_check_mark:

OpenCode

:white_check_mark:

Any MCP-compatible client

:white_check_mark:


Development

git clone https://github.com/LuciferDono/stitch-pro-mcp.git
cd stitch-pro-mcp
npm install
npm run typecheck    # Type checking
npm run build        # Build to dist/
npm run dev          # Run in dev mode
npm test             # Run tests

Tech Stack

Dependency

Purpose

@modelcontextprotocol/sdk

MCP server framework (stdio)

@google/stitch-sdk

Stitch API client

parse5

HTML → AST (no browser)

axe-core + jsdom

WCAG accessibility auditing

zod

Runtime input validation (all 18 tools)

color

Color math for design systems

vitest

81 tests across 11 test suites

TypeScript

Full type safety, 29 source files, 4,700+ lines

Stats

  • 18 MCP tools

  • 7 pipeline processors

  • 3 framework emitters (React, Vue, Svelte)

  • 81 tests passing

  • 104 KB package size (compressed)

  • 8 supported platforms

Roadmap

  • npm publish for npx stitch-pro-mcp

  • CI/CD with GitHub Actions

  • GitHub Pages docs site

  • sp_batch — full app frontend in one call (layout + nav + pages + routing)

  • Screenshot-to-code pipeline (screenshot → Stitch → framework output)

  • Figma import via Stitch paste bridge

  • LLM-powered design system generation (Claude API)

  • Streamable HTTP transport for remote deployment

Contributing

PRs welcome. Open an issue first for major changes.

License

MIT

Available Tools

17 tools
sp_a11yAccessibility AuditA
Read-onlyIdempotent

Run WCAG 2.1 AA accessibility audit on HTML and auto-fix issues (contrast, semantics, ARIA, touch targets)

ParametersJSON Schema
NameRequiredDescriptionDefault
htmlYesHTML to audit for accessibility
autoFixNoAutomatically fix issues where possible

TDQS

A3.7/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare readOnlyHint=true and destructiveHint=false, indicating safe read-only operation. The description adds 'auto-fix issues' which might imply mutation, but could be interpreted as returning fixed HTML without side effects. There is no explicit contradiction, but more clarity on the auto-fix behavior would improve transparency.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single sentence of 13 words, no wasted text. It is front-loaded with the key action and scope, making it easy to parse quickly.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the moderate complexity (audit with auto-fix) and no output schema, the description could include what the tool returns (e.g., a report or fixed HTML). It lacks this information, making it slightly incomplete for agents to fully understand the tool's output.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% and parameters are well-documented. The description adds context about audit scope (contrast, semantics, ARIA, touch targets) but does not add specific parameter-level meaning beyond the schema. Baseline of 3 is appropriate since schema does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool runs a WCAG 2.1 AA accessibility audit on HTML and can auto-fix issues, listing specific areas like contrast, semantics, ARIA, and touch targets. It uses a specific verb and resource, distinguishing it from siblings like sp_analyze which might perform general analysis.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies use when an accessibility audit is needed on HTML, but it does not explicitly state when to use or not use it, nor does it compare with sibling tools like sp_auto. No guidance on prerequisites or limitations.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

sp_analyzeAnalyze HTMLA
Read-onlyIdempotent

Analyze HTML and recommend which stitch-pro tools to run. Detects accessibility issues, missing responsiveness, framework conversion opportunities, and component library mapping potential.

ParametersJSON Schema
NameRequiredDescriptionDefault
htmlYesHTML to analyze

TDQS

A4.3/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare readOnlyHint=true, destructiveHint=false, idempotentHint=true. Description adds behavioral context: it analyzes and makes recommendations, detecting categories like accessibility issues and framework conversion. No contradiction with annotations.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences are concise and front-loaded. The first sentence states the core purpose, the second lists detection categories. No unnecessary words.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool has only one parameter, good annotations, and no output schema, the description provides sufficient context for understanding what the tool does and when to use it.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema has 100% coverage for the single parameter 'html' with description 'HTML to analyze'. Description does not add significant extra meaning beyond what the schema provides, so baseline score of 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Description clearly states verb 'analyze' and resource 'HTML', specifies it recommends which stitch-pro tools to run, and lists specific detection categories (accessibility, responsiveness, framework conversion, component library mapping). This distinguishes it from sibling tools that perform specific actions on HTML.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Description implies using this tool when you want to know which specific stitch-pro tools are appropriate for a given HTML snippet. It does not explicitly state when not to use it or provide alternatives, but the context of sibling tools suggests using specific tools after analysis.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

sp_autoAuto — Smart OrchestratorA

Describe what you want in plain English. Automatically chains design system creation, page generation, accessibility fixes, responsive adaptation, and framework conversion based on your intent.

ParametersJSON Schema
NameRequiredDescriptionDefault
promptYesWhat you want — natural language. Example: "Build a pricing page in React with shadcn, dark theme"
projectIdYesStitch project ID
outputDirNoDirectory to organize output files under

TDQS

A4/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations show non-read-only, non-destructive, non-idempotent. Description mentions chaining actions but does not detail side effects, permissions, or what gets modified. Adequate but could be more specific.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two concise sentences, front-loaded with core instruction. No wasted words; every sentence adds value.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For an orchestrator with 3 params and no output schema, description explains the chain of actions sufficiently. Lacks output format details but not critical.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema covers 100% with descriptions. Description adds minimal extra context (e.g., 'natural language' for prompt). Meets baseline but does not significantly enhance beyond schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Description clearly states it auto-chains multiple design and development actions based on natural language intent. Distinct from specific sibling tools like sp_a11y or sp_generate.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Implies use for high-level requests but does not explicitly state when to avoid or prefer alternatives. Sibling tool names provide some context, but description lacks direct guidance.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

sp_create_projectCreate Stitch ProjectA

Create a new Stitch project. Returns the project ID needed for sp_generate and sp_auto.

ParametersJSON Schema
NameRequiredDescriptionDefault
titleYesName for the new Stitch project

TDQS

A4.3/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations provide that it's not read-only, not destructive, not idempotent. Description adds that it returns a project ID needed by other tools, but doesn't disclose additional traits like auth requirements.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences, front-loaded purpose, no redundant information. Every word earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple creation tool with one parameter and no output schema, the description explains functionality, return value, and relationship to sibling tools, making it fully complete.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% with a clear parameter description. The description does not add extra meaning beyond the schema for the single parameter.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action (create), resource (Stitch project), and output (project ID), distinguishing it from siblings like sp_projects (list) and sp_generate (uses project ID).

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Implicitly suggests using this tool before sp_generate and sp_auto, but lacks explicit when-not or alternative guidance. Still clear given sibling context.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

sp_design_applyApply Design SystemA
Read-onlyIdempotent

Apply a previously created design system to existing HTML — injects CSS variables, replaces fonts and colors

ParametersJSON Schema
NameRequiredDescriptionDefault
htmlYesHTML to apply design system to
designSystemIdYesID of the design system to apply

TDQS

A4.1/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already indicate readOnlyHint, destructiveHint, and idempotentHint. The description adds context about what modifications occur (injecting CSS variables, replacing fonts/colors), which is useful. No contradiction with annotations.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single sentence that front-loads the key action and provides specific details without any wasted words.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

No output schema is provided, and the description does not explain what the tool returns (presumably modified HTML). This is a notable gap for a transformation tool. Otherwise, parameter and context signals are sufficient.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%. The description adds meaning beyond the schema by specifying 'previously created design system' and 'existing HTML', providing context that designSystemId must reference an existing system and html is the target.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb 'Apply', the resource 'previously created design system to existing HTML', and specifics ('injects CSS variables, replaces fonts and colors'), distinguishing it from siblings like sp_design_create.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage when you have existing HTML and a design system, but does not explicitly state when to use this tool versus alternatives or provide exclusions.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

sp_design_createCreate Design SystemA

Generate a design system (colors, typography, spacing, rules) from a brand description. Returns a DESIGN.md and an ID for use in generation calls.

ParametersJSON Schema
NameRequiredDescriptionDefault
nameYesName for the design system
brandDescriptionYesNatural language description of the brand
industryNoIndustry (e.g., fintech, healthcare, e-commerce)
personalityNoBrand personality traits
primaryColorNoPrimary brand color (hex)

TDQS

A4.2/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations indicate non-readOnly and non-destructive. The description adds that it creates a design system and returns a file and ID. It does not contradict annotations and provides useful return info, though it could mention that multiple calls create multiple systems.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two concise sentences front-loaded with action and key output. No redundant or irrelevant information.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the 5 parameters and no output schema, the description covers core functionality and output format. It lacks details on error handling or storage, but for a creation tool it is mostly complete.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so baseline is 3. The description mentions 'colors, typography, spacing, rules' which aligns with design system content but does not add additional meaning beyond the schema descriptions for the parameters.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb 'Generate' and the resource 'design system', specifies inputs (brand description) and outputs (DESIGN.md and ID). It distinguishes from sibling tools like sp_design_apply (apply) and sp_generate (generic).

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage context (from brand description, for generation calls) but does not explicitly state when not to use or compare with alternatives. It's clear but not fully explicit.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

sp_extractExtract ComponentsA
Read-onlyIdempotent

Parse HTML into reusable components and map them to shadcn/radix/MUI equivalents with confidence scoring

ParametersJSON Schema
NameRequiredDescriptionDefault
htmlYesHTML to extract components from
libraryYesComponent library to map to
confidenceThresholdNoMinimum confidence for mapping

TDQS

A4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

The description explains the core behavior (parsing, mapping, confidence scoring) beyond what annotations provide. Annotations already indicate read-only and idempotent nature, and the description adds context without contradiction.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, front-loaded sentence that conveys all essential information without waste. Every word earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a tool with 3 parameters, no output schema, and clear annotations, the description is sufficient to understand the tool's purpose and behavior. It could benefit from mentioning the output structure (e.g., an array of components with scores), but the core functionality is well-covered.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so the schema already documents all parameters. The description mentions 'confidence scoring' which relates to confidenceThreshold, but adds no new semantic meaning beyond the schema's parameter descriptions.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool parses HTML into reusable components and maps them to specific libraries with confidence scoring. It distinguishes itself from siblings like sp_to_react by focusing on component extraction and mapping.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage for converting HTML to component library equivalents, but provides no explicit guidance on when to use this tool versus alternatives like sp_to_react, sp_analyze, etc. No when-not-to-use information or prerequisites are given.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

sp_flowGenerate Multi-Screen FlowB

Generate multiple related screens (e.g., login → dashboard → settings) in one call with consistent design

ParametersJSON Schema
NameRequiredDescriptionDefault
promptYesDescription of the multi-screen flow
projectIdYesStitch project ID
screensYesNames/descriptions of each screen in the flow
deviceTypeNoDESKTOP
frameworkNohtml
componentLibraryNonone
accessibilityNo
responsiveNo
designSystemIdNo

TDQS

B3.2/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already indicate readOnlyHint=false (write) and destructiveHint=false. The description adds 'Generate' which aligns with write operation, but does not disclose additional behavior like authentication needs, whether screens are appended or replaced, or rate limits. With annotations present, the bar is lower, but the description adds no behavioral context beyond what annotations imply, resulting in a score of 3.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single sentence of 12 words with an example, making it very concise. There is no wasted text. However, it could be slightly more structured (e.g., bullet points for key attributes) but remains efficient and front-loaded with core purpose.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the complexity of a multi-screen flow generator with 9 parameters and no output schema, the description is too minimal. It does not explain what 'consistent design' means, how the designSystemId is used, what the output format is, or how errors are handled. Essential context for an AI agent to use the tool effectively is missing.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters2/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is only 33% according to context, but the description does not compensate for the missing parameter details. It does not explain the meaning of 'screens' array contents, the effect of 'deviceType', 'framework', 'componentLibrary', 'accessibility', 'responsive', or 'designSystemId'. The brief description adds no value beyond the schema's existing descriptions for the covered parameters.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Description clearly states it generates multiple related screens in one call with consistent design, distinguishing it from single-screen generators like sp_generate via the explicit multi-screen scope and the example (login → dashboard → settings). The title 'Generate Multi-Screen Flow' reinforces this, and the sibling list confirms separate tools for single screens or lists.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No explicit guidance on when to use this tool vs alternatives. The description implies it is for multi-screen flows, but does not specify when to choose sp_flow over sp_generate, sp_screen, or others. No 'when not to use' or comparison to siblings is provided, leaving the agent to infer without clear direction.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

sp_generateGenerate PageA

Generate a UI page with optional design system enforcement, accessibility fixes, responsive breakpoints, and framework conversion

ParametersJSON Schema
NameRequiredDescriptionDefault
promptYesDescription of the page to generate
projectIdYesStitch project ID
deviceTypeNoTarget deviceDESKTOP
frameworkNoOutput frameworkhtml
componentLibraryNoComponent library to map tonone
accessibilityNoRun WCAG 2.1 AA audit and auto-fix
responsiveNoInject responsive breakpoints
designSystemIdNoID of a previously created design system

TDQS

A3.5/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already indicate readOnlyHint=false, destructiveHint=false, idempotentHint=false. The description adds no further behavioral context (e.g., what happens to existing pages, authentication needs, or output format). With annotations present, the bar is lowered, and the description is adequate but not rich.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Single sentence, front-loaded with the core action, no redundant words. Every part earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With 8 parameters, no output schema, and 16 sibling tools, the description is minimal. It covers the optional features but doesn't describe the return value (e.g., generated code or file), which is important since no output schema exists. Also lacks guidance on tool selection among siblings.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so baseline is 3. The description paraphrases some parameters (e.g., 'accessibility fixes' for the boolean, 'framework conversion' for the enum) but adds no new meaning beyond the schema. It does not explain the relationship between parameters or provide usage hints.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states 'Generate a UI page' and lists optional features (design system enforcement, accessibility, responsive, framework conversion). This is specific and distinguishes from sibling tools like sp_a11y, sp_responsive, and sp_to_react which are sub-features.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance on when to use this tool vs alternatives like sp_smart_convert or sp_to_react. The description implies it's the primary generation tool but doesn't explicitly state when-not or provide context for selection among siblings.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

sp_projectsList Stitch ProjectsA
Read-onlyIdempotent

List all projects in your Stitch account

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A3.9/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare readOnlyHint=true, destructiveHint=false, and idempotentHint=true. The description adds no further behavioral context such as performance, caching, or pagination behavior, thus not enhancing the baseline.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single sentence that precisely states the tool's function without any extraneous information. It is concise and front-loaded.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the absence of parameters and an output schema, the description is minimally complete. It does not mention return structure, pagination, or ordering, which could be needed for an AI to use the output effectively.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The tool has zero parameters and the schema description coverage is 100%. The description does not need to add parameter semantics, and the baseline score of 4 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb 'List' and the resource 'projects in your Stitch account', distinguishing it from sibling tools like sp_create_project or sp_design_create which involve creation or design actions.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description does not provide explicit guidance on when to use this tool versus alternatives, nor does it mention exclusion criteria. However, the context of sibling tool names implies its use for listing, which is adequate but not explicit.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

sp_responsiveResponsive AdaptationA
Read-onlyIdempotent

Make HTML responsive by injecting Tailwind breakpoints for mobile, tablet, and desktop

ParametersJSON Schema
NameRequiredDescriptionDefault
htmlYesHTML to make responsive

TDQS

A4.1/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations (readOnlyHint: true, destructiveHint: false, idempotentHint: true) indicate a safe, non-destructive operation. The description adds context by specifying the transformation (injecting Tailwind breakpoints), aligning well with the annotations.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, concise sentence that directly conveys the tool's purpose without any filler. It is front-loaded and efficient.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a tool with one simple parameter, no output schema, and straightforward behavior, the description provides all necessary context. The agent can correctly understand what input to provide and what output to expect.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The only parameter 'html' is fully described in the schema (100% coverage). The tool description does not add extra detail beyond the schema, which is acceptable given the high coverage.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's action ('Make HTML responsive') using specific verb and resource, and distinguishes from sibling tools (e.g., sp_a11y, sp_analyze) by focusing on responsive adaptation with Tailwind breakpoints.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies when to use (making HTML responsive) but does not explicitly state when not to use or mention alternatives. No guidance is given for edge cases or prerequisites.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

sp_screenGet Screen DetailsA
Read-onlyIdempotent

Get a specific screen with its HTML source and image URL

ParametersJSON Schema
NameRequiredDescriptionDefault
projectIdYesStitch project ID
screenIdYesScreen ID
includeHtmlNoInclude HTML source

TDQS

A3.6/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare readOnlyHint=true, destructiveHint=false, and idempotentHint=true. The description adds that it returns HTML source and image URL, but does not disclose any further behavioral traits beyond what annotations convey.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single sentence that is front-loaded and contains no unnecessary words, earning its place efficiently.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple read tool with clear annotations, the description adequately conveys the return values. However, no output schema exists, so the description should ideally provide a bit more context about the response structure, but its current state is sufficient.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, with all parameters described in the schema. The description adds no additional meaning beyond the schema, so baseline score of 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb 'get', the resource 'specific screen', and the data returned 'HTML source and image URL'. It effectively distinguishes from sibling 'sp_screens' which likely lists screens.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives, no prerequisites, and no exclusions. Sibling tools exist but are not mentioned.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

sp_screensList Screens in ProjectB
Read-onlyIdempotent

List all screens in a Stitch project

ParametersJSON Schema
NameRequiredDescriptionDefault
projectIdYesStitch project ID

TDQS

B3.3/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already convey read-only, idempotent, non-destructive nature. Description adds no behavioral traits like pagination, ordering, or output format. Does not contradict annotations.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Single sentence with no redundancy. Front-loaded with purpose. Every word earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Adequate for a simple list tool with one parameter. Lacks details on response content (e.g., screen names/IDs). No output schema, so description could provide more. Acceptable but not thorough.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema covers the parameter description fully (100%). Description does not add extra meaning beyond 'Stitch project ID' but baseline is 3 due to high coverage.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Description clearly states the verb 'List' and resource 'screens' in a Stitch project. It distinguishes from siblings like sp_screen (singular) and sp_projects (list projects).

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance on when to use this tool versus alternatives like sp_screen for a specific screen or sp_projects for project list. Lacks context on prerequisites or scope.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

sp_smart_convertSmart ConvertA
Read-onlyIdempotent

Converts HTML to a framework, but auto-detects if it needs accessibility fixes and responsive adaptation first. Runs the full quality pipeline before conversion — no manual chaining needed.

ParametersJSON Schema
NameRequiredDescriptionDefault
htmlYesHTML to convert — auto-detects needed pre-processing
frameworkYesTarget framework
componentLibraryNonone
appRouterNoNext.js App Router (React only)

TDQS

A4.2/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already indicate read-only, non-destructive, idempotent. The description adds that it auto-detects and runs a quality pipeline, providing useful behavioral context beyond annotations.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two concise sentences with key information front-loaded; no unnecessary words.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Describes the core value well, but lacks mention of output format or optional parameters like componentLibrary and appRouter.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is high (75%), and the description doesn't add meaning beyond schema fields, like clarifying componentLibrary or appRouter purpose.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states it converts HTML to a framework with auto-detection of accessibility and responsive needs, distinguishing it from sibling tools like sp_to_react or sp_a11y.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

It implies use when you want a one-step conversion with pre-processing, but does not explicitly mention when simpler alternatives like sp_to_react are preferable.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

sp_to_reactConvert to ReactA
Read-onlyIdempotent

Convert HTML/Tailwind to Next.js/React components with proper state, props, hooks, and optional shadcn/radix/MUI mapping

ParametersJSON Schema
NameRequiredDescriptionDefault
htmlYesHTML/Tailwind source to convert
componentLibraryNonone
appRouterNoUse Next.js App Router (React only)

TDQS

A4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations indicate readOnly, non-destructive, idempotent behavior. The description adds that the tool generates React components with state, props, hooks, and optional library mapping, providing context beyond annotations without contradiction.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single sentence that conveys all essential information without extraneous text, effectively front-loading the key action and scope.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool has only 3 parameters and no output schema, the description provides sufficient context for a conversion tool, though it could briefly mention the output type (e.g., code string). Overall, it is fairly complete.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 67% (2 of 3 parameters described). The description doesn't add significant details beyond the schema for parameters, but it contextualizes the tool's purpose, which helps. The parameter semantics are adequately covered by schema and description combined.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool converts HTML/Tailwind to Next.js/React components, listing specific features like state, props, hooks, and optional component libraries, which distinguishes it from sibling tools like sp_to_svelte and sp_to_vue.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage when converting HTML/Tailwind to React/Next.js but lacks explicit guidance on when to use this tool over alternatives like sp_to_svelte or sp_to_vue, nor does it mention when not to use it.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

sp_to_svelteConvert to SvelteA
Read-onlyIdempotent

Convert HTML/Tailwind to SvelteKit components with Svelte 5 runes ($state) and optional component library mapping

ParametersJSON Schema
NameRequiredDescriptionDefault
htmlYesHTML/Tailwind source to convert
componentLibraryNonone
appRouterNoUse Next.js App Router (React only)

TDQS

A3.8/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare readOnlyHint=true, destructiveHint=false, idempotentHint=true. The description adds that the conversion uses Svelte 5 runes and optional library mapping, which is useful but does not deeply elaborate on behavioral traits like output format or side effects.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

A single, front-loaded sentence that efficiently conveys the tool's purpose and key features with no unnecessary words.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given three parameters and the presence of annotations, the description is fairly complete, covering the conversion target, framework specifics, and optional library mapping. However, it lacks details on output format and does not address the potentially misleading appRouter parameter.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 67%, so baseline is 3. The description mentions 'optional component library mapping' correlating to the componentLibrary parameter, but does not clarify the appRouter parameter (which is for Next.js, potentially confusing in a Svelte context).

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states it converts HTML/Tailwind to SvelteKit components with Svelte 5 runes and optional library mapping. It distinguishes from siblings like sp_to_react and sp_to_vue by specifying the target framework.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies use when targeting SvelteKit but does not explicitly state when to use this tool versus alternatives, nor does it provide exclusions or prerequisites.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

sp_to_vueConvert to VueA
Read-onlyIdempotent

Convert HTML/Tailwind to Vue 3 Single File Components with Composition API and optional component library mapping

ParametersJSON Schema
NameRequiredDescriptionDefault
htmlYesHTML/Tailwind source to convert
componentLibraryNonone
appRouterNoUse Next.js App Router (React only)

TDQS

A4.1/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations provide readOnlyHint=true, destructiveHint=false, idempotentHint=true, indicating a safe, read-only conversion. The description adds behavioral context by specifying the output as Vue 3 SFCs with Composition API and optional library mapping, which goes beyond annotations. No contradictions.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, well-structured sentence that front-loads the core action ('Convert HTML/Tailwind to Vue 3 Single File Components') and includes key modifiers. Every part earns its place with no wasted words.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

The description covers main purpose and component library mapping, but does not explain the output format beyond 'Single File Components' or address the appRouter parameter's relevance to Vue. With no output schema, the agent lacks details on return values. The appRouter parameter's misleading description further reduces completeness.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The description adds meaning for the componentLibrary parameter ('optional component library mapping'), which lacks a description in the schema. However, the appRouter parameter's schema description says 'Use Next.js App Router (React only)', which is misleading for a Vue tool, and the description does not clarify. With 67% schema coverage, the description partially compensates but leaves ambiguity.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool converts HTML/Tailwind to Vue 3 Single File Components with Composition API and optional component library mapping. The verb 'convert' and specific target 'Vue 3 SFCs' distinguish it from sibling tools like sp_to_react and sp_to_svelte.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage for Vue conversions via tool name and target mention, and specifies the output format (Composition API, library mapping). However, it does not explicitly state when not to use or provide direct alternatives among siblings. No exclusions or prerequisites are mentioned.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 17 tool updatesv0.2.0
    • First observedsp_a11y
    • First observedsp_analyze
    • First observedsp_auto
    • First observedsp_create_project
    • First observedsp_design_apply
    • First observedsp_design_create
    • First observedsp_extract
    • First observedsp_flow
    • First observedsp_generate
    • First observedsp_projects
    • First observedsp_responsive
    • First observedsp_screen
    • First observedsp_screens
    • First observedsp_smart_convert
    • First observedsp_to_react
    • First observedsp_to_svelte
    • First observedsp_to_vue

TDQS

A4/5.0

Scored across 17 tools

Disambiguation5/5

Each tool has a clearly distinct purpose: accessibility, analysis, design system creation/application, page generation, framework conversion, and project/screen management. No two tools do the same thing.

Naming Consistency5/5

All tools use the 'sp_' prefix followed by descriptive lower_case names with underscores. Verbs are consistently placed (e.g., 'create_', 'to_', 'design_') and follow a predictable pattern.

Tool Count5/5

17 tools is well-scoped for a comprehensive UI development toolkit. Each tool covers a specific operation and contributes to the overall workflow without redundancy.

Completeness4/5

The tool set covers the full lifecycle from analysis to generation, enhancement, and conversion. Minor gaps exist (e.g., no delete or update for projects/screens), but core workflows are complete.

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    F
    maintenance
    An automated MCP server for Google Stitch that enables AI-driven UI design generation, accessibility audits, and design system management. It streamlines workflows for creating responsive screens, extracting design tokens, and maintaining visual consistency across professional web projects.
    59
    31
    Apache 2.0
  • A
    license
    Not graded
    quality
    D
    maintenance
    A universal MCP server for Google Stitch that enables AI-powered UI/UX design generation by extracting design context and metadata from existing screens. It allows users to fetch screen code and images to create consistent, styled UI components across multiple projects.
    464
    122
    Apache 2.0
  • F
    license
    Not graded
    quality
    D
    maintenance
    An MCP server that exposes Google Stitch's AI-powered UI design capabilities as local tools. It enables project management, screen generation/editing, and design system operations by forwarding requests to Google's Stitch API.
    2
    -