Skill Wiki
visual-design
Domain inferred from 95 atoms across the corpora.
Atom counts by kind
| Kind | Count |
|---|---|
| persona | 30 |
| example | 24 |
| rule | 7 |
| constraint | 6 |
| category | 4 |
| transform | 4 |
| value | 4 |
| term | 3 |
| anti-pattern | 2 |
| counter-example | 2 |
| provocation | 2 |
| taxonomy | 2 |
| check | 1 |
| feedback | 1 |
| tradeoff | 1 |
| principle | 1 |
| template | 1 |
Sample atoms
Rainbow Explosion
Applying five or more distinct hue families (e.g., red badges, orange warnings, yellow highlights, green successes, blue links, purple headings, teal cards) in a single product UI without a systematic hierarchy — produci…
Category Button Hierarchy
The hierarchical grouping of button styles within a UI surface. Hierarchy clarity — which action is the primary, which is alternative, which is optional — is the single most important driver of action discoverability.…
Category Form Input States
The visual states an input control passes through during user interaction. A complete form-input system specifies the visual treatment for each state and the transitions between them. Incomplete state coverage (e.g.…
Category Layout Grid
Grid-based layout patterns for UI composition. This category covers CSS Grid usage patterns, column systems, gutter strategies, and responsive breakpoint behavior.
Category Typography Scale
The typographic scale sub-category covers all decisions about relative and absolute type sizes across the interface: base size selection, scale ratio, display headings, body text, captions, and code.
Check Color System Preflight
Preflight checklist for a complete color system: validates hue spread ≥ 120° between primary and accent, chroma difference ≥ 0.04, dark-mode backgrounds at L ≥ 0.08 (not pure black), steps 9–10 contrast ≥ 4.…
Constraint Brand Hue Required
Brand color systems must derive their primary ramp from a single OKLCH hue (one --hue variable feeding 9–12 lightness stops at calibrated chroma).…
Constraint Max Color Roles 7
A single product-level design system should expose at most 7 semantic color roles: bg, surface, border, text, text-muted, primary, accent.…
Constraint No Pure Black Text
Body and paragraph text must never use pure black (#000000 / oklch(0% 0 0)). Pure black on near-white induces excessive contrast and visual fatigue; use a soft near-black such as oklch(18% 0.04 var(--hue)).
Constraint No Pure White Bg
Backgrounds for long-form prose must not be pure white (#ffffff). Use a warm or cool off-white such as #f9f7f4 or oklch(98% 0.008 var(--hue)) to reduce halation and reading fatigue.
Constraint Oklch Only Color
All new color declarations must use the oklch() color function. Hex (#rrggbb), rgb()/rgba(), hsl()/hsla(), and CSS named colors are forbidden in new author code and in design tokens.
Counter Example Tailwind Blue 500
A button and link styling that uses Tailwind's default `blue-500` (#3b82f6) and `blue-600` (#2563eb) as the entire brand expression. Identical to thousands of v0 / shadcn / starter-kit landing pages.