Skip to main content
Glama

Visionaire Engine

Which rule, which file, which line — and why it wins.

npm CI License: Apache 2.0

visionaire-engine MCP server

Visionaire Engine hero image

The problem: Something looks off. You screenshot it, explain it, the LLM guesses wrong, you re-explain.

The solution: Visionaire reads the live page and hands the LLM the exact rule, file, and line. Right fix, first try.

Endless re-prompting vs one pinpointed fix — the problem Visionaire solves

You shouldn't have to write a paragraph to explain a 2px margin bug — and now you don't. Less explaining, more fixing: built for developers, vibe coders, and anyone shipping site design changes with an LLM in the loop.

Status: v0.7 — 28 tools, 435 tests (252 unit + 183 end-to-end on real Chrome), a 24-case seeded-bug benchmark (npm run bench), verified live against wordpress.org.

  • v0.7 — the verification layer: assert_visual (a 17-type assertion grammar — PASS/FAIL verdicts with measured pixels, offending uids, and re-runnable named suites), visual_diff (pixel diff vs a mockup or recorded baseline, divergent regions mapped to element uids), impact_preview (blast radius + sandboxed dry-run before editing a shared selector), diagnose (ranked "why is this broken" culprits with measured evidence), responsive_sweep (one call → per-viewport verdict matrix), capture_proof (before/after evidence bundles with a verdict delta); the verify-after-edit harness for Claude Code and Cursor (npx visionaire-engine init-harness); style_diff { capture_pixels } baselines; check_alignment deprecated in favor of assert_visual

  • v0.6 — the pixel-perfect pack: check_alignment (group alignment / gap-rhythm / grid / pixel-snap audit) and pick_color (actual painted-pixel sampling + WCAG contrast verdicts)

  • v0.5: inject_css — the live fix loop (trial a fix on the page, see what changed, converge, write source once); navigate { bypassCache } for stale-stylesheet hard reloads; blast-radius + scoped-fix reporting on explain_styles (change the button, not all buttons)

  • v0.4 (field-report items): interact to drive the UI into a state and inspect it; measure_element for sub-pixel glyph/text-ink centering; an evaluate escape hatch; element-scoped crops/zoom on annotated_screenshot; match:"any" / visibleOnly:false on find_elements; zero-config cold-start Chrome discovery

  • v0.3: the time dimension — event-listener attribution, animation diagnosis, source-attributed interaction timelines

  • Hardened for untrusted pages: prompt-injection sanitization, fail-fast watchdog, dialog auto-dismiss

The problem, in the wild

AI coding agents are structurally blind to what they render. They emit CSS as text and never see the pixels that come back — so they guess, insist the guess worked, and loop. The community has a name for it now: "CSS gaslighting." Visionaire gives the agent deterministic eyes on the real render — measured geometry, the actual cascade winner, PASS/FAIL verdicts — so the loop ends. If you want the problem in other people's words first, start here:

  • Why AI Sucks At Front End — Adam Argyle on why models can't reason about layout they can't perceive.

    "It's an LLM, not a rendering engine! It's notoriously bad at math, and throwing screenshots at it means very little. It's stabbing in the dark."

  • Is AI Causing a Repeat of Frontend's Lost Decade? — Mauro Bieg on the wider cost of AI-generated frontend.

    "AI is enabling lots of AI slop — but this doesn't mean we don't still need people who know what they're doing."

Related MCP server: browser-inspector-mcp

The gap

Ask an LLM to fix a visual bug today and it gets one of two incomplete pictures: pixels, with no link back to code, or code, with no rendering truth about what's actually winning on screen. Existing browser MCPs make this worse for design work specifically — they ship accessibility snapshots that deliberately strip out all styling. What's missing is explanation and attribution:

  • Which CSS rule wins the cascade for this property, and why did the others lose?

  • Which file, which line does the winner live in — or which Elementor widget control, or which Customizer entry?

  • Why is this element invisible, misaligned, or the wrong size?

Visionaire answers those questions with zero AI inside — everything is computed deterministically from the Chrome DevTools Protocol plus closed rulesets. The fuzzy part (matching "the button under the hero looks off" to an actual element) stays with the calling LLM, which gets uid-keyed snapshots, search tools, and annotated screenshots to do that cheaply.

What the output looks like

Live against wordpress.org:

why color = rgb(255, 255, 255):
  WINNER  [class*=wp-block] .wp-block-button__link { color: var(--wp--custom--button--color--text) }  spec(0,2,0)
    → themes/wporg-parent-2021/build/style.css:499  [line | theme: wporg-parent-2021 — edit themes/wporg-parent-2021/build/style.css]
  lost (specificity)  :root :where(.wp-element-button, .wp-block-button__link) { color: #fff }  spec(0,1,0)
    → global-styles-inline-css:2  [db-entity | Global Styles — Site Editor → Styles (theme.json / wp_global_styles)]
  lost (origin)  a:-webkit-any-link { color: -webkit-link }  spec(0,1,1)
    → user-agent stylesheet

Winner, losers with the decisive loss reason, and an honest edit pointer for each — including WordPress-aware answers like "Site Editor → Styles" instead of a useless path to a generated file.

Quick start

Requires Node ≥ 20 and Chrome/Chromium installed.

Fastest path — register straight from npm with Claude Code (no clone, no build):

claude mcp add visionaire -- npx -y visionaire-engine

Or run from a clone (for development or a pinned local build):

git clone https://github.com/mi60dev/visionaire-engine && cd visionaire-engine
npm install && npm run build
claude mcp add visionaire -- node "$PWD/dist/index.js"

Using GitHub Copilot, Cursor, Claude Desktop, Google Antigravity, or another client? See docs/clients.md for a copy-paste config for each, plus browser-install help for Linux/WSL/Docker.

Run it from your project's root directory — Visionaire is at its best when the agent has both the running site and its source on disk, so it can cross-reference the two. Ground before you search: take a page_snapshot (or read the source) to get real element names instead of guessing selectors. If a selector matches nothing, the error suggests the closest real ids/classes on the page.

Then, in a session:

  1. connect { url: "https://your-site.com" } — launches Chrome (or { browserUrl: "http://127.0.0.1:9222" } to attach to your real, logged-in browser)

  2. page_snapshot {} — a uid-keyed census of what's visible; target elements by their uid, not invented selectors

  3. explain_styles { uid: "e17", property: "margin-bottom" } — cascade verdict with file:line

Try it without an MCP client:

npm run demo                                              # bundled fixture
npm run demo -- https://wordpress.org --selector "a.wp-block-button__link"

The 28 tools

Session & grounding — get connected and find the right element without guessing.

Tool

Purpose

connect / navigate / set_viewport

Launch or attach to Chrome, go to a URL (bypassCache for hard reloads), emulate viewports

page_snapshot

Pruned, uid-keyed tree of what's visible — geometry, layout hints, invisibility reasons

page_origins

Stylesheet inventory + platform detection (WordPress version, theme, builders, optimizers)

find_elements

Deterministic search by text, selector, role, or screen region — AND-combined by default, match:"any" for a union, visibleOnly:false to include hidden elements

node_at_point

x,y → element uid + ancestor chain

pick_element

Human-in-the-loop grounding: DevTools-style hover highlight, the user clicks the element that looks wrong

Explanation — the "why," with a receipt.

Tool

Purpose

inspect_element

The "what": box model, computed values, visibility verdict

explain_styles

The wedge. Cascade winner/loser per property with file:line + origin attribution, each winner's blast radius (how many other elements it styles), and a scoped-fix selector for just this element

inspect_ancestors

Constraint-chain walk: which ancestor constrains width/overflow/stacking

get_listeners

Event listeners on an element + its ancestors, with handler file:line and capture/passive/once flags

explain_animations

Animations/transitions touching an element: live census, declared rules with file:line, and a closed "why is it not smooth" ruleset

Pixel-level checks — new in v0.6.

Tool

Purpose

measure_element

Sub-pixel rendered geometry: content box + true text-ink box (glyph extents) with a centering verdict — "is this × actually centered?"

check_alignment

(deprecated → assert_visual) Group pixel audit: which of N elements is off-alignment by how many px, gap-rhythm outliers, size consistency, N-px grid conformance, pixel-snap warnings

pick_color

The actual painted pixel (composited truth: gradients, images, opacity) + computed colors + WCAG AA/AAA contrast verdict

Interaction & time — states, not just snapshots.

Tool

Purpose

interact

Drive the UI into a state (open a menu/popup/modal, reveal a tab) and leave it there so you can inspect the new state — reports post-action visibility + box

record_interaction

One interaction → a source-attributed causal timeline: handlers, mutations, cancelled transitions, layout shifts

Fixing & verifying

Tool

Purpose

inject_css

The live fix loop: trial declarations on an element (or a page-wide rule) without touching source — see what changed, converge, write source once, revert

style_diff

Record styles, compare later — verify-my-fix loops

evaluate

Escape hatch: run agent-authored JavaScript in the page and get the JSON result, for the genuinely bespoke case no other tool covers

annotated_screenshot

Screenshot with numbered marks that equal snapshot uids — or an element-scoped crop via clipTo with padding/scale zoom and optional annotate:false

Verification & proof — new in v0.7.

Tool

Purpose

assert_visual

The verification gate. State rendered-geometry claims (equal heights, alignment, gaps, clipping, colors, z-order — 17 assertion types) → deterministic PASS/FAIL with measured pixels and offending uids; register named suites and re-run them after every edit

visual_diff

Pixel-diff the live page (or one element) against a mockup PNG or a recorded baseline — MATCH/DIVERGENT with divergent regions mapped back to element uids, optional heatmap artifact

impact_preview

Blast-radius report before editing a shared selector: who else matches, grouped with uids, plus a sandboxed dry-run predicting exactly which elements would change

diagnose

One-shot "why does this look broken" — ranked culprits with measured evidence for clipping, overflow, off-center, invisibility, overlap, wrong size

responsive_sweep

One verification payload across many viewports → a per-viewport verdict matrix ("fixed on desktop, still broken on mobile" caught in one call)

capture_proof

Before/after evidence bundles: annotated screenshots + suite verdicts, with a verdict delta proving the fix flipped FAIL → PASS

Full reference: docs/tools.md

The verify loop (stop the CSS gaslighting)

An agent edits a stylesheet, reads its own diff, and declares "now the cards are equal height" — without ever seeing a rendered pixel. Visionaire gives your agent deterministic eyes on rendered truth. The loop:

  1. Preview shared-class blast radius → impact_preview.

  2. Edit the smallest change.

  3. Assert your claim → assert_visual (or re-run a named suite_id). You get PASS/FAIL + the actual measured pixels + the offending element uids.

  4. Diagnose any FAIL → diagnose returns the ranked culprit with evidence.

  5. Sweep responsive → responsive_sweep returns a per-viewport verdict matrix.

  6. Prove it → capture_proof bundles before/after screenshots + verdict delta.

Real output — the same suite before and after a fix:

{
 "verdict": "FAIL",
 "summary": "1 assertion: 0 PASS, 1 FAIL — registered as suite 'cards' (re-run with just {\"suite_id\":\"cards\"})",
 "results": [
  { "type": "equal_height", "verdict": "FAIL", "id": "cards-equal",
    "measured": { "values": [412, 388], "unit": "px", "delta": 24, "tolerance_px": 1 },
    "offending_uids": ["e1", "e2"] }
 ],
 "truncated": false, "suite_id": "cards"
}

…fix the CSS, re-run with just { "suite_id": "cards" }:

{
 "verdict": "PASS",
 "summary": "1 assertion: 1 PASS, 0 FAIL",
 "results": [
  { "type": "equal_height", "verdict": "PASS", "id": "cards-equal",
    "measured": { "values": [412, 412], "unit": "px", "delta": 0, "tolerance_px": 1 } }
 ],
 "truncated": false, "suite_id": "cards"
}

Run npx visionaire-engine init-harness from your project root to wire the included Claude Code hooks (or Cursor rule) so the agent physically cannot end a turn claiming "it's fixed" without a verification pass on record. How the markers, hooks, and Stop gate work: docs/harness.md.

Documentation

Design principles

  1. No internal LLM — deterministic, cacheable, testable, host-agnostic.

  2. Fuzzy grounding belongs to the calling LLM; we make it cheap.

  3. Complement the incumbent browser MCPs (same uid idiom), don't compete.

  4. Honesty ladder on every attribution: line > file > db-entity > component > generated > unknown.

  5. Token-budgeted output — a dossier is 300–800 tokens, never a dump.

Security posture

Visionaire is pointed at arbitrary, untrusted pages, so it treats page content as hostile:

  • Prompt-injection defense. Page-derived strings (element text, class names, ids, attribute values) are sanitized at the single choke point where they enter tool output — collapsed to one line, stripped of control and bidirectional-override characters, and length-capped. A page cannot smuggle instruction-shaped text formatted as a "system message" toward the calling LLM; such content can only appear as an inert, quoted, truncated fragment.

  • Fail-fast, never hang. Every tool call is wrapped in a watchdog (default 60s, VISIONAIRE_TOOL_TIMEOUT_MS to override; pick_element/record_interaction get their declared wait plus slack). A wedged browser returns an actionable error telling you to connect again, instead of blocking the client.

  • No dead-locking dialogs. Page alert()/confirm()/prompt() calls are auto-dismissed — otherwise they would block every evaluate-family CDP call indefinitely.

Visionaire never executes page-authored code as instructions; it only reads and attributes. The calling LLM should still treat tool output as data about a page, not as commands.

Known limitations

  • Chromium-only (CDP is the only path to matched-rule source locations; getMatchedCSSRules was removed from browsers years ago).

  • @layer: unlayered-vs-layered ordering is exact; ordering between two different layer chains is a deterministic proxy (CDP doesn't expose layer declaration order).

  • Some CDP fields we rely on (specificity, layers) are experimental; the engine feature-detects them and falls back (e.g. to its own specificity parser), and a contract smoke test in test/e2e.test.ts fails loudly if a Chrome update breaks the core protocol shape (the experimental fields are logged as present/absent).

Support

Visionaire is free and open source. If it saves you time and you'd like to help keep development going, you can chip in on Ko-fi or Patreon. Completely optional, and genuinely appreciated. Bug reports and field notes help just as much — see CONTRIBUTING.md.

License

Apache License 2.0 — free for everyone, including commercial use, with a patent grant. Copyright © 2026 mi60dev (NOTICE).

Built and maintained by @mi60dev. Contributions welcome under the Apache-2.0 terms — see CONTRIBUTING.md.

Available Tools

22 tools
annotated_screenshotA

Screenshot in two modes: an overview with numbered marks burned in, where mark N equals uid eN (mark 17 = e17); or an element-scoped crop via clipTo (uid|selector|x,y) with optional padding, scale (0.5..4 zoom for tiny elements), and annotate:false for a clean unlabeled crop. Use when text tools are not enough and you need to SEE the page while keeping pixels tied to elements — spatial or visual-layout questions ('things overlap', 'the layout looks off'), to zoom in on one small element, or to confirm which element is which. Then target elements by their uid.

ParametersJSON Schema
NameRequiredDescriptionDefault
uidsNoUids to mark; default: top ~25 visible interactive/landmark elements
scaleNoclipTo only: zoom factor for the crop, clamped 0.5..4 (2 = double size)
clipToNoCrop the screenshot to this element's border box instead of the whole viewport (target by uid | selector | x+y). Pairs with padding, scale, and annotate. Takes precedence over region and fullPage — pick ONE capture mode.
regionNoClip to this viewport rectangle (CSS px). Ignored when clipTo is given (clipTo wins).
paddingNoclipTo only: extra pixels of margin around the cropped element on every side
annotateNoWhen false, burn in NO marks/labels — a clean crop so labels never cover the target
fullPageNoCapture the whole page height. Ignored when clipTo or region is given (they win).

TDQS

A4.3/5.0
Behavior4/5

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

No annotations provided, so description carries full burden. Explains two modes, mark numbering, parameter interactions (clipTo precedence), and annotate option. Implied read-only, no destructive side effects mentioned.

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 paragraph packs all essential information, front-loading modes and usage. Could be slightly more structured (e.g., bullet points) but clear and 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 both capture modes, all parameters, and use cases. Output format not mentioned but likely standard for screenshots. Sufficient for agent to understand tool selection and invocation.

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%, but description adds context: modes, precedence rules, mark numbering convention, and usage scenarios for parameters like scale, padding, annotate.

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 two screenshot modes (overview with numbered marks tied to uids, element-scoped crop via clipTo). Specifies use cases for visual/spatial questions, zooming, element confirmation, distinguishing from sibling 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?

Explicitly says when to use ('when text tools are not enough... spatial or visual-layout questions'), but does not explicitly list when not to use or compare to many close siblings like inspect_element or pick_element.

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

check_alignmentA

Pixel-perfect audit for a GROUP of elements (a selector's matches or a uid list): which edges/centers align and which element is off by how many px, gap rhythm with outliers ('gaps median 24px — e5→e6 is +7.5px'), size consistency, optional N-px grid conformance, and pixel-snap warnings (fractional device pixels render blurry). Reach for it on 'unevenly spaced', 'one card sits lower', 'the nav items look off', 'nothing lines up'. For ONE element's internal glyph centering use measure_element instead.

ParametersJSON Schema
NameRequiredDescriptionDefault
uidsNoExplicit uids from a prior snapshot
gridUnitNoAlso check lefts/tops against an N-px grid (e.g. 8)
selectorNoCSS selector — audits ALL matches (2–40), e.g. ".nav li" or ".card"
toleranceNoPx within which values count as aligned (default 0.5)

TDQS

A4.6/5.0
Behavior4/5

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

The description fully discloses the tool's behavior: it checks alignment, gap rhythm, size consistency, grid conformance, and pixel-snap warnings. Since no annotations exist, the description carries the full burden; it is transparent but could explicitly state it is read-only and non-destructive.

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 paragraph that front-loads the main purpose, then lists capabilities, provides usage examples, and points to an alternative. Every sentence adds value; there is no wasted text.

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 what the tool does, when to use it, and how it relates to siblings. Given the absence of an output schema, the description sets clear expectations about the audit results (alignment deviations, gap outliers, etc.). It stops short of specifying the exact output format, but the level of detail is sufficient for a 4-parameter 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?

With 100% schema coverage, the baseline is 3. The description adds context beyond the schema by explaining the overall purpose and use cases for each parameter (e.g., 'audits ALL matches' for selector). It does not simply repeat schema descriptions, making it helpful for the agent.

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 ('audit', 'align', 'checks') and identifies the resource as a GROUP of elements via selector or uids. It distinguishes from sibling tool 'measure_element' which handles single-element glyph centering.

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?

Explicit when-to-use examples are provided ('unevenly spaced', 'one card sits lower', etc.), and an alternative is given: 'For ONE element's internal glyph centering use measure_element instead.'

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

connectA

ALWAYS the first call: start (or restart) the browser session — launch a local Chrome by default, or attach to the user's real, logged-in browser via browserUrl (e.g. http://127.0.0.1:9222, for pages behind auth like wp-admin or a dashboard). Pass url to load a page immediately. Every other tool needs a live session; if a tool reports no session or a wedged browser, call connect again to reset.

ParametersJSON Schema
NameRequiredDescriptionDefault
urlNoNavigate here right after connecting
modeNoDefault 'launch'; 'attach' joins a running Chrome
widthNoViewport width, default 1280
heightNoViewport height, default 800
headlessNoLaunch mode only; default false (visible window)
browserUrlNoDevTools HTTP endpoint for attach mode, e.g. http://127.0.0.1:9222

TDQS

A4.3/5.0
Behavior4/5

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

With no annotations provided, the description carries full burden. It discloses that connect starts/restarts a session, can launch Chrome or attach to an existing browser, and that every other tool depends on a live session. It also mentions the reset behavior (call again if wedged). This is adequate for a setup tool, though it could explicitly state that it closes any previous session.

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 concise (two sentences) and front-loads the key message ('ALWAYS the first call'). However, the first sentence is dense and could be broken into shorter sentences or bullet points for easier scanning. Overall, it is efficient 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 tool's role as a session initiator with 6 parameters and sibling tools that depend on it, the description covers essential aspects: when to call, modes, parameter usage, and recovery behavior. It does not describe return values (no output schema) or error cases in detail, but that is acceptable for a connection setup 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?

The input schema has 100% coverage for all 6 parameters. The description adds value beyond the schema by explaining the purpose of each parameter in context: url loads immediately, mode defaults to 'launch', width/height set viewport, headless only in launch mode, and browserUrl for attach mode with an example. This provides useful guidance.

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 purpose: 'start (or restart) the browser session'. It specifies it is always the first call and distinguishes between launching a local Chrome or attaching to an existing browser via browserUrl. This differentiates it from sibling tools that require an active session.

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 'ALWAYS the first call' and instructs when to call it again ('if a tool reports no session or a wedged browser'). It also explains the two modes (launch vs attach) with examples. However, it does not explicitly state when not to use it, though the context implies that if a session is active, it should not be called.

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

evaluateA

ESCAPE HATCH — run arbitrary agent-authored JavaScript in the page and get the JSON result. Use ONLY when no purpose-built tool covers the need: a custom measurement, forcing a UI state (dispatch an event / toggle a class), or reading framework/component state. Prefer explain_styles / measure_element / inspect_element / interact where they apply — reach for evaluate when the question is genuinely bespoke and none of them fits. The JS is trusted (you wrote it); its result is returned verbatim and size-capped.

ParametersJSON Schema
NameRequiredDescriptionDefault
timeoutMsNoMax run time in ms before aborting (default 5000, clamped 100..30000).
expressionYesJavaScript evaluated in the page (top-level frame). May be an expression (e.g. "getComputedStyle(document.body).zoom"), a bare object literal (e.g. "{ w: innerWidth, h: innerHeight }"), or an IIFE for multi-step logic. The value it produces is returned as JSON.
awaitPromiseNoIf the expression yields a Promise, await it and return the resolved value (default true).

TDQS

A4.4/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 mentions the JS is trusted (authored by agent), result is returned verbatim and size-capped. However, it does not explicitly caution about potential side effects on page state, which is a notable omission for an arbitrary execution 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?

The description is highly concise (3 sentences) and front-loaded with the label 'ESCAPE HATCH' to immediately convey its nature. Every sentence adds value: purpose, usage restrictions, and behavioral notes. 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 the tool's complexity (arbitrary JS execution) and absence of output schema, the description adequately states that the result is JSON and size-capped. It does not mention error handling (e.g., JS exceptions), which is a minor gap, but overall sufficiently 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 description coverage is 100%, so baseline is 3. The description does not add parameter-specific information beyond what the schema already provides for timeoutMs, expression, and awaitPromise. The context given is general and does not enhance parameter understanding.

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 function: 'run arbitrary agent-authored JavaScript in the page and get the JSON result.' It distinguishes the tool from siblings by explicitly naming alternative tools (explain_styles, measure_element, etc.) and their applicability.

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 'Use ONLY when no purpose-built tool covers the need' and provides concrete examples (custom measurement, forcing UI state, reading framework state). It also directs to prefer specific sibling tools, giving clear when-to-use and when-not-to guidance.

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

explain_animationsA

Explain the animations and transitions on one element: a census of what is running right now (type, play state, timing, animated properties) plus the declared transition/animation/@keyframes rules attributed to file:line, checked against a closed ruleset of known causes. Use when an animation or transition is not smooth, does not run at all, or jumps/pops instead of animating; pass the optional property (e.g. "opacity") to check why THAT property does not animate. For a timeline of a specific click/hover (what fired, what got cancelled), use record_interaction.

ParametersJSON Schema
NameRequiredDescriptionDefault
xNoViewport x coordinate — use together with y
yNoViewport y coordinate — use together with x
uidNoElement uid from a prior page_snapshot / find_elements
propertyNoCSS property you expected to animate — enables the "changes are instant" check
selectorNoCSS selector (first match) — alternative to uid

TDQS

A4.5/5.0
Behavior4/5

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

Since no annotations are provided, the description carries the full burden. It adequately describes what the tool does: gathers running animation information, checks against a closed ruleset, and attributes rules to file:line. It does not disclose any potential performance overhead or side effects, but the described behavior is read-only and well-scoped.

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 paragraph that is information-dense yet readable. It front-loads the main action and provides usage conditions. While it could benefit from bullet points or clearer separation of sections, it contains no unnecessary words and 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?

Given the complexity (5 parameters, no annotations, no output schema), the description covers the tool's purpose, usage guidelines, and parameter hints adequately. It does not explicitly describe the output format, but the term 'census' implies a structured summary. It is complete enough for an agent to understand when and how to invoke the 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?

Schema coverage is 100% with descriptions for all 5 parameters. The description adds value by explaining that the 'property' parameter enables a specific 'changes are instant' check, which goes beyond the schema description. For x/y, it reinforces their combined use. Overall, it adds semantic context without redundancy.

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 purpose: explaining animations and transitions on one element, including a census of running animations and declared rules. It distinguishes itself from sibling tool 'record_interaction' by specifying its use case for diagnosing animation issues and not for timeline recording.

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?

Provides explicit when-to-use scenarios: when an animation is not smooth, doesn't run, or jumps/pops. Also specifies when to use an alternative: for timeline of clicks/hovers, use 'record_interaction'. This guides correct tool selection.

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

explain_stylesA

The core 'WHY': a per-property cascade verdict naming the winning CSS declaration and every loser with the exact reason it lost (specificity, !important, source order, inline, layer), each attributed to file:line or a WordPress/Elementor/Customizer origin. Reach for this whenever a style is wrong or 'won't apply' — wrong color/font/size/spacing, 'something is overriding my rule', 'where does this value come from', 'which rule do I edit'. Prefer this over grepping the source for a style bug: source search finds candidate rules, but only the live cascade shows which one actually WINS on a layered stack — so diagnose here before editing CSS you assume is the cause. Each winner also reports its BLAST RADIUS — how many other elements that rule styles (so you change THE button, not all buttons) — plus a scoped selector that targets just this element, with a specificity verdict. Pass an optional property (e.g. 'margin-bottom') to focus.

ParametersJSON Schema
NameRequiredDescriptionDefault
xNoViewport x coordinate — use together with y
yNoViewport y coordinate — use together with x
uidNoElement uid from a prior page_snapshot / find_elements
propertyNoCSS property (longhand or shorthand) to explain; omit for all competing/authored properties
selectorNoCSS selector (first match) — alternative to uid

TDQS

A4.2/5.0
Behavior4/5

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

No annotations provided, so description carries full burden. It discloses output content (winner, losers, reasons, blast radius, scoped selector) and implies read-only diagnostic nature. Does not explicitly state 'non-destructive', but context makes it clear. Could be more explicit about read-only behavior.

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

Conciseness3/5

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

Description is verbose (about 150 words) with some redundancy (e.g., repeated mention of winners and losers). The front-loaded bold phrase 'The core WHY' is effective, but overall could be more concise. Structure is good with bullet-like points but still longer than ideal.

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 complexity (5 params, no output schema, no annotations), the description covers key aspects: what the tool returns (verdict, reasons, blast radius, scoped selector) and how to use parameters. It lacks exact output format but is sufficient for correct invocation. Could be more complete for detailed output expectations.

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 has 100% coverage with descriptions, and description adds value by explaining the 'property' parameter with an example ('margin-bottom') and context for other parameters (x/y as viewport, uid from prior snapshot). It also notes the optional property to focus, enhancing schema meaning.

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 explains the CSS cascade verdict per property, naming winners and losers with reasons. It uses specific verbs like 'explain' and 'diagnose', and distinguishes from siblings by comparing to source search and style_diff. The resource is explicitly the CSS cascade.

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 explicit when-to-use scenarios (wrong style, won't apply, overriding rule) and when-not (prefer over grepping source). It gives examples of symptoms and recommends diagnosing before editing. However, it doesn't explicitly contrast with all sibling tools like explain_animations or style_diff, but the guidance is strong enough.

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

find_elementsA

Deterministic search by visible text, CSS selector, ARIA role, and/or screen region → compact uid-keyed matches; anchors include their resolved href, so find_elements{role:'link'} lists the page's links WITH destinations (then navigate to browse them). Criteria are AND-combined by default; pass match:'any' for a union (OR) when over-specifying returns nothing, and visibleOnly:false to include display:none/hidden elements. Use to locate the element a user described in words ('the Subscribe button', 'the header nav') before inspecting it. Prefer this (or page_snapshot) over guessing a selector. For a point in a screenshot use node_at_point; to have the human physically click the element use pick_element.

ParametersJSON Schema
NameRequiredDescriptionDefault
roleNoARIA role: explicit [role] attribute or tag-implied (link, button, heading, navigation, …)
textNoCase-insensitive substring of the element's own text
limitNo
matchNo'all' (default): AND — an element must satisfy every criterion. 'any': OR — union of elements matching any single criterion, de-duplicated. Use any when over-specifying returned nothing.all
regionNoViewport rectangle (CSS px) the element must intersect
selectorNoCSS selector, matched via querySelectorAll
visibleOnlyNo

TDQS

A4.5/5.0
Behavior4/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 discloses key behaviors: criteria are AND-combined by default, match:'any' enables OR, visibleOnly:false includes hidden elements, anchors include resolved href. It does not mention potential side-effects (e.g., scrolling) or confirm it is read-only, but as a search tool the transparency is high.

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 dense paragraph with clear logical flow: output statement, example, criteria details, usage recommendation. It is front-loaded with the core purpose. While efficient, it could be slightly more concise by removing one clause, but overall it is well-structured.

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 tool has 7 parameters including a nested region object and no output schema. The description covers search criteria, combination modes, visibility, region intersection, and provides usage context. It lacks explicit output format details (beyond 'compact uid-keyed matches') but the overall completeness is high for a search 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?

Schema coverage is 71%, so baseline is 3. The description adds semantic value beyond the schema by explaining the AND/OR combination logic ('Criteria are AND-combined by default; pass match:'any' for a union (OR) when over-specifying returns nothing') and the anchor href inclusion. This provides practical usage context the schema alone does not.

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 performs a 'deterministic search' using explicit criteria (visible text, CSS selector, ARIA role, screen region) and outputs 'compact uid-keyed matches'. It distinguishes itself from sibling tools like node_at_point (point in screenshot) and pick_element (physical click) by naming them directly.

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?

The description provides explicit guidance on when to use this tool: 'Use to locate the element a user described in words ... before inspecting it. Prefer this (or page_snapshot) over guessing a selector.' It also gives clear exclusions: 'For a point in a screenshot use node_at_point; to have the human physically click the element use pick_element.' This is comprehensive.

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

get_listenersA

List the event listeners on an element — and, by default, delegated listeners up the ancestor chain, document, and window: event type, handler file:line (source-mapped, WordPress-origin-labeled), and the bug-prone flags capture/passive/once. Use to answer "which JS file handles this button?", or when a click/submit/keypress does nothing, a form won't submit, or preventDefault is ignored (often a passive listener). For what actually happens step-by-step when clicked, use record_interaction.

ParametersJSON Schema
NameRequiredDescriptionDefault
xNoViewport x coordinate (use with y)
yNoViewport y coordinate (use with x)
uidNoElement uid from a prior page_snapshot (e.g. "e8")
selectorNoCSS selector — first match is used
eventTypeNoFilter to one event type, e.g. "click"
includeAncestorsNoAlso report listeners up the ancestor chain, document, and window (default true) — delegated handlers live there

TDQS

A4.3/5.0
Behavior4/5

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

With no annotations provided, the description fully bears the burden. It discloses default inclusion of delegated listeners, returned data (event type, source location, flags), and scope. No contradictions, but could mention performance or same-origin limitations.

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 coherent paragraph that front-loads the core action, then provides use cases and alternatives without fluff. Could be slightly more structured but remains 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?

Given 6 optional parameters, no output schema, and no annotations, the description adequately covers purpose, usage, what is returned, and alternatives. It could specify the return format (list) but is otherwise 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%; all 6 parameters have descriptions. The description adds little new meaning beyond the schema, except clarifying includeAncestors default and purpose (delegated handlers). 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 lists event listeners on an element and delegated listeners up the ancestor chain, providing specific details about the returned info (event type, handler file:line, flags). It distinguishes from sibling tool record_interaction.

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?

The description explicitly provides use cases (e.g., 'which JS file handles this button?', debugging passive listeners) and recommends record_interaction for step-by-step interaction analysis, offering clear when-to-use and when-not-to-use guidance.

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

inject_cssA

Apply CSS to the LIVE page without touching source files — either declarations trialed on one element (applied !important so the trial always wins; reports which computed properties changed) or a raw page-wide rule block. THE fix-loop tool: explain_styles names the winning rule → inject_css the candidate fix → verify with measure_element/style_diff/annotated_screenshot → write the final declarations into the source once → revert:'all'. This replaces the slow edit-file → cache-bust → reload → re-snapshot cycle. Also the quick way to hide a cookie/consent overlay that occludes what you need (inject 'display:none'). Patches are trial-only: gone on navigation or revert.

ParametersJSON Schema
NameRequiredDescriptionDefault
cssNoRaw CSS rule block(s) to inject page-wide, e.g. ".onetrust-banner { display: none }"
uidNoElement uid to patch (from page_snapshot / find_elements)
revertNoRemove a previous patch by id (e.g. 'p2'), or 'all' to remove every patch
selectorNoCSS selector (first match) — alternative to uid
declarationsNoDeclarations to trial on the target, e.g. "align-items: center; margin-top: 4px". Applied with !important so the trial always wins; requires uid or selector.

TDQS

A4.6/5.0
Behavior4/5

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

With no annotations, the description discloses that trials use !important, reports changed properties, and patches are temporary. It omits potential side effects like performance impact or security constraints, but covers key behavioral traits for a testing tool.

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 moderately long but well-organized with clear sections and front-loaded main action. Some redundancy could be trimmed, but it remains efficient and readable.

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, the description hints at return (reports changed properties for trial mode) but lacks full details on success/error messages. However, it sufficiently covers the tool's purpose, parameters, and usage context.

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

Parameters5/5

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

Schema has 100% parameter coverage; description adds contextual meaning: explains the dual functionality via parameters (css vs declarations+uid/selector), !important application, and revert behavior, going beyond schema 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 it applies CSS to the live page for testing, with two modes (trial on one element with !important, or raw page-wide rules). It distinguishes from siblings like explain_styles and style_diff by positioning it as the fix-loop tool.

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 outlines the workflow: explain_styles → inject_css → verify with measure_element/style_diff/annotated_screenshot → write source → revert. Also mentions use case for hiding overlays and warns patches are trial-only.

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

inspect_ancestorsA

Walk an element's ancestor chain for ONE concern — width, height, position, overflow, or stacking — and flag the ancestor that is the binding constraint. Use when the cause lives ABOVE the element: it's too wide/narrow, clipped or cut off, won't scroll, is mysteriously positioned, or a z-index has no effect (trapped in an ancestor's stacking context). Complements explain_styles, which explains the element's own winning rules.

ParametersJSON Schema
NameRequiredDescriptionDefault
xNoViewport x coordinate (use with y)
yNoViewport y coordinate (use with x)
uidNoElement uid from a prior page_snapshot (e.g. "e8")
concernNoWhich constraint chain to report (default: width)
selectorNoCSS selector — first match is used

TDQS

A4.3/5.0
Behavior4/5

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

No annotations provided, so description carries full burden. It discloses the tool analyzes one concern per call and flags the binding constraint. While it doesn't mention side effects or auth needs, as a read-only analysis tool, the behavioral description is sufficient and accurate.

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 plus a usage sentence, all front-loaded and each adding value. No redundant phrases, and information is prioritized clearly.

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 5 parameters, full schema coverage, no output schema, and complexity of ancestor analysis, the description covers purpose, usage, and relation to siblings. It is complete for a read-only analysis 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 baseline is 3. The description adds minimal new parameter info beyond what schema provides, but it frames the overall flow (walk ancestor chain for one concern) which adds context. No additional parameter details are needed.

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 walks an element's ancestor chain for one concern (width, height, position, overflow, or stacking) and flags the binding constraint. It uses specific verbs like 'walk' and 'flag' and distinguishes itself from sibling 'explain_styles'.

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 lists when to use: when cause lives above the element (too wide/narrow, clipped, won't scroll, mysteriously positioned, or z-index ineffective). It mentions complementing 'explain_styles' but does not explicitly state when not to use, though the positive guidance is clear.

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

inspect_elementA

The 'WHAT' for one element: box model (margins/padding/border), key computed styles as authored → used values, a visibility verdict, and layout context. Use when you need an element's current rendered state — its real size, spacing, or whether it is actually visible/where it sits. These are the values the page ACTUALLY renders, so it catches the common case where the source rule you'd edit is overridden or never applied. For 'WHY it looks like this / which rule wins' use explain_styles; for 'which ancestor constrains its size or position' use inspect_ancestors.

ParametersJSON Schema
NameRequiredDescriptionDefault
xNoViewport x coordinate (use with y)
yNoViewport y coordinate (use with x)
uidNoElement uid from a prior page_snapshot (e.g. "e8")
verboseNoInclude all whitelisted computed properties, not just non-default ones
selectorNoCSS selector — first match is used

TDQS

A4.4/5.0
Behavior4/5

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

No annotations provided, so description carries full burden. Discloses tool returns rendered values (not authored), catches overridden styles, and provides specific data categories. Lacks details on error handling or output format, but adequate for a read-only inspection 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?

Front-loaded with purpose, concise sentences, no wasted words. Parenthetical clarifications are 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?

Given 5 parameters, no output schema, and no annotations, description provides good context: explains when to use and what data is returned. Lacks explicit output format details but sufficient for agent to understand tool's role.

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. Description does not add parameter-specific details beyond schema; no extra meaning for parameters like x, y, uid, verbose, or selector.

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 returns the box model, computed styles, visibility verdict, and layout context for one element, using specific verbs and distinguishing from sibling tools like 'explain_styles' and 'inspect_ancestors'.

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 when to use (need current rendered state) and when not to (use explain_styles for 'why it looks like this', inspect_ancestors for ancestor constraints), plus highlights benefit of catching overridden styles.

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

interactA

Perform ONE action (click/hover/focus) at a target and LEAVE the resulting state in place — no recording, no teardown. Use this to DRIVE the UI into a state — open a popup/menu/modal, reveal a tab or dropdown — so you can then inspect_element / annotated_screenshot / explain_styles the NEW state: "open the menu then tell me why it overflows", "click the tab and check the panel". Reports the target's post-action visibility + content box so you learn immediately whether it opened. Target by uid, selector, or x+y. For the causal TIMELINE of an interaction — which handler ran, what mutated, which transitions were cancelled — use record_interaction instead; interact only leaves you in the state, it does not explain the transition.

ParametersJSON Schema
NameRequiredDescriptionDefault
xNoViewport x coordinate (use with y)
yNoViewport y coordinate (use with x)
uidNoElement uid from a prior page_snapshot (e.g. "e5")
actionNoWhat to do at the target — default "click". hover moves the mouse over it; focus focuses it.
selectorNoCSS selector — first match is used
settleMsNoHow long to wait for the UI to react before reporting the target's new state; default 250, clamped 0–5000

TDQS

A4.6/5.0
Behavior4/5

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

No annotations provided, so description carries full burden. It discloses that the tool does not record or teardown, reports post-action visibility and content box, and uses targeting methods. It could mention if scrolling into view is handled, but overall transparent.

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?

Somewhat lengthy but well-structured and front-loaded. Every sentence adds value: purpose, usage guidance, examples, output details, targeting methods. Could be slightly more concise, but effective.

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 6 parameters and no output schema, the description is highly complete. It explains what to expect after action (visibility+content box), how to use different targeting, and distinguishes from sibling. Missing error conditions but still comprehensive.

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% with all parameters described. The description adds valuable context beyond schema, such as 'first match is used' for selectors and the default for action. Enriches understanding of 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 one action (click/hover/focus) at a target and leaves the resulting state in place. It uses specific verbs and resource descriptions, and distinguishes itself from the sibling tool record_interaction.

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 when to use this tool (to drive the UI into a state) and when to use record_interaction instead (for causal timeline). Also suggests subsequent tools like inspect_element, showing clear usage context.

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

measure_elementA

Deterministic rendered-pixel geometry: an element's content box (WxH @x,y) and the true TEXT INK bounding box of its glyphs (canvas measureText extents, not the advance box), plus a sub-pixel centering verdict — how far the ink sits from the content-box center on each axis, with a padding/line-height fix hint. Reach for this when the caller is fussing over VISUAL alignment that the box model can't see: "the × in the close button looks a bit high/off-center", "the icon is not quite centered", one-off pixel offsets. Pass referenceUid/referenceSelector to also get the center delta between two elements. explain_styles tells you which rule set the value; measure_element tells you whether the painted glyph actually lands where you want.

ParametersJSON Schema
NameRequiredDescriptionDefault
xNoViewport x coordinate (use with y)
yNoViewport y coordinate (use with x)
uidNoElement uid from a prior page_snapshot (e.g. "e17")
selectorNoCSS selector — first match is used
referenceUidNoOptional reference element uid to measure alignment against (its center)
referenceSelectorNoOptional reference element selector to measure alignment against (its center)

TDQS

A4.5/5.0
Behavior4/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 discloses determinism, returns content box and ink bounding box dimensions, sub-pixel centering, and alignment delta with reference elements. It does not mention error handling or prerequisites, but for a measurement tool this is adequate. Slightly less transparency due to no mention of what happens with invalid inputs.

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 dense paragraph but front-loads the core capability. Every sentence adds value, though it could be more structured (e.g., bullet points). No wasted words, but brevity is slightly sacrificed for thoroughness.

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?

Despite no output schema, the description explains what the tool returns (content box dimensions, ink bounding box, centering verdict). It covers both single-element and two-element comparison use cases. Missing details on edge cases (e.g., element not found) but otherwise complete for a measurement tool with 6 parameters.

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%, so baseline 3. The description adds value by contextualizing parameters (e.g., 'x,y' as viewport coordinates, 'uid' from prior page_snapshot, 'referenceUid' for alignment delta). It goes beyond schema by explaining how parameters relate to the tool's purpose and behavior.

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 determines rendered-pixel geometry (content box and true text ink bounding box) and sub-pixel centering. It provides concrete examples like 'the × in the close button looks a bit high' and distinguishes from siblings like explain_styles by focusing on visual alignment invisible to the box model.

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 when to use: 'when the caller is fussing over VISUAL alignment that the box model can't see' with specific examples. It also explains how to use referenceUid/referenceSelector for comparing two elements, and differentiates from explain_styles by noting the latter tells which rule set the value while measure_element tells if the painted glyph lands correctly.

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

node_at_pointA

Map viewport coordinates (x, y) to the element there: uid, identity, and the full ancestor uid chain. Use to turn a coordinate — e.g. a spot you located in an annotated_screenshot, or pixel coords the user gave — into a concrete element and uid.

ParametersJSON Schema
NameRequiredDescriptionDefault
xYesViewport x in CSS px
yYesViewport y in CSS px

TDQS

A4.2/5.0
Behavior3/5

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

With no annotations, the description carries the full burden. It explains the return values but does not disclose behavior for out-of-bounds coordinates or performance characteristics. Adequate but not thorough.

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 superfluous content. The first sentence defines the core function, the second provides usage context. 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 simple two-parameter tool with no output schema, the description adequately covers the return values and usage. Could mention failure cases (e.g., no element at coordinates) but overall complete given low complexity.

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% with concise descriptions. The description adds context by explaining the parameters as viewport coordinates in CSS px and providing usage examples, adding value 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 maps viewport coordinates to an element and specifies the return values (uid, identity, ancestor chain). It distinguishes itself from siblings like pick_element by focusing on coordinate-to-element mapping.

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 clear use cases (e.g., from annotated_screenshot or user-given pixel coords) but does not explicitly mention when not to use it or compare with alternatives.

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

page_originsA

Inventory of every stylesheet (URL, byte size, origin, source-map presence) plus platform detection — WordPress version, theme/child theme, page builder (Elementor/Divi), and CSS optimizer. Use before proposing edits to learn where the CSS actually lives, when a file:line points at a generated/minified bundle and you need the true source, or to answer 'is this WordPress/Elementor?' and 'which stylesheet owns this?'.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4.4/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 describes the output but does not explicitly state that the tool is read-only and safe. It lacks mention of permissions or side effects. For an inventory tool, this is adequate but not comprehensive.

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 paragraph that front-loads the main purpose. Every sentence adds value, with 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 and no output schema, the description effectively explains what the tool returns (stylesheet details and platform detection) and when to use it. It could be slightly more specific about the return format (e.g., list, object) but is otherwise complete.

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, so schema coverage is 100% and no parameter documentation is needed. The description correctly does not discuss params, earning the baseline of 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 it inventories stylesheets (URL, byte size, origin, source-map) and detects platform details (WordPress version, theme, page builder, optimizer). This is specific and distinguishes it from siblings like 'explain_styles' or 'style_diff'.

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 says 'Use before proposing edits' and gives three concrete scenarios: learning where CSS lives, finding true source for minified bundles, and answering platform/ownership questions. This provides clear when-to-use guidance.

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

page_snapshotA

Token-budgeted census of the rendered page — a nested, uid-keyed element tree with geometry and visibility flags. Call this FIRST after connect to orient yourself and to obtain the stable uids every other tool targets. Reach for it whenever you do not yet know the page structure or an element uid. To find one specific element by description use find_elements; to see the page visually use annotated_screenshot.

ParametersJSON Schema
NameRequiredDescriptionDefault
scopeNoLimit the census to one subtree; exactly one of uid | selector | x+y
budgetTokensNoOutput token budget (default 1500)
includeInvisibleNoRender invisible nodes inline with their reason (default false: counted, not shown)

TDQS

A4.4/5.0
Behavior4/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 discloses that the tool is a read-only census (implied, not explicit), token-budgeted, and provides stable uids. However, it does not explicitly state that it is non-destructive or whether it requires permissions, which would be ideal. Nevertheless, the behavior is well implied and no contradictions exist.

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 sentences, each adding value: purpose, when to call, and when to use alternatives. Front-loaded with core function, no wasted words. Highly 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?

Given the tool's complexity (3 parameters, nested object) and no output schema, the description explains the output nature (element tree with geometry/visibility), token budget, and usage context with clear alternatives. It lacks a detailed node structure, but covers the essential needs for an agent to use it 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?

Schema coverage is 100%, so baseline is 3. The description adds context like 'token-budgeted' and explains that scope limits to one subtree, but does not significantly elaborate on parameter details beyond what the schema provides. It is adequate but not exceptional.

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: a token-budgeted census of the rendered page returning a nested, uid-keyed element tree with geometry and visibility flags. It explicitly distinguishes from siblings like find_elements and annotated_screenshot, making 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 Guidelines5/5

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

Provides explicit guidance: 'Call this FIRST after connect' and 'Reach for it whenever you do not yet know the page structure or an element uid.' It also tells when to use alternatives ('To find one specific element by description use find_elements; to see the page visually use annotated_screenshot'). This is model usage guidance.

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

pick_colorA

Sample the ACTUAL painted pixel at a point or element — the composited truth that computed styles cannot give (gradients, background images, opacity stacks, blend modes) — plus the owning element's computed color/background and a WCAG contrast verdict (AA/AAA) of the text against the painted backdrop. Reach for it on 'the color looks off', 'is this the exact brand hex?', 'is this text readable on that background?'. Use at:'top-left' to sample pure background (center may hit a glyph); use explain_styles to find WHICH RULE set a wrong color.

ParametersJSON Schema
NameRequiredDescriptionDefault
xNoViewport x of the pixel to sample (use with y)
yNoViewport y of the pixel to sample (use with x)
atNoSample point within the element: 'center' (default; may hit text glyphs) or 'top-left' (2px inside the border — usually pure background)
uidNoElement uid — samples inside it (see at)
selectorNoCSS selector — first match

TDQS

A4.5/5.0
Behavior4/5

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

Describes behavioral traits: samples composited truth, not computed styles; includes WCAG contrast verdict; explains 'at' parameter behavior (top-left vs center). Lacks mention of side effects or performance implications, but as a read-only sampling tool it is sufficiently transparent.

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?

Description is front-loaded with main purpose and usage tips. Each sentence adds value, though it could be slightly more concise. Structured well for an AI agent to parse quickly.

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, the description covers what the tool returns (composited truth, computed color/background, WCAG contrast) and how to use parameters. Adequate for understanding the tool's functionality and output.

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 description coverage is 100%, so baseline is 3. The description adds value by explaining the difference between center and top-left sampling, and implicitly suggests using uid/selector or coordinates. Adds context 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 tool samples the actual painted pixel, gives composited truth, computed colors, and WCAG contrast. It distinguishes from sibling tools like explain_styles and annotated_screenshot by focusing on exact pixel color and contrast.

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 when to use: 'the color looks off', 'is this the exact brand hex?', 'is this text readable on that background?'. Provides guidance on using 'at:top-left' for pure background and suggests explain_styles for finding which rule set a wrong color.

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

pick_elementA

Let the human point at the element: turns on a DevTools-style hover highlight in the connected tab and waits for them to click, returning the clicked element's uid and ancestor chain. Use when the user says "I'll show you" / "let me click it", or when find_elements/annotated_screenshot could not pin down the element from a description. Needs a visible browser window (connect { headless: false }).

ParametersJSON Schema
NameRequiredDescriptionDefault
timeoutSecondsNoHow long to wait for the user's click; default 60, clamped to 5–600

TDQS

A4.5/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 the interactive nature (hover highlight, waiting for click), return data, and environment requirement. It does not mention potential side effects, but the tool appears non-destructive. Slightly lacking in not stating that no changes are made to the page.

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: first explains the tool's core functionality, second gives usage guidance. No wasted words, information is front-loaded.

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 tool with one optional parameter and no output schema, the description covers what it does, when to use, prerequisites, and return value. Nothing essential is missing.

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 does not add significant value beyond the schema's description of timeoutSeconds, which is already well-documented. Schema coverage is 100%, so 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 explicitly states it turns on a DevTools-style hover highlight, waits for user click, and returns the clicked element's uid and ancestor chain. This clearly differentiates from sibling tools like find_elements or annotated_screenshot which are automated.

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?

It explicitly says to use when the user says 'I'll show you' or when find_elements/annotated_screenshot fail, and notes the requirement for a visible browser window. This provides clear context for when to use vs alternatives.

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

record_interactionA

Perform one interaction (click or hover, or watch while the human interacts) and return a source-attributed causal TIMELINE — handler file:line, DOM/class mutations, animations started/cancelled, layout shifts, console errors — uid-keyed and time-ordered. Use for cause-and-effect over time: "the sidebar does not hide smoothly", "nothing/the wrong thing happens when I click", "the menu closes immediately", a modal that won't open, focus that jumps. For static listener attribution without triggering it, use get_listeners; for animation rules at rest, use explain_animations.

ParametersJSON Schema
NameRequiredDescriptionDefault
xNoViewport x coordinate (use with y)
yNoViewport y coordinate (use with x)
uidNoElement uid from a prior page_snapshot (e.g. "e5")
actionNoclick/hover dispatch real input at the target; manual just records while a human interacts in the (headed) tab
waitMsNoObservation window after the action; default 1500, clamped 200–10000
selectorNoCSS selector — first match is used
maxEventsNoHard cap on timeline lines; default 40

TDQS

A4.3/5.0
Behavior4/5

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

No annotations provided, so description carries full burden. It discloses dispatch of real input, observation window, and types of events recorded. Could be more explicit about potential side effects like navigation, but still transparent.

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?

Front-loaded with core action and output, followed by use cases and alternatives. Slightly verbose but each 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 and 7 parameters, description covers purpose, usage, and output (timeline). Lacks detailed return structure but sufficient for selection.

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. Description adds no extra parameter-specific meaning beyond schema descriptions (e.g., x/y coordinates, uid from page_snapshot). Adequate but not enhanced.

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 (perform one interaction), resource (click/hover/manual), and output (causal timeline). It distinguishes from siblings like get_listeners and explain_animations.

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 lists use cases (e.g., 'the sidebar does not hide smoothly') and when-not-to-use (e.g., 'for static listener attribution without triggering it, use get_listeners'). Provides clear alternatives.

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

set_viewportA

Emulate a viewport size (and optional deviceScaleFactor) on the connected tab, then re-inspect. Use for responsive bugs — 'it breaks on mobile', 'the menu is wrong at tablet width', anything behind a media query — since resizing can change which @media rule wins. Follow with a fresh page_snapshot / explain_styles at the new size.

ParametersJSON Schema
NameRequiredDescriptionDefault
widthYesViewport width in CSS px
heightYesViewport height in CSS px
deviceScaleFactorNoDefault 1

TDQS

A3.8/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 all behaviors. It mentions re-inspecting after setting the viewport but does not explain side effects (e.g., whether the page reloads, if other state is affected) or any constraints like permissions or 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 concise and front-loaded with the main action. Every sentence adds value: the action, use cases, and follow-up steps. No fluff.

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, the description logically explains the tool's purpose and suggests next steps. It covers the key aspects for an agent to use the tool effectively, though more detail on return behavior would be beneficial.

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 describes the parameters. The description only mentions the optional 'deviceScaleFactor' and does not add meaning beyond the schema's default value of 1. 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 emulates a viewport size and re-inspects, with specific verb 'Emulate' and resource 'viewport on the connected tab'. It provides concrete examples of responsive bugs, distinguishing it from sibling tools that focus on elements or styling.

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 for responsive bugs' and gives examples like 'it breaks on mobile'. It suggests following with page_snapshot or explain_styles, providing clear context. However, it does not list alternatives or cases where this tool should not be used.

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

style_diffA

BEFORE/AFTER comparison for one element: record its styles into a named slot, change something, compare — only the properties that changed are reported. Reach for it whenever you ask 'did my fix actually change anything?' or need to prove what an edit / inject_css patch / viewport change / interaction altered. The loop: style_diff{mode:'record'} → apply the change → style_diff{mode:'compare'}. Confirms a fix moved exactly the property you intended, and nothing else.

ParametersJSON Schema
NameRequiredDescriptionDefault
xNoViewport x coordinate — use together with y
yNoViewport y coordinate — use together with x
uidNoElement uid from a prior page_snapshot / find_elements
modeYesrecord: store baseline. compare: diff against it
slotNoRecording slot name — omit the target on compare to reuse the recorded onedefault
selectorNoCSS selector (first match) — alternative to uid

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 discloses the recording slot mechanism and that compare only reports changed properties. However, it does not mention edge cases (e.g., missing prior record, element not found) or any destructive 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?

The description is concise (3-4 sentences) with no filler words. It front-loads the purpose and quickly explains the usage pattern in a structured way.

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 6 parameters, no output schema, and no annotations, the description does a good job explaining the core workflow and use case. It could be more complete by mentioning error handling or slot behavior, but it is sufficient for most scenarios.

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%, but the description adds additional meaning by explaining the workflow and the purpose of the slot parameter ('named slot'). It also implies how uid and selector are used in the context of recording and comparing.

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 performs a BEFORE/AFTER comparison for one element, recording styles into a named slot and comparing to show only changed properties. It uses specific verbs ('record', 'compare') and distinguishes from sibling tools like check_alignment or explain_styles.

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 explicit guidance on when to use it ('did my fix actually change anything?') and provides a concrete usage loop (record → apply change → compare). It does not explicitly list alternatives or when not to use it, 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.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.

  1. 22 tool updatesv0.6.1
    • First observedannotated_screenshot
    • First observedcheck_alignment
    • First observedconnect
    • First observedevaluate
    • First observedexplain_animations
    • First observedexplain_styles
    • First observedfind_elements
    • First observedget_listeners
    • First observedinject_css
    • First observedinspect_ancestors
    • First observedinspect_element
    • First observedinteract
    • First observedmeasure_element
    • First observednavigate
    • First observednode_at_point
    • First observedpage_origins
    • First observedpage_snapshot
    • First observedpick_color
    • First observedpick_element
    • First observedrecord_interaction
    • First observedset_viewport
    • First observedstyle_diff

TDQS

A4.4/5.0
Disambiguation5/5

Each tool has a clearly distinct purpose with detailed descriptions that prevent overlap. For example, 'check_alignment' handles group alignment while 'measure_element' focuses on single element glyph centering. The set covers separate concerns (visual inspection, style cascade, layout, interactions) without ambiguity.

Naming Consistency5/5

All tool names follow a consistent verb_noun pattern in snake_case (e.g., 'annotated_screenshot', 'explain_styles', 'record_interaction'). No mixing of conventions, making it predictable for an agent to select the right tool.

Tool Count4/5

22 tools is on the higher side but justified by the comprehensive nature of the server—covering everything from session management to detailed style analysis and interaction recording. Each tool earns its place without redundancy.

Completeness5/5

The tool surface is remarkably complete for a visual debugging/CSS inspection server. It covers the full workflow: connect, navigate, snapshot, search, inspect, measure, explain cascade, inject fixes, compare changes, pick colors, record interactions, and more. No obvious gaps.

Maintenance

ActivityMaintained
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    D
    maintenance
    An MCP server and Chrome extension that allows users to select browser DOM elements via a keyboard shortcut to provide detailed technical context to AI coding tools. It captures HTML attributes, CSS styles, and React component metadata, enabling agents to analyze and modify web elements directly.
    596
    MIT
  • A
    license
    Not graded
    quality
    C
    maintenance
    MCP server that enables AI coding agents to read and write to a local-first HTML/CSS design canvas, bridging visual design and code generation.
    MIT
  • A
    license
    A
    quality
    B
    maintenance
    A local-first MCP server that captures rendered web evidence including screenshots, motion, pixel diffs, and CSS animation metadata for coding agents.
    7
    1
    MIT

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/mi60dev/visionaire-engine'

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