From perception-and-hierarchy-principles
Use this skill when designing or evaluating a grid system — picking column counts, gutter widths, breakpoints, baseline grids, or modular grids. Trigger when designing a new layout system, when an existing layout feels disorderly, when picking responsive breakpoints, or when reviewing a design that "doesn't sit on a grid." Sub-aspect of `alignment`; read that first.
How this skill is triggered — by the user, by Claude, or both
Slash command
/perception-and-hierarchy-principles:alignment-grid-systemsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
A grid is the explicit alignment scaffold a design uses. It provides the columns, rows, and gutters that every element snaps to. Most successful design systems share one important trait: they enforce a grid that designers and engineers can both reason about.
A grid is the explicit alignment scaffold a design uses. It provides the columns, rows, and gutters that every element snaps to. Most successful design systems share one important trait: they enforce a grid that designers and engineers can both reason about.
The most common type in web design. The page is divided into N equal columns separated by gutters; elements span 1 to N columns.
.layout {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px; /* gutter */
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
Common column counts:
The 12-column grid is the safe default; deviate only with specific reason.
Adds horizontal subdivision in addition to columns. Useful for image-heavy or magazine-style layouts where elements need to align both horizontally and vertically.
A grid of horizontal lines at the leading interval of body text. Headings, body, and other type all snap to these baselines, producing perfect vertical rhythm. Hard to enforce in CSS but possible with careful line-height and margin discipline.
A grid optimized for one specific layout — different columns for different regions of the page. Common in marketing layouts.
The space between columns. Common scales:
The gutter should feel proportional to the column width. A 24px gutter on a 1200px-wide grid gives ~3% of horizontal space to gutters — a reasonable balance.
The space at the page edges (outside the grid):
Some layouts deliberately "bleed" content to the screen edges (full-bleed images, edge-flush nav). Mix bleed and contained content carefully; the rhythm needs to remain coherent.
A grid system needs to behave at every breakpoint. Common pattern:
.layout {
display: grid;
gap: 16px;
grid-template-columns: repeat(4, 1fr); /* mobile: 4 columns */
}
@media (min-width: 768px) {
.layout {
gap: 20px;
grid-template-columns: repeat(8, 1fr); /* tablet: 8 columns */
}
}
@media (min-width: 1024px) {
.layout {
gap: 24px;
grid-template-columns: repeat(12, 1fr); /* desktop: 12 columns */
}
}
Components reference column spans (grid-column: span 4); the meaning of "span 4" changes with breakpoint, but the component code stays the same.
alignment (parent).alignment-text-and-numerics — alignment within typography and tabular data.hierarchy-spatial — spatial hierarchy operates on a grid.fibonacci-sequence — proportional grid stops often follow Fibonacci-like ratios.Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub hdeibler/universal-design-principles --plugin perception-and-hierarchy-principles