What is the layout-grid skill?
The layout-grid skill sits in the ui-design plugin of Owl-Listener's designer-skills pack. It makes your agent specify a grid in numbers: columns per device, gutter and margin widths, breakpoints, grid types and layout patterns, so every screen aligns to the same structure.
Layout-grid is a skill inside the ui-design plugin of Owl-Listener's designer-skills. The SKILL.md describes an expert in grid systems and layout structure, and asks the agent to define the underlying structure that arranges content.
For related questions the description names two neighbours, spacing-system and responsive-design. Spacing values and device behaviour live there, while this skill fixes the grid the page sits on.
The numbers it specifies
- Columns: 4 on mobile, 8 on tablet and 12 on desktop.
- Gutters: 16, 24 or 32px.
- Margins: 16px on mobile and 24 to 48px on desktop.
- Breakpoints: for example 375, 768, 1024 and 1440.
Grid types and responsive approaches
Four grid types are covered: column, modular, baseline on a 4 or 8px unit, and compound. Responsive behaviour can be fluid, fixed max-width, adaptive, or column dropping, so the agent picks one deliberately.
Layout patterns
- Full-bleed sections that span the viewport.
- Contained sections held to a maximum width.
- Asymmetric layouts with a sidebar beside the main content.
- Card grids that fill automatically.
Who the layout-grid skill is for
Best for
- Defining the grid before screens are designed or built.
- Documenting grid specs so teams use the same gutters and margins.
- Deciding where breaking the grid is intentional.
Not for
- Diagnosing why an existing page feels off. Related: layout.
- Final detail work such as states and drift. Related: polish.
- Planning a whole new design from a brief. Related: frontend-design.
Use it with UiChemy
A grid spec feeds directly into a layout built in Figma. UiChemy Figma to WordPress converts that Figma design into a WordPress site, and Composer writes HTML, CSS and JS in Elementor or Gutenberg. Click Get Started on uichemy.com.
How to install Layout Grid Skill: Columns, Gutters, Breakpoints
/plugin marketplace add Owl-Listener/designer-skillsRegister the marketplace
Paste the command above into the agent. It only records the source repository and installs nothing yet.
Install ui-design
Run
/plugin install ui-design@designer-skills, or tick the plugin on the Discover tab of /plugin. layout-grid is included.Gemini CLI
Per the README, copy the repository's .gemini/extensions contents into a .gemini/extensions folder in your project.
Make the request
Describe the page or product and ask for a layout grid spec. Mention your target devices.
Check that it loaded
Ask for a grid for one product. The reply should give columns per device, gutter and margin sizes, breakpoints and a named layout pattern.
Key features
- Device column countsFour columns for mobile, eight for tablet and twelve for desktop set the base structure.
- Gutter widthsGutters of 16, 24 or 32px keep column spacing consistent.
- Page marginsMargins run 16px on mobile and 24 to 48px on desktop.
- Breakpoint setExample breakpoints at 375, 768, 1024 and 1440 anchor the responsive plan.
- Four grid typesColumn, modular, baseline and compound grids are each defined, with baselines on a 4 or 8px unit.
- Responsive approachesFluid, fixed max-width, adaptive and column-dropping approaches are named.
- Layout patternsFull-bleed, contained, asymmetric sidebar plus main, and auto-fill card grids are described.
- Consistency rulesKeep gutters and margins consistent and align elements to the grid.
- Documented exceptionsSpecs are documented, every breakpoint is tested, and intentional grid-breaking is allowed.
Frequently asked questions
What does the layout-grid skill do?
It instructs an AI agent to specify a grid system: column counts per device, gutters, margins, breakpoints, grid types and layout patterns. It is part of the ui-design plugin in Owl-Listener's designer-skills pack and outputs numbers a designer or developer can use.
How do I install layout-grid?
Run /plugin marketplace add Owl-Listener/designer-skills, then /plugin install ui-design@designer-skills. Gemini CLI users copy the repository's .gemini/extensions contents into their project, as the README says. Layout-grid is bundled in ui-design, so nothing extra is needed.
How many columns does it recommend?
Typically four on mobile, eight on tablet and twelve on desktop. It also gives gutter options of 16, 24 or 32px, mobile margins of 16px and desktop margins of 24 to 48px, with example breakpoints at 375, 768, 1024 and 1440.
What grid types does it cover?
Column grids, modular grids, baseline grids on a 4 or 8px unit, and compound grids that combine them. The agent chooses a type based on the content, so a card gallery and a text article do not need the same structure.
Does it handle responsive behaviour?
It names four approaches: fluid, fixed max-width, adaptive and column dropping. For wider device behaviour the description points to a separate responsive-design skill, so layout-grid sets the grid while that one covers how pages adapt.
Which agents can use it?
The README names Claude Code and Gemini CLI as target agents for the pack. No other agent is listed. The skill is plain instruction text, so other tools that read skill folders could load it, though the repository does not promise that.
Can I break the grid?
Yes, deliberately. The best practices say to allow intentional grid-breaking, as long as gutters and margins stay consistent elsewhere, elements align to the grid by default and the specs are documented so the exceptions are visible.
What is the license?
GitHub lists the designer-skills repository under the MIT license. That permits reading and reusing the skill text. Check the repository's license file for full terms before you include files in anything you distribute.