Skip to main content
Glama

snapdom_screenshot

Capture precise DOM-to-image screenshots of Vue components for visual restoration, with configurable viewport, selectors, and shadow-aware snapDOM options.

Instructions

Take high-quality screenshots using snapDOM technology for precise DOM-to-image capture

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
portNoPort where Vue dev server is running
selectorNoCustom CSS selector to screenshot (optional)
viewportNoViewport size for screenshot
outputPathNoCustom output path for screenshot (optional)
projectPathNoPath to the Vue project/Users/yujie_wu/Documents/work/camscanner-cloud-vue3
figmaEffectsNoFigma effects data for smart shadow padding calculation (optional)
componentNameYesName of the component to screenshot
snapDOMOptionsNosnapDOM capture options for high-quality screenshots with box-shadow support

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observedv1.0.0

TDQS

B3.3/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 carry the full burden of behavioral disclosure. It only claims 'high-quality' and 'precise' capture but does not explain that this requires a running Vue dev server, that it writes screenshot files to an output path, or that componentName is required. These operational behaviors are essential for an agent to invoke the tool correctly and are entirely absent.

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, front-loaded sentence that communicates the core function without redundancy. It is concise and easy to scan. However, it leans on vague marketing terms like 'high-quality' and 'precise' rather than concrete operational detail, so it is not maximally informative for its brevity.

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?

This is a complex tool with 8 parameters, nested objects, no annotations, and no output schema. The description does not mention the Vue development server requirement, the required componentName, or what happens after the screenshot is taken. An agent would need to inspect the full schema and likely make assumptions about runtime requirements, which is a substantial gap for a tool of this complexity.

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 across all 8 parameters, including nested snapDOMOptions and viewport properties. The description itself adds no parameter-specific meaning, but with high schema coverage, baseline 3 is appropriate. The schema already documents defaults and purposes adequately.

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 function: taking high-quality screenshots of DOM elements using snapDOM technology. This distinguishes it from its siblings (figma_compare and optimize_svg) which are clearly not screenshot tools. The verb 'take' and resource 'DOM-to-image capture' make the purpose unambiguous.

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 this tool is used for capturing screenshots of Vue components, but it does not explicitly state when to use it versus alternatives like figma_compare. There are no exclusion criteria or context around when screenshot capture is appropriate. However, the siblings are functionally distinct, so the intended usage is reasonably inferred.

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

Deploy Server

Other Tools