Layout Skill

What is the Impeccable layout skill?

Layout is one of 24 commands inside Impeccable, a design skill for AI coding agents. You run it as /impeccable layout with an optional target. It loads reference/layout.md, which opens with a rule: diagnose the structural problem before moving boxes.

The command turns product priority into reading order, grouping, rhythm and usable space. It changes structure inside your established look. Replacing the look itself belongs to a different step.

What changes in your agent's output

• The primary element, the secondary element and the major groups are identifiable in order when the page is blurred.
• Related items sit close together and groups are separated, so fewer boxes and borders are needed to explain structure.
• Spacing comes from a documented scale and creates a rhythm of tight and generous intervals, not one value repeated.
• Responsive behavior reorders, collapses or reflows by priority, and focus order still matches the visual order.
• Long content, empty states, overlays and small touch targets stop breaking the structure.

How layout works, in order

1. Run a layout assessment of representative states and viewports, answering seven questions with evidence.
2. Run a mechanical scan with impeccable detect --json --scope layout.
3. Name the spatial thesis: reading path, groupings, lead and support, density, adaptation.
4. Apply the changes, verify against a checklist and rerun the scan.
5. Hand off to /impeccable polish when the structure holds. If type is the problem rather than spacing, run /impeccable typeset first.

Who Impeccable layout is for

Best for

• Screens where everything has equal weight and nothing leads.
• Pages built from a framework default: identical cards, equal columns, one spacing value everywhere.
• Responsive breakage where content shrinks instead of reorganizing.
• Dashboards and docs that need stable density, and campaign pages that can earn asymmetry.

Not for

• Changing colors, fonts or brand look. Those belong to other commands.
• Replacing the visual identity. Layout changes structure inside the existing world.
• Delivering WordPress output. It edits front-end code in your project.

Use it with UiChemy

Layout fixes the structure of the build. When the page has to become editable in WordPress, UiChemy AI to WordPress imports an existing AI build, so the spacing and grouping you fixed carry into an editable page. Click Get Started on uichemy.com.

How to install Layout

npx impeccable install

1. Run the installer from your project root

   Run npx impeccable install. It lists the agent folders it detects, such as ~/.claude, ~/.codex or a project-local .cursor, lets you keep or change the set, then asks whether to install for this project or globally.

2. Skip the prompts in scripts

   Pass --providers=claude,codex,cursor and --scope=project (or global) to choose without questions. On Claude Code, Cursor, Codex, GitHub Copilot and Grok Build the installer also writes the provider-native design hook for the current project.

3. Reload your agent

   Restart or reload the harness so it picks up the new skill. In Codex, open /skills or type $impeccable.

4. Run init once

   Run /impeccable init. It reads the project, asks only for missing product facts, and writes PRODUCT.md so later commands know the audience, purpose and constraints.

5. Run layout

   Run /impeccable layout the dashboard. The target is optional and can be a page, a component or a file. /impeccable pin layout creates a standalone /layout shortcut.

Check that it loaded

Type /impeccable on its own. It shows the command list, and layout should be in it.

Read the official instructions on GitHub

Key features

• Two isolated assessmentsA layout assessment and a mechanical scan run independently, as sub-agents when the tool allows it. Detector output stays out of the first assessment so it cannot anchor the design judgment.
• Seven-question assessmentReading order, grouping, rhythm, structure, density, adaptation and extremes. Each question is answered with rendered or source evidence taken at representative states and viewports.
• Squint testWith detail blurred, can you still tell the primary element, the secondary element and the major groups, in that order? If not, hierarchy is the problem, not spacing.
• Spatial thesisBefore editing, the agent names the primary reading or task path, what belongs together, which element leads, the intended density and rhythm, and how structure changes across viewports and content extremes.
• Group by meaningUse proximity before adding containers or decoration. Containers that compensate for weak proximity are flagged, and distinct content is not turned into isolated components by default.
• Spacing scale and rhythmUse a documented scale, not one-off values. A 4-unit base gives middle steps that an 8-only scale misses, and the cadence should alternate tight and generous intervals.
• Structural responsivenessReorder, collapse, reflow or reveal based on what stays important. Prefer container-aware components, and check that DOM and focus order still agree with the visual order.
• Practical CSS rulesUse gap for sibling rhythm, keep touch targets usable even when the visible mark is small, use depth only to show state or hierarchy, and make optical corrections only after inspecting the render.
• Visitor-mode rulesPersuade and experience pages may be asymmetric, fluid or disruptive when the design earns it. Operate and read pages keep predictable structure and stable density. Native apps follow the iOS or Android references.
• Stress casesThe check covers long text, empty states, localization, zoom, overlays, sticky elements and safe areas. A clean scan cannot prove hierarchy or rhythm, so the agent verifies by inspection too.

Frequently asked questions