Skip to main content
Glama

Audit layout across screens

check_responsive
Read-only

Audits a URL across multiple device viewports to find responsive layout issues such as horizontal overflow, clipped text, small tap targets, offscreen images, and viewport meta problems.

Instructions

Abre la URL en varias pantallas y reporta SOLO problemas de responsive, sin imagenes: desborde horizontal con el selector exacto que lo causa, texto recortado, targets tocables chicos, imágenes fuera de viewport, meta viewport faltante o que bloquea el zoom, y que media queries activan en cada ancho. Severidades: high = se rompe el layout, medium = se pierde contenido o baja performance, low = incomodo en tactil, info = contexto. Cada pantalla reporta viewport.deviceWidthPx (la pantalla real) y viewport.layoutWidthPx (lo que mide window.innerWidth); si layoutWidthPx > deviceWidthPx la pagina no es responsive ahi. Usa esta tool para verificar un rediseño o para encontrar breakpoints rotos; despues captura con screenshot_on el dispositivo que falla para verlo.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
urlYesURL http/https a abrir en la pantalla emulada
blockNoResource types a bloquear (acelera capturas en paginas pesadas)
localeNoLocale, p.ej. "es-PY" para ver formatos locales
devicesNoPantallas a auditar. Default: iphone-se, iphone-15-max, galaxy-s24, ipad-pro-11, laptop, desktop-hd
settleMsNoMilisegundos extra tras cargar para dejar terminar animaciones (default 400)
timezoneNoTimezone IANA, p.ej. "America/Asuncion"
timeoutMsNoTimeout de navegacion y esperas (default 30000)
toleranceNoPx de holgura antes de marcar desborde (default 2)
waitUntilNoEstrategia de espera antes de capturar. "networkidle" para SPA, "commit" si la red es lenta
minTapSizeNoPx minimos de un target tocable (default 44)
colorSchemeNoTema pedido por CSS prefers-color-scheme
geolocationNoCoordenadas para emular GPS
waitForSelectorNoSelector CSS que debe verse antes de capturar (útil en SPA)
includeMediaQueriesNoIncluye las media queries que matchean en cada viewport (default false)

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observedv0.2.1

TDQS

A4.1/5.0
Behavior4/5

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

Annotations cover the safety profile (readOnlyHint, openWorldHint), and the description adds genuinely useful behavior: the severity taxonomy (high/medium/low/info) and the semantic of viewport.deviceWidthPx vs layoutWidthPx as the responsiveness test. It stops short of runtime cost or how heavy a 12-device run is.

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?

Three tight paragraphs with the core purpose front-loaded, then severity definitions, then the usage/handoff guidance. Dense but every sentence carries information; slightly long but no filler.

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 complex 14-parameter, no-output-schema tool, the description adequately explains what is reported, the severity levels, and the responsiveness criterion, so an agent can interpret results. It could say more about runtime expectations across many devices, but 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?

Schema description coverage is 100%, so the schema already documents all 14 parameters, establishing the baseline of 3. The description corroborates a few (media queries, overflow selector) and clarifies output semantics, but adds little parameter-level meaning beyond the schema.

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

Purpose5/5

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

States a specific verb+resource: opens a URL across multiple screens and reports only responsive problems (overflow, clipped text, tap targets, viewport meta, media queries). It explicitly excludes images and names the failing-device handoff to screenshot_on, so an agent can distinguish it from siblings without opening a schema.

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?

Gives clear when-to-use (verifying a redesign, finding broken breakpoints) and a concrete follow-up alternative (screenshot_on on the failing device). It does not address the session-based siblings (open_responsive_session/observe_responsive_session), so the alternative routing is incomplete but the positive guidance is strong.

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