# Anti Patterns

> 84 UI/UX "never do" rules across 12 categories with a 9-gate mental decision flow. Walk through at every design stage to catch mistakes before they compound.

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

---


# Anti-Patterns: What Never to Do

84 rules extracted from 8 expert video sources and 20+ production design tools. Organized as a mental decision flow so you catch mistakes at the stage where they're cheapest to fix.

## The 9-Gate Decision Flow

Walk through at every design stage. Each gate catches a category of mistakes before they compound downstream.

**Gate 1 — Before You Touch a Design Tool**
Did you skip user intent and jump straight to pixels?
> Starting with UI elements before mapping user intent is the #1 structural mistake. You'll build something beautiful that nobody can use.

**Gate 2 — Color and Theme**
Are you using color for decoration instead of communication?
> Overusing brand color, clashing gradients, and skipping semantic colors make the UI stressful and meaningless. 60-30-10 is the guardrail.

**Gate 3 — Typography**
Do you have more than 4 font sizes or 3 weights?
> Excessive type variation destroys hierarchy. If everything is a different size, the eye has no entry point.

**Gate 4 — Spacing and Layout**
Are your pixel values random or too tight?
> Random spacing (11px here, 25px there) signals "no system." Cramped layouts are the #1 amateur tell.

**Gate 5 — Visual Effects**
Are you adding effects because they look cool, not because they communicate?
> Default shadows, harsh gradients, heavy glows are the hallmark of "I just learned Figma."

**Gate 6 — Components and Consistency**
Are similar elements styled differently for no reason?
> Mixed corner radii, mismatched icons, inconsistent buttons — each is a tiny trust signal lost.

**Gate 7 — Interactive States**
Can the user tell that their action registered?
> Missing hover states, no loading indicators, no error messages — every gap makes users think "is this broken?"

**Gate 8 — Content and Copy**
Are you designing with perfect data and lorem ipsum?
> The design breaks in production the moment someone enters a 47-character name or has zero items.

**Gate 9 — AI Slop Detection**
Does this look like every other AI-generated UI?
> Emoji icons, generic Inter, timid palettes, redundant KPI cards, stock gradients — if you've seen it on 50 AI demos, it's AI slop.

---

## 1. Intent and Planning (7 rules)

| Never | Instead |
|---|---|
| Start designing before mapping user intent | Define what the user came to accomplish, map the flow |
| Skip sketching the user flow | Even boxes on paper catch 80% of flow problems |
| Add features that don't serve a defined intent | Ask: "Does this add value the simpler version didn't?" |
| Design with lorem ipsum or perfect placeholder data | Real content surfaces real problems |
| Forget nav links, hidden states, or dynamic interactions | Audit every screen for: nav, hovers, empty, error, loading |
| Use infinite scroll when load-more works | Load more gives users control and lets them reach the footer |
| Leave icons on bright images without contrast | Add a circle/pill background behind floating icons |

## 2. Color and Theme (8 rules)

| Never | Instead |
|---|---|
| Overuse brand color (reverse 60-30-10) | 60% neutral, 30% complementary, 10% brand |
| Use multi-hue gradients (blue-to-green) | Same-hue gradients or flat color |
| Use color for decoration without meaning | Blue = info, red = danger, yellow = warning, green = success |
| Mix too many different colors | Shades and tints of one color |
| Use AI-chosen colors without auditing | One dominant accent with sharp contrast |
| Use pure black (#000) in dark mode | Near-black: #0f0f0f, #121212, #1a1a1a |
| Keep saturated accents at full brightness in dark mode | Reduce saturation and brightness |
| Default to dark/cyberpunk/neon | Start light monochromatic. Dark is opt-in. |

## 3. Typography (6 rules)

| Never | Instead |
|---|---|
| Use more than 6 font sizes (4 in dashboards) | Target 4 sizes, 2 weights |
| Use more than 3 font weights | Regular + Bold covers 90% |
| Leave loose letter-spacing on headers | Tighten to -2% to -3%, line-height 110-120% |
| Default to Inter/Roboto/Arial for production UI | Choose a distinctive sans-serif |
| Use text larger than 24px in dashboards | Use weight and color for hierarchy, not size |
| Use proportional fonts for changing numbers | Monospace or tabular-nums for dynamic values |

## 4. Spacing and Layout (5 rules)

| Never | Instead |
|---|---|
| Use random pixel values (11px, 25px) | Snap to 8pt grid: 12, 24, 40 |
| Pack content too tight | Let things breathe. Group tight, separate wide. |
| Give mobile less space than desktop | Mobile needs MORE space. 44px tap targets. |
| Break the grid by accident | Intentional grid-breaking is design. Accidental is sloppy. |
| Use only placeholders as input labels | Always-visible labels above or beside inputs |

## 5. Visual Effects (8 rules)

| Never | Instead |
|---|---|
| Use default shadow values | Change color to light gray, increase blur, or remove |
| Let the shadow be the first thing noticed | Shadows should be felt, not seen |
| Use shadows for depth in dark mode | Use background lightness differences |
| Stack effects (gradient + blur + glow + shadow) | One subtle effect maximum |
| Use pure black shadows on glass elements | Sample background color and desaturate |
| Place glass elements over solid/empty backgrounds | Glass must overlay contrasting content |
| Use full-screen overlays on hero images | Linear gradient or progressive blur |
| Use glow effects on professional UIs | Subtle borders and shadows |

## 6. Components and Consistency (7 rules)

| Never | Instead |
|---|---|
| Mix corner radii on similar components | Pick ONE (8-12px) and apply everywhere |
| Mix icon fill, line-weight, or style in same section | One library, one style, consistent weight |
| Style identical-function elements differently | Same size, radius, style, padding |
| Use emojis as UI icons | Lucide, Phosphor, or Feather icons |
| Size icons significantly larger than text | Match icon size to font line-height |
| Use non-obvious icons without labels | Tooltips or text labels for non-universal icons |
| Add redundant elements (arrows, strokes, clutter) | Remove and test. If it works without it, it didn't need it. |

## 7. Interactive States (6 rules)

| Never | Instead |
|---|---|
| Ship buttons without hover and disabled states | Minimum 4 states; full set: 8 |
| Ship inputs without focus and error states | Focus ring + red border + error message |
| Leave async operations without loading indicators | Gray out button immediately, spinner for longer ops |
| Skip empty states | Explain what will appear, give action to populate |
| Use animations that serve only the portfolio | Every animation adds clarity or functionality |
| Skip confirmation for important actions | Micro interaction: chip, filled icon, toast |

## 8. Content, Copy, and Data Viz (7 rules)

| Never | Instead |
|---|---|
| Repeat words the context already establishes | "Claim" under "Rewards" heading, not "Claim Voting Rewards" |
| Write button labels that don't match the action | Button text = what happens. "[Verb] + [what they get]" |
| Use more than 3-4 pricing tiers | Max 3-4 with highlighted recommended option |
| Use generic icons instead of product screenshots | Real screenshots, real UI, real product |
| Design charts without a vertical axis | Always include axes. Flat-top bars. Bar count = data count. |
| Overdesign charts because Dribbble does | Simple chart with clear data > beautiful unreadable one |
| Use 7+ form fields without knowing the cost | 3-field baseline. Every extra field costs conversions. |

## 9. AI Slop Detection (9 signals)

If 2+ of these appear in your design, humans will assume a machine made it:

| Signal | Fix |
|---|---|
| Emojis as functional icons | Lucide, Phosphor, Feather |
| Inter or Roboto as the only font | Distinctive sans-serif |
| Evenly-distributed timid palette | One dominant accent with sharp contrast |
| Redundant KPI cards on every dashboard | Only metrics the user actually needs |
| Stock gradients (purple-to-blue) | Flat colors or same-hue gradients |
| Scattered micro-interactions everywhere | One orchestrated page load |
| Symmetric, centered layouts only | Asymmetry, overlap, grid-breaking |
| Generic placeholder images | Real product screenshots |
| Space Grotesk as the "modern" font | Research fonts for your brand |

## 10. BLOCK-Level Violations (8 hard blockers)

Any one of these is an automatic block. The design cannot ship until fixed.

| BLOCK | Fix |
|---|---|
| CTA labels: "Submit," "OK," "Click Here" | Verb + noun: "Send Message," "Create Account" |
| Empty state: "No data found" | Explain what appears + give action to populate |
| Error state: "Something went wrong" with no fix | What broke + how to fix it |
| More than 4 font sizes in a single UI | Max 4. Use weight and color for additional hierarchy. |
| Any spacing value not a multiple of 4 | 4, 8, 12, 16, 24, 32, 48, 64 |
| Accent color on "all interactive elements" | List specific elements: primary CTA, active nav, focus ring |
| Hardcoded hex values in component files | CSS custom properties or design tokens |
| More than 2 font weights | Regular (400) + Bold (700). Semibold only if structurally justified. |

## 11. CRO Dark Patterns (7 ethical violations)

These aren't bad UX. They're trust destroyers.

| Never | Instead |
|---|---|
| Hide or obscure the close button | Clear, visible close in top-right. Respect the "no." |
| Guilt-trip decline text ("No, I don't want to save money") | "No thanks" / "Maybe later" |
| Show popups within 5 seconds of page load | 30-60 seconds minimum, or scroll/exit intent |
| Show upgrade prompts during onboarding or mid-flow | After a value moment, before frustration |
| Disable paste on password fields | Allow paste. Show requirements upfront. |
| Clear the user's form data on error | Preserve all data. Highlight only the problem field. |
| Validate while the user is still typing | Validate on blur (field exit), not on keystroke |

## 12. Copywriting Traps (6 rules)

| Trap | Fix |
|---|---|
| "Utilize" instead of "use" | Everyday words. "Help" not "facilitate." |
| Value buried in qualifications | Lead with the benefit. Get to the point. |
| "The best solution for your needs" | Be specific and concrete |
| Trying to say everything at once | One message per context |
| Feature-focused instead of benefit-focused | Lead with outcomes, not capabilities |
| Sacrificing clarity for cleverness | Clarity always wins |