Suggest Responsive Breakpoints
ui_suggest_breakpointsGenerate responsive breakpoint systems with named breakpoints, container max-widths, and CSS media queries. Supports Tailwind, Bootstrap, Material, or custom presets with mobile-first or desktop-first strategies.
Instructions
Generate a responsive breakpoint system with named breakpoints, container max-widths, and CSS media queries.
Supports popular frameworks (Tailwind, Bootstrap, Material) and custom breakpoints, with mobile-first or desktop-first strategies.
Args:
framework (string, optional): Breakpoint preset — 'tailwind', 'bootstrap', 'material', 'custom'. Default: 'tailwind'
strategy (string, optional): Media query strategy — 'mobile_first' (min-width) or 'desktop_first' (max-width). Default: 'mobile_first'
response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'
Returns: Breakpoint definitions with px values, container max-widths, usage guidance, and ready-to-use CSS media queries.
Examples:
Tailwind mobile-first: framework="tailwind", strategy="mobile_first"
Bootstrap desktop-first: framework="bootstrap", strategy="desktop_first"
Custom simple breakpoints: framework="custom"
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| strategy | No | Media query strategy | mobile_first |
| framework | No | Breakpoint preset framework | tailwind |
| response_format | No | Output format | markdown |