Skip to main content
Glama

web_extract_vibe_components

Extract design tokens and convert target DOM elements like headers or heroes into standalone React JSX components for immediate vibe coding.

Instructions

Extracts design tokens (colors, font hierarchy, Tailwind theme extension) and converts target DOM elements (header, hero, nav, etc.) into clean, standalone React JSX components for immediate vibe coding.

Input Schema

NameRequiredDescriptionDefault
urlYesTarget website URL
selectorNoDOM tag or selector to extract into React JSX (default: header)

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observedv1.13.0

TDQS

B3.2/5.0
Behavior3/5

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

With no annotations at all, the description carries the full behavioral burden. It does disclose the substantive output—design tokens plus standalone JSX—but says nothing about network behavior, timeouts, auth requirements, whether rendering is headless, or how partial failures are reported for what is clearly a remote-fetch operation.

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?

A single dense sentence that front-loads the two output artifacts and ends with the use case. It is efficient, though the parenthetical lists make it slightly overloaded for one sentence.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a two-parameter tool with no output schema and no annotations, the description should pin down the return shape (e.g., tokens as JSON plus JSX as string, single vs. multiple files). It gestures at the outputs but leaves the response structure and failure modes unspecified.

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 both parameters are already documented, making 3 the baseline. The description does add modest value by illustrating selector values ('header, hero, nav'), but does not clarify accepted selector syntax (CSS selector vs. tag name) or what happens when the selector matches nothing.

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

Purpose4/5

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

The description pairs specific verbs with specific artifacts: extracting design tokens (colors, font hierarchy, Tailwind theme) and converting DOM elements into standalone React JSX components. It is far more informative than a tautology, but it never names or contrasts with the closest sibling, web_synthesize_shadcn, which likely also emits components.

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

Usage Guidelines2/5

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

There is no statement of when to reach for this tool versus alternatives such as web_synthesize_shadcn or web_clone_offline_mirror, and no preconditions (e.g., site must be publicly reachable, JS-rendered content). The only hint of context is the phrase 'for immediate vibe coding,' which signals intent but not selection criteria.

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