Skip to main content
affpapa.org
RU EN
skill CX Codex

layout-grid — Claude Code skill: page grids and breakpoints

This skill defines a responsive page grid: columns, gutters, margins and breakpoint behaviour. Handy when you are setting up page structure from scratch.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add Owl-Listener/designer-skills --skill layout-grid -a claude-code
Open on GitHub

What layout-grid does

The skill turns the agent into a layout grid assistant for digital product design. It walks through grid anatomy: columns (4 on mobile, 8 on tablet, 12 on desktop), gutters of 16, 24 or 32 px, outer page margins, and the breakpoints where the layout adapts. Then it picks a grid type — column, modular, baseline for vertical rhythm, or compound for overlapping grids.

Responsive behaviour gets the same treatment: fluid columns, a fixed max-width container, a distinct layout per breakpoint, or dropping columns at smaller sizes. A separate section covers common patterns such as full-bleed content, contained layouts with margins, an asymmetric sidebar plus main area, and card grids that auto-fill.

What that means for your project: the agent keeps gutters and margins consistent and aligns content to the grid instead of eyeballing block positions. It advises testing every breakpoint, not just the extremes, and allows deliberate grid-breaking for emphasis. For the spacing scale inside components, reach for spacing-system; for cross-device behaviour, responsive-design.

What it helps with

  • set columns, gutters and margins for a new layout
  • pick a grid type for a specific page
  • describe how the layout adapts at each breakpoint
  • keep spacing values consistent across the project
  • write a grid spec that developers can follow

Example prompts for the agent

  • define a grid for the landing page: 12 columns on desktop, 4 on mobile
  • which breakpoints and gutters should I use for a card-based catalog
  • write up the grid spec so I can hand it to a frontend developer

How to install layout-grid

1Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill layout-grid -a claude-code

2Manually: put the files in place

~/.claude/skills/layout-grid/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/layout-grid/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about layout-grid

How do I install layout-grid in Claude?

Run npx skills add Owl-Listener/designer-skills --skill layout-grid -a claude-code. The skill lands in ~/.claude/skills/layout-grid/SKILL.md.

What does layout-grid do?

It helps define a responsive page grid: columns, gutters, outer margins and breakpoint behaviour. It also suggests common layout patterns.

How is layout-grid different from spacing-system and responsive-design?

layout-grid handles page structure. The spacing scale inside components belongs to spacing-system, and cross-device behaviour is covered by responsive-design.

Source text

SKILL.md · MIT 
---
name: layout-grid
description: Define a responsive grid — columns, gutters, margins, and breakpoint behaviour. Use when establishing page structure. For the spacing scale inside components use `spacing-system`; for cross-device behaviour use `responsive-design`.
---
# 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

© Owl-Listener · MIT · Owl-Listener/designer-skills

Similar skills

Everything for Design →
image-first-grid-layout MengTo Directs coding agents to build layout grids around full-bleed photography with subtle guide rails and low-contrast overlays. Great for cinematic landing pages. CX Codex +1 1,400installs framed-grid-layout MengTo A skill that spells out how to build pages with thin visible section borders, L-shaped corner brackets and strict grid alignment. CX Codex +1 1,400installs better-layout jakubkrehel A skill that sets grouping, alignment, reading order and responsive structure, then stress-tests the result by resizing, translating and mirroring it for RTL. CX Codex +1 30,800installs responsive-design akillness The skill turns a vague “breaks on mobile” report into one named responsive surface, a strategy packet and a verification plan. CX Codex +1 478installs node-link-and-diagram-layout official OpenAI This skill selects layouts for graphs, diagrams, and connected nodes. Use it when crossings, overlaps, edge routing, or unstable placement make a visual hard to read. CX Codex GP ChatGPT 16installs flutter-build-responsive-layout flutter This skill guides coding agents to build adaptive Flutter UIs across mobile and desktop screens using LayoutBuilder and BoxConstraints. CX Codex +1 42,500installs

From the same set111

color-system This skill walks an agent through building a product palette: tonal scales, semantic roles and WCAG contrast checks. Useful when colours are defined from scratch. CX Codex +1 2,500installs illustration-style Define an illustration style guide covering visual language, colour usage, and component placement rules. Useful when standardising graphics or commissioning art. CX Codex +1 2,500installs visual-hierarchy This skill sets the order in which interface elements attract attention through size, weight, colour, spacing, and position. Use it when composing new screens. CX Codex +1 2,500installs data-visualization Guides your agent through picking a chart type and setting axes, labels and accessible colors so the result reads without a legend. CX Codex +1 2,400installs icon-system Sets design specifications for icon systems, covering grids, size tiers, naming rules, and accessibility. Ideal for standardising iconography in design systems. CX Codex +1 2,400installs user-flow-diagram Draws screen-level flow diagrams with entry points, decision branches and error paths. Useful when a feature needs step-by-step specs. CX Codex +1 2,400installs dark-mode-design This skill turns an existing light palette into a dark theme: surface elevation, contrast, desaturated accents. Use it when the light tokens already exist. CX Codex +1 2,400installs responsive-design A skill that steers your coding agent toward layouts and interactions that hold up across screen sizes and input methods. CX Codex +1 2,300installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor