Skill Wiki
frontend-design
Domain inferred from 466 atoms across the corpora.
Atom counts by kind
| Kind | Count |
|---|---|
| rule | 181 |
| pattern | 129 |
| principle | 33 |
| anti-pattern | 29 |
| fact | 27 |
| template | 24 |
| constraint | 17 |
| method | 9 |
| example | 8 |
| check | 3 |
| provocation | 2 |
| feedback | 1 |
| persona | 1 |
| scope | 1 |
| term | 1 |
Sample atoms
Center Everything
Default-centering all text, cards, and sections as a safe layout strategy. Results in symmetrical layouts that feel templated, safe, and lacking in designed intentionality.
Gray On Colored Bg
Using achromatic gray text (oklch(X% 0 0)) on any non-white colored background. The gray appears washed-out, lifeless, and loses legibility because the chroma conflict between a chromatic background and achromatic text c…
Modal As Default
Using modal dialogs as the default mechanism for confirmations, forms, detail views, and settings — without considering less disruptive alternatives like inline expansion, side drawers, popovers, or dedicated pages.
Rounded Border Accent
Adding a thick colored border on a single side (left or top) of a rounded-corner card or callout box as a design accent treatment.…
Sparklines As Decoration
Tiny inline charts (sparklines, mini bar charts, trend indicators) placed in metric cards or dashboards to signal analytical depth, when the chart is too small to convey actual data insight and serves only as a visual so…
Button Label Formula
Button labels must follow the verb + object pattern. Generic confirmations (OK, Submit, Yes, Cancel) are lazy and ambiguous — they force the user to reread the surrounding context to understand what the button will do.
Dark Mode Not Inverted Light
Dark mode is not an inverted version of light mode. It requires independent design decisions on surface hierarchy (lighter surfaces = higher elevation), shadow removal, accent saturation reduction, text weight reduction,…
Stagger Cap For Large Lists
CSS stagger animations must cap total stagger time. 10 items at 50ms/item = 500ms before the last element begins its entrance. For lists with many items, reduce per-item delay or cap the staggered item count.
Content Driven Breakpoints
Responsive breakpoints should be placed where the content actually breaks — not at device-convention widths.…
Multi Dimension Hierarchy
Strong visual hierarchy requires combining at least two of the five hierarchy dimensions simultaneously on primary elements: size, weight, color contrast, position, and surrounding whitespace.…
Undo Over Confirm
For reversible destructive actions (delete, archive, remove), apply the action immediately and show an undo toast with a countdown window.…
Ai Slop Test
The final quality bar for any AI-generated interface is whether a viewer would immediately assume 'AI made this.' A distinctive interface makes someone ask 'how was this made?' — not 'which AI made this?'