Agent skill · design visual · onewave-ai
responsive-layout-builder
Build responsive layouts with CSS Grid, Flexbox, and container queries. Use when creating responsive designs, fixing layout issues, or building mobile-first layouts.
Why this skill is useful
Provides specific CSS techniques and layout patterns for responsive design that the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-07-15. 242 stars on the source repository.
What this skill does
Responsive Layout Builder Instructions When building responsive layouts: 1. Identify the layout pattern (grid, sidebar, cards, etc.) 2. Start mobile-first 3. Use appropriate CSS technique (Grid vs Flexbox) 4. Add breakpoints for larger screens 5. Test across viewports Breakpoints Common Layout Patterns 1. Holy Grail Layout 2. Responsive Card Grid 3. Sidebar Layout 4. Hero Section 5. Masonry Grid 6. Sticky Header Container Queries (Modern) Flexbox vs Grid Decision Use Flexbox Use Grid ------------- ---------- Navigation bars Page layouts Card content alignment Card grids Centering content Complex 2D layouts Space distribution Overlapping elements Unknown item count Defined structure Responsive Typography Testing Checklist [ ] 320px (small phones) [ ] 375px (iPhone) [ ] 768px (tablet portrait) [ ] 1024px (tablet landscape / laptop) [ ] 1280px+ (desktop) [ ] Test with actual content (not lorem ipsum) [ ] Test with long/short content variations
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills onewave-ai/responsive-layout-builder