Skip to main content
Glama

web_synthesize_shadcn

Generate TypeScript React components using Shadcn UI, Radix, and Tailwind from a website URL or HTML subtree, with Lucide icon mapping and dark-mode variants.

Instructions

Synthesizes clean, production-ready TypeScript React components using Shadcn UI, Radix primitives, Lucide React icons, and Tailwind dark-mode variants from any target website URL or raw HTML subtree.

Input Schema

NameRequiredDescriptionDefault
urlNoTarget website URL (e.g. https://example.com)
htmlNoOptional raw HTML string (if synthesizing from direct HTML instead of fetching URL)
selectorNoDOM tag, CSS selector, or semantic keyword (e.g. header, nav, main, section, hero, pricing, form, card, dialog, default: header)
typescriptNoWhether to generate strict TypeScript interfaces and types (default: true)
componentNameNoOptional custom PascalCase name for the generated React component
detectDarkModeNoWhether to detect and automatically synthesize dark mode variants for light Tailwind classes (default: true)
mapLucideIconsNoWhether to map SVG blobs, fa-icons, and icon classes to clean Lucide React components (default: true)
generateStorybookNoWhether to generate Storybook 7/8 CSF3 stories snippet (default: true)

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observedv1.13.0

TDQS

B3.1/5.0
Behavior2/5

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

No annotations are provided, so the description carries the full behavioral burden and it falls short: it doesn't say whether the tool fetches the URL over the network, how long generation takes, whether it writes files or returns code inline, or what the response looks like. It only names the technology stack and the dark-mode/Lucide/Storybook synthesis capabilities, which largely mirror the parameter schema.

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 front-loaded sentence with the output artifact stated first and the input source last. Dense with tech-stack names but every clause adds identification value; no filler or repetition.

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?

With 8 parameters (all optional), no annotations, and no output schema, the description does not need to restate parameter details but should state what is produced. It names the component output and stack but not the return shape (inline code string vs. file set vs. object with stories). Minor gap rather than a blocking one given the 100% schema coverage.

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%, including defaults and examples, so the schema does the heavy lifting. The description restates dark-mode variants and Lucide mapping without adding format, precedence (url vs html), or selector semantics beyond what the schema says. Baseline 3 applies.

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?

States a specific verb ('Synthesizes') and a concrete output artifact (TypeScript React components using Shadcn UI, Radix, Lucide, Tailwind) from a specific input (URL or raw HTML subtree). An agent can tell it's a code-generation tool, not a recon or decompilation tool. It doesn't explicitly differentiate itself from the closest sibling, web_extract_vibe_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?

No when-to-use / when-not-to-use guidance and no named alternatives, despite a crowded sibling set (web_extract_vibe_components, web_clone_offline_mirror, web_generate_e2e_harness) where routing matters. The only implicit guidance is that either a URL or an HTML string can be supplied.

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