From perception-and-hierarchy-principles
Use this skill when designing text-alignment and numeric-alignment decisions — choosing between left, right, center, and justified text; right-aligning numeric columns in tables; aligning labels relative to inputs; handling decimal alignment for currency. Trigger when laying out body content, designing tables with mixed types, or fixing alignment issues in dense data displays. 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-text-and-numericsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Text and numbers behave differently. Text wants to flow naturally, with predictable left edges so the eye can return to a known column. Numbers want to align by digit position so the user can compare magnitudes. Mixing them in a table requires deliberate alignment per column.
Text and numbers behave differently. Text wants to flow naturally, with predictable left edges so the eye can return to a known column. Numbers want to align by digit position so the user can compare magnitudes. Mixing them in a table requires deliberate alignment per column.
In LTR scripts, body text should almost always be left-aligned. The reasons:
Best for: paragraphs, descriptions, body copy, lists, captions.
Used in narrow contexts:
Avoid for body content in LTR scripts.
Use sparingly and only for short content:
Avoid for paragraphs of body text. Center-aligned body is significantly slower to read because each line starts at a different x-position.
Used in print where typesetting can hyphenate and adjust spacing precisely. On screens:
hyphens: auto: acceptable for long-form prose, particularly in narrow columns.Most modern web design uses ragged-right (left-aligned) by default.
Numbers should right-align so that digit positions stack:
1.00
12.50
135.00
9,876.50
The eye scans the right edge to compare magnitudes. Left-aligned, the same numbers don't compare:
1.00
12.50
135.00
9,876.50
Now the user has to read each number to compare; the columnar advantage is lost.
font-variant-numeric: tabular-nums)Most fonts ship with proportional numerals (each digit has slightly different width — 1 is narrower than 8). For columns of numbers, this means digit positions don't quite stack even when right-aligned. Use tabular numerals instead:
.numeric-column {
text-align: right;
font-variant-numeric: tabular-nums;
}
Now every digit occupies the same width; columns align perfectly.
When numbers have varying decimal places, you sometimes want to align on the decimal point rather than the right edge. CSS doesn't make this easy; the workarounds:
For most products, forcing consistent decimal places is the simpler answer.
Display currency with locale-appropriate symbol position and separators:
new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(1234.5);
// "$1,234.50"
new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(1234.5);
// "1.234,50 €"
Right-align currency columns; use tabular numerals.
Three common patterns:
Label sits above input. No alignment between label and input axis (they're stacked vertically).
<label for="email">Email</label>
<input id="email" type="email" />
Pros: simplest; works at any width; labels can be long without affecting layout.
Label flush-right against input flush-left. The gap between is consistent regardless of label length.
<style>
.field-row { display: grid; grid-template-columns: 8rem 1fr; gap: 12px 16px; }
.field-row label { text-align: right; padding-top: 0.5rem; }
</style>
<div class="field-row">
<label for="email">Email</label>
<input id="email" />
</div>
Pros: scannable for dense settings; predictable column widths. Cons: label width must accommodate the longest label; long labels look awkward right-aligned.
Both label and input left-aligned in their columns. The gap between label and input varies with label length, creating a slight visual ragged edge.
Pros: more relaxed; easier to read longer labels. Cons: less scannable; the variable gap reads as messier.
For most app settings: top-aligned labels. For compact dense forms: right-aligned. Left-aligned columnar is a third choice that some prefer aesthetically.
alignment (parent).alignment-grid-systems — the structural grid that text and numbers align within.legibility and readability — typography decisions interact with alignment.proximity-data-tables — table-specific alignment patterns.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