Layout Grid
Define responsive column grids, gutters, margins, and breakpoint rules so solo builders can hand dev-ready layout specs to their agent.
Overview
Layout Grid is an agent skill for the Build phase that defines responsive column grids, gutters, margins, and breakpoint behavior for digital product layouts.
Install
npx skills add https://github.com/owl-listener/designer-skills --skill layout-gridWhat is this skill?
- Specifies column counts by breakpoint (4 mobile, 8 tablet, 12 desktop) plus gutters and margins
- Covers column, modular, baseline (4px/8px), and compound grid types
- Documents fluid, fixed, adaptive, and column-dropping responsive behaviors
- Maps common patterns: full-bleed, contained, asymmetric sidebar, and card auto-fill grids
- Emphasizes dev handoff: test every breakpoint and document grid specs for engineers
- 4/8/12 column breakpoint model with typical 375/768/1024/1440px breakpoints
Adoption & trust: 597 installs on skills.sh; 1.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your UI drifts across breakpoints because spacing and columns were never specified as a single grid system.
Who is it for?
Solo builders defining or refactoring layout rules for a SaaS or mobile web app before implementation.
Skip if: Teams that already have a locked design-system grid in Figma and only need pixel tweaks on one screen.
When should I use this skill?
You need to define or standardize responsive page grids, gutters, margins, and breakpoint behavior for a digital product.
What do I get? / Deliverables
You get a documented responsive grid (breakpoints, gutters, margins, and patterns) ready for design files and frontend implementation.
- Responsive grid specification (columns, gutters, margins, breakpoints)
- Pattern notes for full-bleed, contained, and card layouts
Recommended Skills
Journey fit
Layout grids are specified while shaping product UI during the build phase, before or alongside frontend implementation. Frontend subphase is where page structure, breakpoints, and grid alignment directly inform components and CSS layout.
How it compares
Use for structured layout-system specs instead of one-off “make it responsive” chat requests.
Common Questions / FAQ
Who is layout-grid for?
Indie builders and small teams who own product UI and need agent help producing consistent responsive grid documentation without a dedicated design ops role.
When should I use layout-grid?
During Build (frontend) when starting a new app shell, redesigning marketing pages, or aligning a card or dashboard layout across mobile, tablet, and desktop breakpoints.
Is layout-grid safe to install?
It is procedural design guidance with no required shell or network access in the skill text; review the Security Audits panel on this page before installing from any third-party repo.
SKILL.md
READMESKILL.md - Layout Grid
# Layout Grid You are an expert in layout grid systems for digital product design. ## What You Do You define responsive grid systems that create consistent, flexible page layouts across breakpoints. ## Grid Anatomy - **Columns**: Typically 4 (mobile), 8 (tablet), 12 (desktop) - **Gutters**: Space between columns (16px, 24px, or 32px typical) - **Margins**: Outer page margins (16px mobile, 24-48px desktop) - **Breakpoints**: Points where layout adapts (e.g., 375, 768, 1024, 1440px) ## Grid Types - **Column grid**: Equal columns for general layout - **Modular grid**: Columns + rows creating modules - **Baseline grid**: Vertical rhythm alignment (4px or 8px) - **Compound grid**: Overlapping grids for complex layouts ## Responsive Behavior - Fluid: columns stretch proportionally - Fixed: max-width container with centered content - Adaptive: distinct layouts per breakpoint - Column dropping: reduce columns at smaller sizes ## Common Patterns - Full-bleed: content spans entire viewport - Contained: max-width with margins - Asymmetric: sidebar + main content - Card grids: auto-fill responsive cards ## Best Practices - Use consistent gutters and margins - Align content to the grid, not arbitrarily - Test at every breakpoint, not just the extremes - Document grid specs for developers - Allow intentional grid-breaking for emphasis