This skill should be used when the user is building or reviewing page layouts, grid systems, column structures, card grids, sidebar layouts, CSS Grid or Flexbox decisions, element alignment, spatial composition, or responsive grid strategies. Covers the 12-column grid, 8-point spacing system, Gestalt proximity principle, visual weight distribution, and layout patterns from Material Design and Bootstrap.
npx claudepluginhub oborchers/fractional-cto --plugin visual-design-principlesThis skill uses the workspace's default tool permissions.
Every professional layout is built on a grid. The grid is not a suggestion — it is the structural skeleton that makes alignment effortless, spacing predictable, and responsive behavior automatic. Material Design, Bootstrap, and every major design system converge on the same fundamentals: a 12-column grid with an 8-point spacing system.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Every professional layout is built on a grid. The grid is not a suggestion — it is the structural skeleton that makes alignment effortless, spacing predictable, and responsive behavior automatic. Material Design, Bootstrap, and every major design system converge on the same fundamentals: a 12-column grid with an 8-point spacing system.
| Component | Purpose | Typical Value |
|---|---|---|
| Columns | Content containers; 12 divides evenly by 2, 3, 4, 6 | 12 columns |
| Gutters | Space between columns; consistent rhythm | 16px–32px (24px default) |
| Margins | Outer breathing room on left/right edges | 16px mobile, 24px tablet, auto-center desktop |
| Container | Max-width wrapper preventing ultra-wide lines | 1200px–1440px |
Grid adherence rule: >90% of element edges must align to grid lines. Audit by overlaying a 12-column grid on any screen — misaligned elements are immediately visible.
| Use Case | Choose | Reason |
|---|---|---|
| Page-level layout (header, sidebar, main, footer) | CSS Grid | Two-dimensional control over rows and columns |
| Card grids with uniform items | CSS Grid | auto-fit/auto-fill with minmax() handles responsiveness |
| Navigation bars, button groups | Flexbox | One-dimensional alignment with wrapping |
| Centering a single element | Flexbox | justify-content + align-items in three lines |
| Overlapping elements or complex placement | CSS Grid | Named grid areas and explicit row/column placement |
| Unknown number of items in a row | Flexbox | flex-wrap distributes naturally |
Default rule: Start with CSS Grid for layout, drop to Flexbox for component-level alignment.
Use the constrained 4px/8px spacing scale defined in the whitespace-density skill. All grid gutters, margins, and padding must come from that scale. Never use arbitrary spacing values.
Apply the Gestalt proximity rule (see whitespace-density skill for the full ≤50% rule and spacing tokens) to all layout decisions. Internal spacing within a grid region must be visibly tighter than spacing between regions.
Use CSS Grid auto-fit with minmax() for responsive card grids (see responsive-design skill for fluid grid techniques).
Minimum card width: 280px for content cards, 200px for thumbnail cards. Set gap using the spacing scale.
Place layout regions to support natural eye scanning. See the visual-hierarchy skill for F-pattern and Z-pattern rules — layout determines where regions go, hierarchy determines what draws attention within them.
| Anti-Pattern | Why It Fails | Fix |
|---|---|---|
| Random widths (347px, 513px) | No grid alignment; looks accidental | Snap to column spans or percentages |
| Mixing grid systems (12-col + 10-col) | Conflicting rhythms; nothing aligns | One grid system per project |
| Equal internal and external spacing | Groups are indistinguishable; flat hierarchy | Apply Gestalt proximity rule (see whitespace-density skill) |
| Hardcoded pixel widths on responsive layouts | Breaks on every viewport | Use fr, %, minmax(), or container queries |
| Nesting grids more than 2 levels deep | Compounding gutters create unpredictable spacing | Flatten structure; use subgrid |
Working implementations in examples/:
examples/grid-and-card-layout.md — Complete 12-column grid setup, responsive card grid with CSS Grid auto-fit, Tailwind configuration, and React componentWhen reviewing or building layouts:
whitespace-density skill)auto-fit/auto-fill with minmax() for responsive reflowwhitespace-density skill)