create_responsive_layout
Generate responsive layouts using Tailwind CSS and its-just-ui React components. Specify layout types and breakpoints to create grid, flexbox, container, sidebar, hero, or card-grid designs.
Instructions
Create a responsive layout using Tailwind CSS and its-just-ui components
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| breakpoints | No | ||
| type | Yes |
Implementation Reference
- src/tools/utilityTools.ts:288-379 (handler)Core handler function that generates responsive layout JSX code based on the provided type (grid, flexbox, etc.). Returns predefined layout templates using Tailwind CSS classes.createResponsiveLayout(config: { type: string; breakpoints?: Record<string, string>; }): string { const { type } = config; const layouts: Record<string, string> = { grid: `// Responsive Grid Layout <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 p-4"> <Card>Item 1</Card> <Card>Item 2</Card> <Card>Item 3</Card> <Card>Item 4</Card> </div>`, flexbox: `// Responsive Flexbox Layout <div className="flex flex-col md:flex-row gap-4 p-4"> <div className="flex-1"> <Card>Flex Item 1</Card> </div> <div className="flex-1"> <Card>Flex Item 2</Card> </div> <div className="flex-1"> <Card>Flex Item 3</Card> </div> </div>`, container: `// Responsive Container Layout <div className="container mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto"> <h1 className="text-2xl md:text-3xl lg:text-4xl font-bold mb-4"> Page Title </h1> <div className="prose lg:prose-xl"> {/* Content */} </div> </div> </div>`, sidebar: `// Responsive Sidebar Layout <div className="flex flex-col md:flex-row min-h-screen"> {/* Sidebar */} <aside className="w-full md:w-64 lg:w-72 bg-gray-100 p-4"> <nav> <ul className="space-y-2"> <li><Anchor href="#home">Home</Anchor></li> <li><Anchor href="#about">About</Anchor></li> <li><Anchor href="#contact">Contact</Anchor></li> </ul> </nav> </aside> {/* Main Content */} <main className="flex-1 p-4 md:p-6 lg:p-8"> {/* Content */} </main> </div>`, hero: `// Responsive Hero Section <section className="relative bg-gradient-to-r from-blue-500 to-purple-600 text-white"> <div className="container mx-auto px-4 py-16 md:py-24 lg:py-32"> <div className="max-w-4xl mx-auto text-center"> <h1 className="text-3xl md:text-5xl lg:text-6xl font-bold mb-4"> Welcome to Our Site </h1> <p className="text-lg md:text-xl lg:text-2xl mb-8"> Build amazing experiences with its-just-ui </p> <div className="flex flex-col sm:flex-row gap-4 justify-center"> <Button size="lg" variant="primary">Get Started</Button> <Button size="lg" variant="outline">Learn More</Button> </div> </div> </div> </section>`, "card-grid": `// Responsive Card Grid <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6 p-4"> {[1, 2, 3, 4, 5, 6, 7, 8].map((item) => ( <Card key={item} variant="elevated" className="hover:shadow-xl transition-shadow"> <div className="aspect-video bg-gray-200 rounded-t-lg mb-4"></div> <h3 className="text-lg font-semibold mb-2">Card Title {item}</h3> <p className="text-gray-600 mb-4">Card description goes here.</p> <Button variant="primary" fullWidth>View Details</Button> </Card> ))} </div>`, }; return layouts[type] || layouts.container; },
- src/index.ts:248-277 (registration)Tool registration in the list_tools response, including name, description, and input schema definition.name: "create_responsive_layout", description: "Create a responsive layout using Tailwind CSS and its-just-ui components", inputSchema: { type: "object", properties: { type: { type: "string", enum: [ "grid", "flexbox", "container", "sidebar", "hero", "card-grid", ], }, breakpoints: { type: "object", properties: { sm: { type: "string" }, md: { type: "string" }, lg: { type: "string" }, xl: { type: "string" }, }, }, }, required: ["type"], }, },
- src/index.ts:427-443 (handler)Dispatch handler in the main tool call switch statement that validates input with Zod and delegates to utilityTools.createResponsiveLayout.case "create_responsive_layout": { const config = z .object({ type: z.string(), breakpoints: z.record(z.string()).optional(), }) .parse(args); const layout = utilityTools.createResponsiveLayout(config); return { content: [ { type: "text", text: layout, }, ], }; }
- src/index.ts:428-432 (schema)Zod schema used for input validation in the tool handler.const config = z .object({ type: z.string(), breakpoints: z.record(z.string()).optional(), })