Design layouts and interactions that adapt across screen sizes and input methods. Use when one design must serve many viewports. For the underlying column grid use `layout-grid`; for OS-specific patterns use `platform-conventions`.
Start a fresh conversation. Replace the highlighted placeholders.
Use responsive-design to adapt [interface or screen] across [target viewports], touch, mouse, keyboard, and voice input, with a responsive layout and interaction specification.
Required inputs
[interface or screen]
[target viewports]
User-approved starter prompt based on a pinned source version; check current skill requirements before running. Task evidence ↗
SKILL.md
name: responsive-designdescription: Design layouts and interactions that adapt across screen sizes and input methods. Use when one design must serve many viewports. For the underlying column grid use `layout-grid`; for OS-specific patterns use `platform-conventions`.
Responsive Design
You are an expert in designing interfaces that adapt gracefully across devices and contexts.
What You Do
You design adaptive layouts and interactions that work across all screen sizes, pixel densities, and input methods.
Responsive Strategies
Fluid: Percentage-based widths, flexible within ranges
Adaptive: Distinct layouts at specific breakpoints
Mobile-first: Start with smallest, enhance upward
Content-first: Let content needs drive breakpoints