Skip to main content
Glama

frameshot

npm version npm downloads GitHub stars License: MIT

Give your AI agent eyes. Render components with real Vite imports, Tailwind, and CSS Modules — right in your terminal or AI chat. No story files required.

Claude Code

claude mcp add frameshot -- npx frameshot-mcp@latest
{
  "mcpServers": {
    "frameshot": {
      "command": "npx",
      "args": ["frameshot-mcp@latest"]
    }
  }
}

Watch mode — live AI feedback loop

The AI edits a file, saves it, and immediately sees how it looks — without you calling anything.

watch_start({ patterns: ["src/components/Button.tsx"] })
→ renders on every save → call watch_get_latest("watch-1") to see it

The agent fixes → saves → sees → fixes again. You just watch.


Related MCP server: rendex-mcp

GitHub Action — free Chromatic alternative

Two lines. Auto-detects changed components. Posts before/after/diff screenshots directly in the PR comment.

- uses: actions/checkout@v7
  with:
    fetch-depth: 0
- uses: kamegoro/frameshot@v0.8.0

Changed .tsx, .jsx, .vue, .svelte, .astro, .mdx files detected automatically. No Storybook. No signup. Free forever.

- uses: kamegoro/frameshot@v0.8.0
  with:
    paths: "./src/components/*.tsx"       # default: auto-detect
    extensions: ".jsx,.tsx,.vue"          # default: .jsx,.tsx,.vue,.svelte,.astro,.mdx
    exclude: "*.test.*,*.spec.*"          # default: *.test.*,*.spec.*,*.stories.*

Render any component

Point to a file. Get a screenshot. Full Vite pipeline.

render_file("src/components/Dashboard.tsx")

Resolves your project's real imports, Tailwind config, CSS Modules, and path aliases — not a CDN polyfill.


Using with Claude

After installing, just describe what you want:

"Render src/components/PricingCard.tsx — does it look right?"
"Refactor the layout to CSS grid and show me before/after"
"Watch Button.tsx while I edit — tell me when something looks off"

Claude calls render_file, diff_component, watch_start, or any other tool automatically.


Try it without an AI client

Works standalone on any React / Vue / Svelte project:

npx frameshot render src/components/Button.tsx
npx frameshot diff src/components/Header.tsx
npx frameshot catalog src/components/ --recursive

Images display inline in iTerm2, Kitty, and Sixel terminals. Saved to .frameshot/ by default.

First run installs Playwright's Chromium (~150MB). Subsequent renders are fast.


Tools

Tool

What it does

render_file

Render a file via Vite — real imports, Tailwind, CSS Modules

diff_component

Pixel diff before/after — % changed, highlighted pixels

watch_start

Watch files — auto-render on every save

watch_get_latest

Get the latest render from a watch session

render_catalog

Render every component in a directory at once

screenshot_url

Screenshot any URL — localhost, staging, prod

render_responsive

Mobile + tablet + desktop in one call

render_theme

Light + dark mode side by side

audit_a11y

axe-core accessibility audit (WCAG violations)

render_component

Render a self-contained code snippet

Tool

What it does

render_file

Render a project file with full Vite dependency resolution

render_component

Render a self-contained snippet → screenshot

screenshot_url

Screenshot any URL with retry and network idle wait

render_responsive

Mobile + tablet + desktop in one call

render_variants

Multiple prop/state variants at once

render_theme

Light + dark mode side by side

render_interaction

Simulate click/hover/type, then screenshot

render_grid

Multiple snippets in a labeled grid

render_matrix

Viewport × theme matrix in one call

capture_animation

Multi-frame CSS animation capture

diff_component

Before/after pixel diff with % changed

diff_reference

Compare render against a reference image (Figma QA)

audit_a11y

axe-core accessibility audit

perf_audit

DOM count, depth, render timing

render_catalog

Render all components in a directory

snapshot_save

Save a render as named baseline

snapshot_check

Compare current render against saved baseline

snapshot_list

List all saved snapshots

watch_start

Start watching files — renders on every save

watch_stop

Stop a watch session

watch_get_latest

Get the latest rendered screenshot from a session

watch_list

List active watch sessions


Performance

Scenario

Time

Warm render (Vite server cached)

~200–500ms

CDN fallback (no Vite)

~120ms

Cold start (first render)

~1–3s

Subsequent renders (same session)

~200ms

Vite server is cached per project root. Browser pool stays warm between MCP calls.


vs. alternatives

Storybook

Chromatic

Browser MCP

frameshot

Setup

Stories + config

SaaS signup

Browser install

npx — done

Speed

Dev server startup

Cloud round-trip

2–5s

~200ms warm

Cost

Free (labor cost)

$149–800+/mo

Free

Free forever

Story files needed

Yes

Yes

No

No

Real imports resolved

Via Storybook

Via Storybook

No

Via Vite

Works offline

Yes

No

Yes

Yes

Watch mode

No

No

No

Yes

AI-native (MCP)

No

No

Full-page only

Component-level


Development

git clone https://github.com/kamegoro/frameshot.git
cd frameshot && npm install
npx playwright install chromium
npm run build && npm test

See CONTRIBUTING.md for architecture details.


MIT © kamegoro

Available Tools

22 tools
audit_a11yA

Run an accessibility audit (axe-core) on a rendered component. Returns WCAG violations with impact level, description, and affected HTML nodes. Use this to catch a11y issues before shipping.

ParametersJSON Schema
NameRequiredDescriptionDefault
codeYesComponent code to audit
frameworkNoFramework: html, react, vue, or sveltereact
widthNoViewport width (px)
heightNoViewport height (px)

TDQS

A4.2/5.0
Behavior4/5

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

Describes that it uses axe-core and returns violation details. No annotations exist, so description carries the burden. Lacks mention of side effects, but it's a read-only audit.

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 with action and result, no filler. Efficient.

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?

Covers purpose, return values, and usage. With 4 parameters and no output schema, description is adequate. Could mention rendering assumption or framework support, but schema covers framework enum.

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 3. Description adds minimal extra meaning beyond schema: 'on a rendered component' hints code is a component. No further parameter details.

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?

Clearly states it runs an accessibility audit using axe-core on a rendered component, returning WCAG violations. Distinguishes itself from sibling rendering tools by being an audit tool.

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?

Explicitly says 'Use this to catch a11y issues before shipping,' giving context. No mention of when not to use or alternatives, but no sibling audit tools exist.

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

capture_animationB

Capture multiple frames of a CSS animation or transition over time. Returns sequential screenshots to verify animation behavior, timing, and smoothness.

ParametersJSON Schema
NameRequiredDescriptionDefault
codeYesComponent code with CSS animations/transitions
frameworkNoFramework: html, react, vue, or sveltereact
framesNoNumber of frames to capture
durationNoTotal capture duration in ms
widthNoViewport width (px)
heightNoViewport height (px)

TDQS

B3.4/5.0
Behavior2/5

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

No annotations are provided, so the description must disclose behavioral traits. It states it captures frames sequentially and returns screenshots, but does not mention whether the operation is read-only, destructive, requires specific permissions, or has rate limits. For a capture tool, safety and idempotency are not addressed.

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 two sentences, front-loads the purpose, and each sentence adds value. It is efficient but could be slightly more structured or include a brief example.

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 tool has 6 parameters and no output schema, the description explains the output (sequential screenshots) and use case, but lacks details on return format (e.g., data URIs), limits on frames/duration, and prerequisites for input code. It is adequately complete but not fully comprehensive.

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 the baseline is 3. The description adds context about verifying animation behavior but does not enhance understanding of individual parameters beyond what the schema already provides.

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 captures multiple frames of CSS animations/transitions and returns sequential screenshots to verify behavior, timing, and smoothness. It specifies the verb 'capture' and resource 'CSS animation', distinguishing it from sibling tools like screenshot_url (static) or render_interaction (interaction recording).

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 mentions the use case (verify animation behavior, timing, smoothness) but lacks explicit guidance on when to use this tool versus alternatives, such as when to choose capture_animation over render_interaction or screenshot_url. No prerequisites or exclusions are provided.

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

diff_componentA

Visual regression test: render before/after code and return a pixel diff image with percentage changed. Use this during refactoring to catch unintended visual changes.

ParametersJSON Schema
NameRequiredDescriptionDefault
beforeYesComponent code BEFORE the change
afterYesComponent code AFTER the change
frameworkNoFramework: html, react, vue, or sveltereact
widthNoViewport width (px)
heightNoViewport height (px)

TDQS

A4.2/5.0
Behavior4/5

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

With no annotations, the description discloses the core behavior: rendering code and returning a diff image. It doesn't cover error handling or async behavior, but the primary output is well-described.

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 two concise sentences, front-loaded with the primary purpose. No unnecessary words or redundancy.

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 5 parameters and no output schema, the description covers the overall goal and return type (diff image). However, it could hint at the exact format (e.g., URL, base64) for 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?

Schema coverage is 100%, so the baseline is 3. The description does not add additional meaning beyond what the schema descriptions provide for each 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 tool performs visual regression testing by rendering before/after code and returning a pixel diff image with percentage changed. It distinguishes from sibling tools like diff_reference and audit_a11y by focusing on component-level visual diffs.

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 explicitly advises usage during refactoring to catch unintended visual changes. While it doesn't mention when not to use or alternatives, the context is clear and sufficient for typical scenarios.

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

diff_referenceA

Compare rendered component output against a reference image (e.g. from Figma export or previous snapshot). Returns pixel diff percentage and pass/fail status. Use this for design QA — verify your component matches the design.

ParametersJSON Schema
NameRequiredDescriptionDefault
codeYesComponent code to render and compare
frameworkNoFramework: html, react, vue, or sveltereact
referenceImageYesReference image as base64-encoded PNG
widthNoViewport width (px)
heightNoViewport height (px)
thresholdNoPixel matching threshold (0-1). Lower = stricter. Default 0.1.
darkModeNoRender with dark mode
tailwindVersionNoTailwind CSS version (3 or 4)3

TDQS

A4/5.0
Behavior3/5

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

No annotations provided, so description must cover behavioral traits. It states returns pixel diff percentage and pass/fail status, but does not mention side effects, auth, or rate limits. Adequate for a simple diff tool.

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 with purpose and return values, no unnecessary 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?

Given no output schema, description mentions key return items (pixel diff percentage, pass/fail) but could detail data structure. Sufficient for tool complexity; covers main purpose clearly.

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% parameter description coverage, so baseline is 3. Description adds no additional meaning for parameters beyond what schema already provides.

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?

Clearly describes the verb 'compare' and the objects 'rendered component output' and 'reference image', with return values. Distinguishes from sibling 'diff_component' by specifying reference image usage.

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?

States use case 'design QA' and 'verify component matches design', providing clear context. Lacks explicit when-not-to-use or alternatives among siblings.

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

perf_auditA

Analyze component performance: DOM element count, tree depth, render time, script/stylesheet count. Use this to catch bloated components before they ship.

ParametersJSON Schema
NameRequiredDescriptionDefault
codeYesComponent code to audit
frameworkNoFrameworkreact
widthNoViewport width (px)
heightNoViewport height (px)

TDQS

A3.5/5.0
Behavior2/5

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

No annotations provided, so description bears full burden; it mentions metrics but does not disclose side effects, permissions, or whether the tool is read-only, leaving behavioral traits unclear.

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?

Single sentence is concise and front-loaded with purpose and output metrics, no unnecessary words; could mention framework support but efficient overall.

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 no output schema and straightforward tool, description covers purpose, metrics, and usage timing; lacks comparison with siblings but adequate for simpler tool.

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% description coverage for all 4 parameters, so baseline is 3; description adds no extra meaning beyond schema, focusing on output metrics rather than input details.

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 'component performance', lists specific metrics (DOM count, tree depth, render time, script/stylesheet count), and distinguishes from sibling tools like audit_a11y and capture_animation.

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?

Description includes 'use this to catch bloated components before they ship', implying appropriate context but lacks explicit when-not-to-use or alternatives among sibling tools.

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

render_catalogA

Scan a directory for component files (.jsx/.tsx/.vue/.svelte/.html) and render a screenshot of each. Returns a visual catalog — like Storybook but zero-config. Use this to quickly audit all components in a folder.

ParametersJSON Schema
NameRequiredDescriptionDefault
directoryYesAbsolute path to the directory to scan
recursiveNoScan subdirectories recursively
widthNoViewport width (px)
heightNoViewport height (px)
darkModeNoRender with dark mode
tailwindVersionNoTailwind CSS version (3 or 4)3

TDQS

A3.9/5.0
Behavior3/5

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

No annotations are provided, so the description carries full burden. It describes scanning and rendering but omits details about output format, storage, or side effects. It suggests a read-only operation but lacks explicit safety guarantees.

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 with no unnecessary words. The first sentence explains the action, the second the use case. Highly efficient 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 no output schema, the description should clarify the return format. It says 'Returns a visual catalog' but does not specify structure (e.g., screenshot paths, data URI). Missing details on error handling or large directory performance, but adequate for a simple tool.

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 descriptions for each parameter. The description adds context about file extensions (.jsx/.tsx/.vue/.svelte/.html) not in schema, but does not otherwise enrich parameter meaning beyond the 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?

The description clearly states the tool scans a directory for component files and renders screenshots, using specific verb+resource. It distinguishes itself from siblings like render_component by emphasizing batch auditing and zero-config.

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 explicitly says to use for quick audit of all components in a folder, implying batch context. However, it does not mention when to avoid using it (e.g., for single components) or list alternatives, though the sibling context partially fills this.

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

render_componentA

Instantly render a React/Vue/HTML component and return screenshots across browser engines. Zero setup needed — just pass your code. Tailwind CSS is built-in. Use this to visually verify UI code without starting a dev server.

ParametersJSON Schema
NameRequiredDescriptionDefault
codeYesComponent code to render
frameworkNoFramework: html, react, vue, or sveltereact
enginesNoBrowser engines to render in. Use ["chromium","firefox","webkit"] for cross-browser check.
widthNoViewport width (px)
heightNoViewport height (px)
fullPageNoCapture full scroll height
darkModeNoRender with Tailwind dark mode (adds 'dark' class to html)
colorSchemesNoRender both: ["light","dark"] returns 2 screenshots for comparison
cssNoCustom CSS to inject (design tokens, variables, etc)
tailwindVersionNoTailwind CSS version (3 or 4)3
mockNoMock network responses. Keys: URL pattern (path '/api/users', glob '**/api/*', or full URL). Values: response body (auto-serialized as JSON) or { status, contentType, body, headers }.

TDQS

A4/5.0
Behavior4/5

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

With no annotations, the description carries full burden. It discloses instant rendering, zero setup, built-in Tailwind, and multi-engine screenshots, but doesn't cover failure modes, rate limits, or whether it's read-only. The core behavior is well communicated.

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?

Three concise sentences front-loaded with the core action and key features. No redundant or wasted words.

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?

Despite 11 parameters, the description omits critical context about return format (e.g., how screenshots are returned) and does not mention optional features like mocking, custom CSS, or color schemes. Lacks completeness for a complex tool without output schema.

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 adds minimal value beyond the schema (e.g., 'Tailwind CSS is built-in' aligns with tailwindVersion param). No new semantic insight.

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 renders a component and returns screenshots across browser engines. It distinguishes from sibling tools like render_catalog or render_grid by focusing on single-component verification without a dev server.

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 gives context to use it for visual verification of UI code and notes zero setup, but does not explicitly mention when not to use it or compare to alternatives like render_catalog for multiple components.

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

render_fileA

Render a component file with full dependency resolution. Uses your project's Vite config to resolve imports, path aliases, CSS modules, and node_modules. Falls back to CDN-based rendering if Vite is unavailable. Auto-detects framework from file extension.

ParametersJSON Schema
NameRequiredDescriptionDefault
pathYesAbsolute path to the component file
propsNoProps to pass to the component
widthNoViewport width (px)
heightNoViewport height (px)
darkModeNoRender with dark mode
tailwindVersionNoTailwind CSS version (3 or 4)3
projectRootNoProject root directory override (defaults to auto-detect from file path)
mockNoMock network responses. Keys: URL pattern (path '/api/users', glob '**/api/*', or full URL). Values: response body (auto-serialized as JSON) or { status, contentType, body, headers }.
outputPathNoAbsolute path to save the PNG (e.g. '/tmp/button.png'). When set, returns a text summary instead of base64 image data — use this in long agent sessions to avoid context bloat.

TDQS

A4/5.0
Behavior4/5

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

With no annotations, the description carries full burden. It discloses key behaviors: uses Vite config, falls back to CDN, auto-detects framework, resolves imports, path aliases, CSS modules, and node_modules. Missing details on error handling or permissions, but overall good.

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?

Four sentences, each informative and necessary. Front-loaded with the core purpose. No wasted 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 9 parameters and no output schema, the description explains the rendering mechanism and key features. However, it does not clarify the return format (base64 vs. text summary when outputPath is set) beyond what the schema for outputPath says. Minor gap.

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 adds context like 'Uses your project's Vite config' relating to path and projectRoot, but does not elaborate on each parameter beyond what the schema provides.

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 renders a component file with full dependency resolution, using Vite config, CDN fallback, and auto-detecting framework. This distinguishes it from sibling tools like render_component which may not handle dependency resolution.

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 file-based rendering with dependencies but does not explicitly contrast with alternatives or provide exclusions. It lacks guidance on when to use this versus other render tools.

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

render_gridA

Render multiple code snippets in a grid layout and return a single combined image. Use this to compare components side-by-side (e.g. design system overview, theme comparison).

ParametersJSON Schema
NameRequiredDescriptionDefault
cellsYesArray of cells to render in the grid
frameworkNoFrameworkreact
columnsNoNumber of columns in the grid
cellWidthNoWidth of each cell (px)
cellHeightNoHeight of each cell (px)

TDQS

A4/5.0
Behavior3/5

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

With no annotations provided, the description carries full burden. It states it returns a combined image, which is good. But it doesn't disclose whether code is executed, potential side effects, or error handling. The description is minimal and could benefit from more detail, but the tool's purpose is straightforward.

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 two sentences, front-loaded with the key action and resource. Every sentence adds value with no redundancy or filler. It is appropriately concise.

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 rendering tool with 5 parameters (1 required) and no output schema, the description provides adequate context. It covers the main functionality and use case. Missing details like error behavior or performance are not critical given the tool's nature.

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 little beyond the input schema parameters. It implies grid layout (columns, sizes) but doesn't elaborate on framework or enum values. Since schema description coverage is 100%, baseline is 3. The description doesn't compensate with extra 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 the tool renders multiple code snippets in a grid layout and returns a combined image. It specifies the primary use case (comparing components side-by-side), and this differentiates it from sibling tools like render_component or render_catalog which focus on individual or catalog rendering.

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 explicitly says 'Use this to compare components side-by-side', providing clear when-to-use guidance. However, it does not mention when not to use it or suggest alternatives, which would be useful given the many sibling tools.

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

render_interactionA

Render a component, simulate user interactions (click, hover, focus, type), then screenshot the result. Use this to verify hover states, dropdowns, modals, form inputs.

ParametersJSON Schema
NameRequiredDescriptionDefault
codeYesComponent code to render
frameworkNoFrameworkreact
interactionsYesSequence of interactions to perform
widthNoViewport width (px)
heightNoViewport height (px)

TDQS

A3.6/5.0
Behavior3/5

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

No annotations are provided, so the description must carry the full burden. It discloses that it renders, simulates interactions, and screenshots, but does not mention any side effects, resource implications, or limitations (e.g., whether it destroys previous state, requires authentication, or has rate limits). The description is adequate but lacks depth beyond the obvious.

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 two sentences long, with the first sentence stating the core action and the second providing use cases. It is front-loaded, concise, and every sentence adds value. 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?

The description covers the tool's purpose, actions, and example use cases. It does not mention the return format (e.g., that it returns an image), but the tool's name and context imply a screenshot. Given the complexity (5 parameters, interactions array) and no output schema, the description is mostly complete but could mention the output type.

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 input schema has 100% description coverage, so the schema already explains all parameters effectively. The description adds no additional meaning beyond summarizing the interaction types (click, hover, focus, type) already present in the enum. With high schema coverage, this is a baseline score.

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

Purpose4/5

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

The description clearly states the tool renders a component, simulates user interactions, and screenshots the result. It also lists specific use cases (hover states, dropdowns, etc.), but does not explicitly differentiate from similar sibling tools like render_component or render_matrix, which limits its purpose clarity.

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 includes 'Use this to verify hover states, dropdowns, modals, form inputs,' providing explicit guidance on when to use the tool. However, it lacks information on when not to use it or alternatives among the sibling tools, such as using render_component for static rendering or audit_a11y for accessibility checks.

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

render_matrixB

Render a component across multiple viewports AND themes in one call. Returns a grid of screenshots (viewports x themes) for comprehensive responsive + theme verification.

ParametersJSON Schema
NameRequiredDescriptionDefault
codeYesComponent code to render
frameworkNoFramework: html, react, vue, or sveltereact
viewportsNoViewports to render: preset names ('mobile','tablet','desktop') or custom {width, height}
themesNoThemes to render for each viewport
cssNoCustom CSS to inject (design tokens, variables, etc)
tailwindVersionNoTailwind CSS version (3 or 4)3

TDQS

B3.3/5.0
Behavior2/5

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

No annotations provided, so the description must disclose behavioral traits. It mentions 'returns a grid of screenshots' but doesn't specify return format, error handling, permissions needed, or side effects such as whether code is executed or rendered statically.

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, clear sentence that efficiently conveys the tool's purpose. Could be slightly improved by separating the return format, but overall concise.

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 tool's complexity (6 parameters, no output schema), the description lacks details on return format, error cases, and how the grid is returned (e.g., image URLs). It covers the basic purpose but leaves out important context.

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 descriptions for all 6 parameters. The description adds no extra parameter-level details beyond the schema. Baseline 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?

The description clearly states the tool renders a component across multiple viewports and themes in one call and returns a grid of screenshots. It distinguishes from sibling tools like render_component (single viewport/theme) and render_responsive (viewports only).

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 for comprehensive responsive and theme verification, but does not explicitly state when to use this tool versus alternatives like render_responsive or render_theme, 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.

render_responsiveA

Render a component at mobile, tablet, and desktop sizes in one call. Returns 3 screenshots for responsive verification.

ParametersJSON Schema
NameRequiredDescriptionDefault
codeYesComponent code to render
frameworkNoFramework: html, react, vue, or sveltereact
devicesNoDevice sizes to render

TDQS

A3.8/5.0
Behavior2/5

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

With no annotations provided, the description must cover behavioral traits. It mentions it 'Returns 3 screenshots for responsive verification' but does not specify output format (URLs or images), synchronization, or side effects. Given the absence of annotations, more detail is needed for full 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 exceptionally concise with two sentences, front-loading the core purpose immediately. No unnecessary words or repetition.

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 rendering tool with full schema coverage, the description adequately explains the tool's purpose and output. It lacks details about output format but is otherwise complete given the tool's simplicity.

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 the parameters are already well-documented. The description adds no additional semantics beyond what the schema provides (e.g., devices default already implies sizes). 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?

The description clearly states 'Render a component at mobile, tablet, and desktop sizes in one call.' It specifies the verb (render), the resource (component), and the scope (three sizes), which distinguishes it from sibling tools like render_component that likely render at a single size.

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 when to use this tool: when responsive verification across three sizes is needed in one call. It provides clear context but does not explicitly state when not to use it or mention alternatives among the many sibling rendering tools.

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

render_themeA

Render a component in both light and dark mode side-by-side. Returns 2 labeled screenshots for quick theme verification.

ParametersJSON Schema
NameRequiredDescriptionDefault
codeYesComponent code to render
frameworkNoFrameworkreact
widthNoViewport width (px)
heightNoViewport height (px)

TDQS

A4/5.0
Behavior3/5

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

No annotations are provided, so the description carries full burden. It states the tool renders a component and returns screenshots, which is transparent for a rendering tool. However, it does not disclose that it executes arbitrary code (security implication) or any other 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?

Two sentences, front-loaded with the core function and output. Every word is necessary; no redundancy.

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 4 well-described parameters and no output schema, the description provides a clear purpose and output format. It could be slightly more complete by comparing to sibling tools, but it is adequate for a straightforward tool.

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 the baseline is 3. The description adds context about rendering in both themes but does not elaborate on parameter specifics beyond what the schema already provides.

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 renders a component in both light and dark modes side-by-side and returns 2 labeled screenshots. This specific verb+resource+outcome distinguishes it from sibling tools like render_component or render_responsive.

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 'quick theme verification,' but does not explicitly contrast with alternatives like render_component or diff_component. No when-not-to-use guidance is provided.

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

render_variantsA

Render multiple variants of a component (different props/states) in one call. Returns a screenshot for each variant. Use this to verify buttons in all states, theme variations, etc.

ParametersJSON Schema
NameRequiredDescriptionDefault
codeYesComponent code (must export a function that accepts props)
variantsYesArray of variants to render
frameworkNoFramework: html, react, vue, or sveltereact
widthNoViewport width (px)
heightNoViewport height (px)

TDQS

A3.9/5.0
Behavior3/5

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

With no annotations, the description carries full burden. It discloses that the tool returns screenshots, but does not elaborate on side effects, permissions, or output format details (e.g., how screenshots are returned). This is adequate but minimal.

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 two sentences long, front-loaded with the key action and result, and contains no unnecessary words. Every sentence is valuable.

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 explains the tool's purpose and basic output, but lacks detail on the exact return format (e.g., base64, URL) and does not cover edge cases. For a tool with 5 parameters and no output schema, this is somewhat insufficient.

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 the description adds no extra meaning beyond the schema. The tool description only gives a high-level usage without explaining parameter details further. Baseline 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?

The description clearly states the tool renders multiple variants of a component and returns screenshots. It uses specific verbs and distinguishes from siblings like 'render_component' by emphasizing multiple variants.

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 explicitly says 'Use this to verify buttons in all states, theme variations, etc.', providing clear usage context. It does not explicitly mention when not to use or contrast with alternatives, but the sibling list provides additional context.

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

screenshot_urlA

Take a screenshot of a URL (e.g. localhost:3000) across multiple browser engines in parallel. Supports waiting for specific elements and retry with exponential backoff for dev servers that may be slow to start.

ParametersJSON Schema
NameRequiredDescriptionDefault
urlYesURL to screenshot
enginesNoBrowser engines
widthNoViewport width (px)
heightNoViewport height (px)
fullPageNoCapture full scroll height
waitForSelectorNoWait for a specific CSS selector to appear before capturing (e.g. '#app', '.loaded')
waitForNetworkIdleNoWait for network to settle before capturing
retryOnErrorNoNumber of retries with exponential backoff (300ms, 600ms, 1200ms...) if the page fails to load

TDQS

A4.4/5.0
Behavior4/5

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

Discloses key behaviors: parallel execution across engines, waiting for elements, network idle, and exponential backoff retry. No annotations exist, so description carries full burden; it does well but lacks mention of output format or potential errors.

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, no fluff. First sentence states main purpose, second adds key features. Efficient and well-organized.

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 8 parameters and no output schema, the description covers core functionality but does not describe the return value (e.g., image data or path). Otherwise comprehensive for a screenshot tool.

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?

All 8 parameters have schema descriptions (100% coverage). The description adds context by linking parameters to features (e.g., retryOnError for slow servers, waitForSelector for elements). Adds value 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?

The description clearly states the core action ('Take a screenshot of a URL') and resource (URL), and distinguishes from sibling tools like render_* and capture_animation by focusing on URL screenshots across multiple browser engines.

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?

Provides practical guidance: example URL (localhost:3000), waiting for selectors, and retry for slow dev servers. Could explicitly mention when not to use this tool vs siblings but the context is clear.

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

snapshot_checkA

Render a component and compare against a previously saved snapshot. Returns pixel diff and pass/fail. Use this after making changes to verify no visual regression.

ParametersJSON Schema
NameRequiredDescriptionDefault
nameYesName of the snapshot to compare against
codeYesCurrent component code to render and compare
frameworkNoFrameworkreact
widthNoViewport width (px)
heightNoViewport height (px)
darkModeNoRender with dark mode
tailwindVersionNoTailwind CSS version (3 or 4)3

TDQS

A4/5.0
Behavior3/5

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

No annotations provided, so description carries full burden. Discloses rendering and comparison output. Does not mention error handling, performance, or side effects. Adequate but not exhaustive.

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 front-loaded purpose. No wasted words or redundant 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?

Describes return value (pixel diff, pass/fail). Lacks details on behavior when snapshot missing or error handling, but for a focused tool with sibling support, 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 covers 100% of parameters with descriptions. Tool description adds no additional parameter-level detail. 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?

Clearly states verb ('Render and compare'), resource ('snapshot'), and outcome ('pixel diff and pass/fail'). Distinguishes from siblings like snapshot_save.

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?

Explicitly says 'Use this after making changes to verify no visual regression.' Provides clear context for when to use. Lacks explicit when-not-to-use, but sibling tools imply alternatives.

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

snapshot_listA

List all saved snapshots with their names and timestamps.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A3.6/5.0
Behavior2/5

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

No annotations provided, so description must disclose behaviors. It only states the action and output, with no mention of side effects, permissions, pagination, or whether the list is comprehensive. For a read-like operation, this is insufficient.

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 that is front-loaded with the action and resource. No wasted 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?

For a simple list tool with no parameters and no output schema, the description is mostly complete. It lacks details on scope (e.g., global or per project) and ordering, but these are minor given the tool's simplicity.

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?

Input schema has zero parameters with 100% coverage vacuously. Description does not need to add parameter details. Baseline for 0 params is 4, and the description is adequate.

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', the resource 'saved snapshots', and the returned data 'names and timestamps'. This distinguishes it from sibling tools like snapshot_save and snapshot_check.

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 such as snapshot_save, snapshot_check, watch_list, or other listing tools. The context signals show many siblings but the description provides no usage distinctions.

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

snapshot_saveA

Render a component and save the screenshot as a named snapshot. Use this to establish a baseline before making changes. Later use snapshot_check to detect visual regressions.

ParametersJSON Schema
NameRequiredDescriptionDefault
nameYesUnique name for this snapshot (e.g. 'header-desktop', 'button-hover')
codeYesComponent code to render and snapshot
frameworkNoFrameworkreact
widthNoViewport width (px)
heightNoViewport height (px)
darkModeNoRender with dark mode
tailwindVersionNoTailwind CSS version (3 or 4)3

TDQS

A3.9/5.0
Behavior2/5

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

No annotations exist, so the description carries full burden. It describes the basic action but does not disclose important behaviors like whether saving overwrites existing snapshots, error handling, or required permissions.

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 with the core action, no wasted words. Efficient and clear.

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 the main purpose but lacks details on output, error conditions, and prerequisites. Given 7 parameters and no output schema, it is adequate but not comprehensive.

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 adds no parameter-specific meaning beyond what the schema already provides, but it is consistent and non-contradictory.

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 uses specific verbs 'Render' and 'save' with the resource 'named snapshot', clearly distinguishing it from siblings like snapshot_check and render_component.

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

Usage Guidelines5/5

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

Explicitly states to use for establishing a baseline before changes and references snapshot_check for regression detection, providing clear guidance on when to use this tool vs. alternatives.

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

watch_get_latestA

Get the latest rendered screenshot from a watch session. Call this after receiving a watch notification to see the current state of the component.

ParametersJSON Schema
NameRequiredDescriptionDefault
idYesWatch session ID from watch_start

TDQS

A3.5/5.0
Behavior2/5

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

No annotations are provided, so the description carries the full burden of behavioral disclosure. It indicates a read operation ('get') and mentions 'rendered screenshot' but does not disclose whether calling the tool has side effects (e.g., clearing the notification), what exact format the screenshot is returned in, or any rate limits.

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 two sentences, front-loading the purpose and then providing usage guidance. Every sentence 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?

Given the simplicity of the tool (one parameter, no output schema), the description is adequate. It tells the agent what to do and when, but does not specify the return format (e.g., image URL or data URI), which could be useful for integration.

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% (the schema describes the only parameter 'id' as a string). The description adds context by stating 'Watch session ID from watch_start', which is helpful but does not add substantial meaning beyond the schema.

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

Purpose4/5

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

The description clearly specifies the action 'Get' and the resource 'latest rendered screenshot from a watch session', which distinguishes it from sibling tools like watch_list or watch_start. However, it does not explicitly contrast with other watch or snapshot tools.

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 provides explicit guidance: 'Call this after receiving a watch notification'. This gives clear context for use, but does not mention when not to use or alternatives.

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

watch_listA

List all currently active file watch sessions.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4.2/5.0
Behavior3/5

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

No annotations are provided, so the description carries the full burden. It states that the tool lists file watch sessions, implying a read-only operation, but does not disclose permissions, auth requirements, or behavior with no active sessions.

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?

One sentence, front-loaded with action verb, no wasted 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 no parameters, no output schema, and no annotations, the description is minimal but adequate for a simple listing operation. It could improve by describing return format or edge cases, but overall 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?

The tool has 0 parameters, so schema coverage is 100%. The description does not need to add parameter info. Baseline for 0 params is 4.

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 ('List') and the resource ('all currently active file watch sessions'). It distinguishes from siblings like watch_start, watch_stop, and watch_get_latest, which have different purposes.

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 (listing active sessions) but does not explicitly state when to use this tool vs alternatives or any prerequisites. The sibling tool names provide some context, but more explicit guidance would be beneficial.

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

watch_startA

Start watching component files for changes. On every save, the component is automatically rendered and you will receive a notification — call watch_get_latest(id) to retrieve the rendered screenshot. Use this to create a live feedback loop while editing UI — the AI sees each change without you needing to call render_file manually.

ParametersJSON Schema
NameRequiredDescriptionDefault
patternsYesGlob patterns or absolute file paths to watch (e.g. ['src/components/Button.tsx'])
propsNoProps to pass to the component on each render

TDQS

A4/5.0
Behavior3/5

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

No annotations are provided, so the description is the sole source. It discloses the watching behavior and automatic rendering on save, and mentions notifications. However, it lacks details on idempotency, error handling (invalid patterns), and whether starting a new watch stops previous ones. The return value (presumably an ID) is only implied but not stated.

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 three sentences, each carrying critical information: the action, the automated workflow, and the use case. It is front-loaded with the core verb-resource pair and avoids 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 the complexity (2 params, no output schema, many siblings), the description covers purpose, workflow, and integration with watch_get_latest. However, it fails to explicitly describe the return value (expected to be an ID for use with watch_get_latest), which is a notable gap for invoking the tool correctly.

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?

Both parameters (patterns and props) are described in the schema, achieving 100% coverage. The description does not add extra meaning beyond what the schema already provides, such as specifying that patterns are globs and props are assigned to the component. 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 'Start watching' and the resource 'component files'. It distinguishes itself from sibling tools like watch_get_latest (retrieve screenshot) and render_file (manual rendering), making the purpose unique and specific.

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 provides clear context for when to use this tool: 'while editing UI' and as part of a live feedback loop. It also instructs to call watch_get_latest after receiving a notification. It implicitly contrasts with render_file. However, it does not explicitly state when not to use it or list alternatives beyond render_file.

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

watch_stopA

Stop a running file watcher started with watch_start.

ParametersJSON Schema
NameRequiredDescriptionDefault
idYesWatch session ID returned by watch_start (e.g. 'watch-1')

TDQS

A3.7/5.0
Behavior2/5

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

No annotations are provided, so the description must fully disclose behavior. It only states 'stop' without explaining side effects (e.g., cleanup of resources, handling of pending events, error states). This leaves significant ambiguity for an agent.

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 efficiently conveys the core purpose without any redundant 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?

For a simple stop operation with a single parameter, the description is largely sufficient. However, it lacks behavioral details (e.g., what happens if the watcher is not running) and does not leverage the opportunity to be more complete given the absence of an output schema and annotations.

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% (the description of 'id' in the schema already explains it). The description adds no new meaning beyond the schema, 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?

The description clearly states the verb 'Stop' and the specific resource 'a running file watcher', effectively distinguishing it from sibling tools like watch_start (starts) and watch_list (lists).

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 prerequisite (started with watch_start) and indirectly suggests when to use (after starting a watcher). However, it does not explicitly mention when not to use or alternative tools, though the sibling context provides some guidance.

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. Dates show when Glama detected each change.

  1. 1 tool updatev0.12.0
    • Changedrender_file1 field changed
      • addedInput schema / properties / outputPath
        Added value: +{
        +  "description": "Absolute path to save the PNG (e.g. '/tmp/button.png'). When set, returns a text summary instead of base64 image data — use this in long agent sessions to avoid context bloat.",
        +  "type": "string"
        +}
  2. 2 tool updatesv0.11.1
    • Changedrender_component1 field changed
      • addedInput schema / properties / mock
        Added value: +{
        +  "additionalProperties": {},
        +  "description": "Mock network responses. Keys: URL pattern (path '/api/users', glob '**/api/*', or full URL). Values: response body (auto-serialized as JSON) or { status, contentType, body, headers }.",
        +  "propertyNames": {
        +    "type": "string"
        +  },
        +  "type": "object"
        +}
    • Changedrender_file1 field changed
      • addedInput schema / properties / mock
        Added value: +{
        +  "additionalProperties": {},
        +  "description": "Mock network responses. Keys: URL pattern (path '/api/users', glob '**/api/*', or full URL). Values: response body (auto-serialized as JSON) or { status, contentType, body, headers }.",
        +  "propertyNames": {
        +    "type": "string"
        +  },
        +  "type": "object"
        +}
  3. 22 tool updatesv1.0.0
    • First observedaudit_a11y
    • First observedcapture_animation
    • First observeddiff_component
    • First observeddiff_reference
    • First observedperf_audit
    • First observedrender_catalog
    • First observedrender_component
    • First observedrender_file
    • First observedrender_grid
    • First observedrender_interaction
    • First observedrender_matrix
    • First observedrender_responsive
    • First observedrender_theme
    • First observedrender_variants
    • First observedscreenshot_url
    • First observedsnapshot_check
    • First observedsnapshot_list
    • First observedsnapshot_save
    • First observedwatch_get_latest
    • First observedwatch_list
    • First observedwatch_start
    • First observedwatch_stop

TDQS

A3.9/5.0
Disambiguation5/5

Each tool has a clearly distinct purpose: rendering tools cover specific scenarios (single component, file, grid, interaction, matrix, responsive, theme, variants, URL), snapshot tools handle saving/checking/listing, watch tools manage file watchers, and audit/diff tools address accessibility, performance, and visual regression. No two tools overlap in functionality.

Naming Consistency5/5

All tool names follow a consistent verb_noun pattern in snake_case (e.g., render_component, snapshot_save, watch_start). The verbs are descriptive and the nouns clearly indicate the target resource or action, making the pattern predictable and easy to understand.

Tool Count4/5

With 22 tools, the server covers a broad range of visual testing scenarios. While this is slightly above the typical 3-15 range for a well-scoped server, each tool addresses a specific need and the count is justified given the comprehensive feature set.

Completeness4/5

The tool surface covers core workflows: rendering (multiple modes), snapshots, diffs, audits, animation capture, responsive/theme testing, and file watching. Minor gaps exist, such as the absence of a snapshot deletion tool or a way to delete watch sessions, but these are not critical for typical usage.

Maintenance

ActivityMaintained
ResponsivenessSyncing

Related MCP Connectors

Related MCP Servers

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/kamegoro/frameshot'

If you have feedback or need assistance with the MCP directory API, please join our Discord server