# UI Antipatterns

> The tells that make a page read as templated, generated, or unconsidered - and what to do instead. Covers the AI-slop visual signature, dashboard cliches, false-precision and chartjunk, layout defaults nobody chose, and the specific ways financial UIs mislead. Read before shipping any page, and when a design is technically fine but feels generic. Trigger on "why does this look generic", "make it look designed", "AI slop", "looks templated", "generic design", "what's wrong with this UI", "chartjunk", "misleading chart".

- Skill: `lukehle/ui-antipatterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add lukehle/ui-antipatterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lukehle/ui-antipatterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: Lukehle (https://skillmd.com/u/lukehle)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lukehle/ui-antipatterns

---


# UI anti-patterns

A page can be technically correct and still fail, because it reads as unconsidered. This is the
catalogue of tells — each one is a decision that was defaulted rather than made.

Use it as a pre-ship pass. Most items are a one-line fix; the value is knowing to look.

---

## The generated-page signature

These co-occur so reliably that any three of them together read as "nobody chose this":

| Tell | What it signals | Instead |
|---|---|---|
| **Purple-to-blue gradient hero** | The default of a thousand templates | A flat surface, or a gradient derived from your actual palette |
| **Everything in cards** | Card as the answer to all grouping | Cards for genuinely separate objects; plain sections otherwise |
| **Uniform 8px-radius rounded corners everywhere** | One radius applied without thought | A radius scale — tight for dense controls, larger for containers |
| **Drop shadows on every surface** | Elevation used as decoration | Elevation only where something genuinely floats |
| **Emoji as section icons** | Filling a visual gap with the nearest object | Typography and spacing do the work, or a consistent icon set |
| **Three equal columns of equal-weight content** | The grid chose the content | Hierarchy: one thing is most important — show it |
| **Centred text in wide containers** | No considered measure | Left-aligned, 60-75 characters |
| **A glow or neon accent on a business tool** | Aesthetic borrowed from an unrelated genre | Restraint; let the data carry it |
| **Icons that repeat the label** | Decoration mistaken for wayfinding | Drop the icon or drop the word |
| **Every number the same size and weight** | No hierarchy in the data itself | The headline figure is larger; supporting figures are not |

The underlying pattern: **defaults chosen by the tool rather than by a person.** The cure is to make
each of those a deliberate decision — including deliberately keeping one.

---

## Dashboard clichés

**The wall of KPI tiles.** Twelve boxes, each with a number and a percentage, none ranked. If
everything is a headline, nothing is. Pick the three that drive a decision; the rest belong in a
table.

**The sparkline with no scale.** A tiny line with no axis and no baseline. It reads as "trend" but
cannot be measured, and a flat line at high volatility looks identical to a flat line at low
volatility. Either give it a reference point or drop it.

**The gauge / speedometer.** Enormous pixel cost for one number against one threshold. A bullet
chart does the same job in a tenth of the space and adds the comparison (`variance-charts`).

**Percentage-change tiles with no base.** "+340%" from 5 to 22 is noise. Show the absolute alongside
the percentage, always.

**The donut with a number in the middle.** The reader looks at the number; the ring is decoration.
Just show the number.

**Filters that reset the view to empty.** A filter combination with no results should say what it
filtered out and offer a way back — not present a blank panel that reads as a broken page.

---

## Chart-specific misleads

These are not aesthetic problems. They cause wrong conclusions.

| Anti-pattern | Why it misleads |
|---|---|
| **Truncated y-axis on an additive measure** | Doubles the apparent size of a small change. Revenue, cash, headcount, ARR all start at zero |
| **Dual axes** | The crossover point is an artifact of two arbitrary scales. Readers infer causation from a coincidence you created. Use indexed series or two stacked panels |
| **3D anything** | Perspective distorts area and hides the back of the chart |
| **Pie with more than ~3 slices** | Angle comparison is unreliable; ordering is invisible |
| **Stacked bars for comparing middle series** | Only the bottom series shares a baseline. The middle bands are uncomparable |
| **Colour as the only encoding** | Fails in greyscale, in print, and for ~8% of male viewers |
| **Unlabelled "other" that is the biggest slice** | Hides the actual story in a residual |
| **Smoothed / interpolated lines through discrete periods** | Invents intermediate values that never existed. Monthly data is monthly |
| **Connecting across missing periods** | Draws a straight line through data you do not have |
| **Inconsistent series colours between charts** | The same segment being blue here and orange there forces re-learning on every chart |
| **A dot plot where the dot area encodes value** | Area is judged as roughly the square root of what it is; use position |

---

## False precision

A pervasive failure in finance UIs specifically.

- **Do not display more digits than the number has.** An ARR figure derived from a rounded extract
  shown to the cent claims accuracy that does not exist.
- **Do not show a computed ratio to two decimals** when its inputs are estimates. "LTV:CAC 3.42:1"
  from an 11-customer sample is theatre.
- **Percentage points versus percent.** "NRR fell 4%" and "NRR fell 4 points" are different claims.
  Say which.
- **A benchmark without its vintage and stage** is not a benchmark. See `chart-annotation`.

---

## Density failures in both directions

**Too sparse:** one number per screen, enormous whitespace, endless scrolling to compare two figures
that belong side by side. A finance audience reads dense information for a living; treating them like
a consumer landing page wastes their time.

**Too dense:** every number at the same weight with no grouping, so nothing can be scanned. Density
is fine; *undifferentiated* density is not. See `visual-hierarchy`.

The test: can a reader answer the page's main question in under five seconds, and find a specific
supporting figure in under fifteen?

---

## Interaction failures

- **Hover as the only way to see a value.** Dead on touch, invisible in print, inaccessible by
  keyboard. Hover reveals *detail*; the primary value must be visible.
- **A tooltip that repeats the label.** If the tooltip says "Revenue: $4.8M" over a bar already
  labelled Revenue, it adds nothing.
- **No loading state**, so the page looks broken for two seconds.
- **No empty state**, so a legitimate zero-result looks like a failure.
- **Disabled controls with no explanation.** Say why, or remove them.
- **Losing filter state on refresh** with no way back to a shared view.

---

## The pre-ship pass

- [ ] Would a designer be able to name why each visual decision was made?
- [ ] Is there exactly one clear most-important element?
- [ ] Does every chart start at zero, or is the truncation defensible and labelled?
- [ ] Does every colour encoding survive greyscale?
- [ ] Does any number claim more precision than it has?
- [ ] Is any value available *only* on hover?
- [ ] Does it look deliberate in both themes, and printed?
- [ ] Remove every element that does not change a reader's understanding — what is left?

---

## Related skills

- `visual-hierarchy` — the positive version of the density and ranking items
- `chart-annotation` — labelling, provenance, and the takeaway-title rule
- `design-tokens` — how to stop defaulting radii, spacing, and colour
- `artifact-accessibility` — greyscale, contrast, non-colour encoding
- `artifact-testing` — the pass that catches these before publish