Breakpoint Buddy
Desktop layout in, responsive CSS for every screen size out
Designers spend 25-40% of design time creating responsive variants. This recipe takes a desktop layout and generates mobile and tablet CSS — intelligent stacking, readable type sizes, touch-friendly targets — not just a squished version of the desktop.
PROMPT
Create a skill called "Breakpoint Buddy". When I give you a desktop HTML/CSS layout (or a design screenshot with the code), generate responsive CSS variants for tablet and mobile breakpoints. Don't just shrink — intelligently restructure: stack multi-column grids, collapse sidebars, convert desktop navigation to a mobile pattern (hamburger, bottom nav, or collapsible — recommend the best fit), ensure all interactive elements are at least 44px touch targets, scale typography for readability, and handle image scaling. Use mobile-first media queries with min-width breakpoints (configurable, default: 375, 768, 1024, 1440). Suggest container queries where appropriate. Output the complete responsive CSS and note any layout decisions that need human review.
How It Works
Give your Claw a desktop HTML/CSS layout (or a design file), and it
generates responsive variants for tablet and mobile breakpoints. Not
a naive "shrink everything" approach — it intelligently restructures
layouts: multi-column grids stack to single column, navigation collapses
to hamburger, touch targets grow to 44px minimum, and typography scales
to stay readable.
What You Get
- Complete media query CSS for tablet (768px) and mobile (375px) breakpoints
- Intelligent layout restructuring: grid stacking, sidebar collapse, nav conversion
- Touch-friendly targets (44px minimum tap areas)
- Responsive typography adjustments
- Image scaling and art direction hints
- Container query suggestions for component-level responsiveness
- A visual preview at each breakpoint
Setup Steps
- Share your desktop HTML/CSS or a design file/screenshot
- Optionally specify custom breakpoints (default: 375px, 768px, 1024px, 1440px)
- Your Claw generates the responsive CSS
- Review and adjust — some design decisions need human judgment
- Integrate into your project
Tips
- Works best with semantic, well-structured HTML — deeply nested divs make it harder
- The generated CSS uses a mobile-first approach with min-width media queries
- Container queries are suggested where appropriate for reusable components
- Always review the mobile nav pattern — hamburger isn't always the right answer
- Pair with Safari Wrangler to catch mobile Safari quirks after conversion