Skip to main content
Glama

レイアウト破綻の検査

layout_check
Read-onlyIdempotent

Render HTML in a headless browser to detect layout defects: text overlap, overflow, horizontal scroll, placeholder leftovers, broken references. No baseline needed.

Instructions

HTMLをレンダリングしてレイアウトの破綻を検出する。検査専用でファイルは変更しない。

比較用のベースライン画像は不要。DOMの座標と文字の描画矩形を実測するため、 「どの要素が何ピクセルはみ出しているか」が数値で返る。

検出: 文字の重なり / 画面外や親からのはみ出し / overflow:hidden による切り捨て / 横スクロールの発生 / undefined・{{name}} 等の未展開 / 参照切れ / id重複 / 不可視テキスト

引数:

  • html | path | url のいずれか1つ(必須)

  • viewport (必須): { width, height }。幅で結果が変わるため既定値なし

  • checks (任意): 検査の絞り込み。既定は element-collision 以外すべて

  • format (任意): "text"(既定)または "json" その他: minOverlapPx, minOverlapArea, allowNetwork, executablePath, settleMs

戻り値: summary(pass, errors, warnings, infos)と findings の配列。 各所見は check / severity / verdict / elements(selector, text, rect)/ evidence / suggest を持つ。 verdict は "static"(確定)か "candidate"(座標上は検出、可視性は未判定)。

対象外: デザインの評価、コントラスト比などのアクセシビリティ検査、前回との差分比較。

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
urlNo検査するページのURL(既定では localhost のみ)
htmlNo検査するHTML文字列
pathNo検査するHTMLファイルの絶対パス
checksNo実行する検査。省略時は element-collision 以外
formatNo出力形式(既定text)
settleMsNo描画後の追加待機ms
viewportYesビューポート(CSSピクセル)。スライドは1280x720、Webは1280x800が目安
allowNetworkNo外部通信を許可する(既定false)
minOverlapPxNo重なりの最小幅(既定3)
executablePathNo使用するChromiumのパス
minOverlapAreaNo重なりの最小面積px2(既定24)
Behavior5/5

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

Annotations already declare readOnlyHint=true and idempotentHint=true; the description reinforces and extends this by stating no baseline image is needed, that measurement is done via DOM coordinates and text drawing rectangles, and that verdicts are classified as 'static' or 'candidate' to indicate certainty. This adds meaningful behavioral context beyond the annotations.

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

Conciseness4/5

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

The description is well-structured with clear sections for purpose, detections, arguments, return value, and exclusions. It is information-dense but not bloated; however, it does partially restate parameter details already present in the schema, which keeps it from a perfect score.

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 an 11-parameter tool with no output schema, the description thoroughly covers the return shape (summary plus findings with check/severity/verdict/elements/evidence/suggest) and explains the static/candidate verdict nuance. It also documents exclusions, defaults, and required inputs, making it nearly self-contained.

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 one-of constraint for html/path/url, the reason viewport has no default, and the default values for checks and format. It does not explain every parameter in detail, but it meaningfully supplements 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 renders HTML to detect layout breakage and provides a concrete list of detectable issues (text overlap, overflow, horizontal scroll, unexpanded placeholders, broken references, duplicate IDs, invisible text). It also explicitly notes it is inspection-only and does not modify files, distinguishing its purpose.

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 says when to use it (detect layout breakage) and when not to use it (excludes design evaluation, accessibility contrast checks, and before/after diff comparison). It also clarifies key constraints such as providing exactly one of html/path/url and the viewport being mandatory because width affects results.

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

Install Server

Other Tools

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/h-kazuki-pixel/layout-doctor-mcp'

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