Designers

Breakpoint planner

plan_breakpoints

Read-only

Plan responsive breakpoints from content. Pass contentWidths (list of px widths where your layout starts to fail or needs to change, found by dragging the browser or frame), and optionally deviceTargets (px widths of devices you must support; these are checked against the result, never used to create breakpoints), minMeasure (default 45 characters) and maxMeasure (default 75) for text columns, fontSize (default 16), gutter (default 24), margin (default 24), maxColumns (default 3), and fluidMin and fluidMax (viewport range for the fluid rules, default 320 and 1440). Returns breakpoints (your content widths plus widths derived from how many columns at the minimum measure fit, and where one column reaches the maximum measure), a container max-width for each, ready CSS, fluid clamp() rules for body size, h1, gutter and page padding computed so they hit exact minimum and maximum at the range ends, a note for any two breakpoints within 10% of each other, and for each device target whether it is already near a breakpoint. Sources: Marcotte, Responsive Web Design (breakpoints follow the design). The 45 to 75 character measure, the 0.5em average character width and the 10% closeness test are conventions. Pure arithmetic, nothing stored.

Tool call template

Replace each placeholder with a value matching the input schema. Only required parameters are included; add optional parameters as needed.

{
  "id": 1,
  "jsonrpc": "2.0",
  "method": "tools/call",
  "params": {
    "arguments": {
      "contentWidths": "<contentWidths>"
    },
    "name": "plan_breakpoints"
  }
}

Input Schema

Name	Required	Description
`gutter`	No	Gutter in px (default 24).
`margin`	No	Page margin per side in px (default 24).
`fluidMax`	No	Viewport where fluid values stop (default 1440).
`fluidMin`	No	Viewport where fluid values start (default 320).
`fontSize`	No	Body size in px (default 16).
`maxColumns`	No	Most text columns you will show (default 3, max 6).
`maxMeasure`	No	Maximum characters per line (default 75).
`minMeasure`	No	Minimum characters per line (default 45).
`contentWidths`	Yes	Widths in px where the layout needs to change. Comma separated string also accepted.
`deviceTargets`	No	Device widths to check against the result, for example [390, 768, 1280].

Schema Changelog

Changes observed during successful MCP inspections.

AddedOct 24, 2026

TDQS

A4.2/5.0

Behavior4/5

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

Annotations already declare readOnlyHint=true and destructiveHint=false; the description adds that it is 'pure arithmetic, nothing stored' and details what outputs are produced (breakpoints, CSS, clamp rules, notes). It also discloses that deviceTargets are checked but never used to create breakpoints, which is valuable behavioral context beyond 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 a single dense paragraph that front-loads the purpose and then systematically lists parameters and return values. It is fairly long but every sentence adds useful information given 10 parameters and no output schema; could be slightly more structured but is efficient.

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?

With no output schema, the description must explain return values, and it does thoroughly: breakpoints, container max-widths, ready CSS, fluid clamp() rules, closeness notes, and device target proximity. It also cites sources and conventions, leaving no significant gaps for an agent to call it correctly.

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 is 3. The description adds meaning beyond the schema by explaining the purpose of contentWidths (where layout starts to fail), deviceTargets (checked against result, never used to create), minMeasure/maxMeasure (for text columns), and fluidMin/fluidMax (viewport range for fluid rules).

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 states a specific verb+resource ('Plan responsive breakpoints from content') and is unambiguous. It is distinct from all siblings; no other tool plans breakpoints.

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

Usage Guidelines3/5

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

The description implies usage by explaining where contentWidths come from ('found by dragging the browser or frame'), but it offers no explicit when-to-use, when-not-to-use, or alternative comparisons against siblings like build_grid or plan_responsive_images.

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

All Designers tools Inspect

Try in Browser

Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

Glama MCP Gateway

Add one secure layer between your agents and this server.

Resources

Need Help?