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
| Name | Required | Description | Default |
|---|---|---|---|
| url | No | Target website URL (e.g. https://example.com) | |
| html | No | Optional raw HTML string (if synthesizing from direct HTML instead of fetching URL) | |
| selector | No | DOM tag, CSS selector, or semantic keyword (e.g. header, nav, main, section, hero, pricing, form, card, dialog, default: header) | |
| typescript | No | Whether to generate strict TypeScript interfaces and types (default: true) | |
| componentName | No | Optional custom PascalCase name for the generated React component | |
| detectDarkMode | No | Whether to detect and automatically synthesize dark mode variants for light Tailwind classes (default: true) | |
| mapLucideIcons | No | Whether to map SVG blobs, fa-icons, and icon classes to clean Lucide React components (default: true) | |
| generateStorybook | No | Whether to generate Storybook 7/8 CSF3 stories snippet (default: true) |