Skip to main content
Glama

Delimit Design Validate Responsive

delimit_design_validate_responsive
Read-onlyIdempotent

Validate responsive design patterns with static CSS analysis and optional Playwright testing to flag missing media queries, fixed widths, or non-mobile-first patterns for CI checks.

Instructions

Validate responsive design patterns via static CSS analysis and optional dynamic Playwright testing.

When to use: as a CI check after editing UI/CSS, to flag missing media queries, fixed widths, or non-mobile-first patterns. When NOT to use: for accessibility audits (use delimit_story_accessibility) or component scaffolding (delimit_design_generate_component).

Sibling contrast: delimit_story_accessibility checks WCAG; this checks responsive patterns.

Side effects: read-only static analysis of CSS files and dynamic browser check if URL is provided. Calls backends.ui_bridge.design_validate_responsive. Coerces check_types from comma string to list via _coerce_list_arg.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
urlNoOptional URL or HTML file path for dynamic Playwright testing.
check_typesNoSpecific checks ("breakpoints", "containers", "fluid-type", etc.) as comma string or list. None = all.
project_pathYesProject path to validate. Required.

Output Schema

TableJSON Schema
NameRequiredDescriptionDefault

No arguments

Schema Changelog

Changes observed during successful MCP inspections. Dates show when Glama detected each change.

  1. Changed1 schema field changedv4.13.2
    • addedInput schema / properties / url
      Added value: +{
      +  "anyOf": [
      +    {
      +      "type": "string"
      +    },
      +    {
      +      "type": "null"
      +    }
      +  ],
      +  "default": null,
      +  "description": "Optional URL or HTML file path for dynamic Playwright testing."
      +}
  2. Changed2 schema fields changedv4.7.9
    • changedInput schema / properties / check_types / description
      Previous value: -"Check types (breakpoints, containers, fluid-type, etc.)."New value: +"Specific checks (\"breakpoints\", \"containers\", \"fluid-type\", etc.) as comma string or list. None = all."
    • changedInput schema / properties / project_path / description
      Previous value: -"Project path to validate."New value: +"Project path to validate. Required."
  3. Changed3 schema fields changedv4.5.5
    • changedInput schema / properties / check_types / anyOf
      Previous value: -[
      -  {
      -    "items": {
      -      "type": "string"
      -    },
      -    "type": "array"
      -  },
      -  {
      -    "type": "null"
      -  }
      -]New value: +[
      +  {
      +    "type": "string"
      +  },
      +  {
      +    "items": {
      +      "type": "string"
      +    },
      +    "type": "array"
      +  },
      +  {
      +    "type": "null"
      +  }
      +]
    • addedInput schema / properties / check_types / description
      Added value: +"Check types (breakpoints, containers, fluid-type, etc.)."
    • addedInput schema / properties / project_path / description
      Added value: +"Project path to validate."
  4. First observedv0.1.0

TDQS

A4.9/5.0
Behavior5/5

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

Annotations already declare readOnlyHint, idempotentHint, and destructiveHint. The description adds meaningful behavioral context beyond those: it performs read-only static CSS analysis, may run a dynamic browser check if URL is provided, calls a backend bridge, and coerces check_types. No contradiction with annotations.

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 well-structured with clear sections: purpose, when to use, when not to use, sibling contrast, and side effects. Every sentence contributes useful guidance, and the core purpose 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 3-parameter tool with a full output schema and read-only annotations, the description covers the use case, exclusions, side effects, and a parameter conversion nuance. Nothing critical is missing for an agent to decide whether 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 description coverage is 100%, so the baseline is 3. The description adds value by disclosing that check_types is coerced from a comma string to a list via _coerce_list_arg, which affects how the agent can pass parameters. It reinforces the url-based dynamic testing behavior but does not enumerate all valid check_type values.

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 opens with a specific verb and resource: 'Validate responsive design patterns via static CSS analysis and optional dynamic Playwright testing.' The sibling contrast explicitly distinguishes it from delimit_story_accessibility, so an agent can tell what this tool does without opening schemas.

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 states exactly when to use it ('as a CI check after editing UI/CSS'), when NOT to use it ('for accessibility audits' or 'component scaffolding'), and names the alternative tools. This is explicit routing guidance with no ambiguity.

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/delimit-ai/delimit-mcp-server'

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