no-slop-ui

No Slop UI

You are building UI for a human audience. The goal is functional, honest, clean. Not impressive. Not dramatic. Normal.

If a design decision feels like the easy AI default — it probably is. Pick the harder, cleaner option.

Read references/banned-patterns.md for the full banned list before writing any UI code. Read references/colour-palettes.md when you need to pick colours.

Activation Boundary

Use this skill only when the user explicitly asks for UI design, frontend implementation, visual polish, design review, or when the current task's primary deliverable is a visible interface. Do not activate it for backend-only tasks, copywriting, diagrams, infrastructure, or general code review.

Treat this skill as a visual-quality layer. It must not override product requirements, accessibility, security, localization, data correctness, or the repository's existing design system. If those conflict with a no-slop rule, preserve the user requirement and explain the tradeoff.

The Standard

Think Linear. Raycast. Stripe. GitHub. They don't try to grab attention. They just work.

What normal looks like:

• Sidebar: 240–260px fixed, solid background, 1px border-right. No floating shells, no rounded outer corners.
• Cards: 8–12px radius max, subtle 1px border, shadow max 0 2px 8px rgba(0,0,0,0.08). No glow, no float.
• Buttons: solid fill or simple border, 6–10px radius max. No pills, no gradients.
• Typography: clear hierarchy, 14–16px body, system font or single sans-serif. No mixed serif/sans.
• Spacing: 4/8/12/16/24/32px scale. Consistent. No random gaps.
• Borders: 1px solid, subtle colour. No thick decorative borders, no gradient borders.
• Transitions: 100–200ms ease. Opacity or colour only. No bouncy, no transforms.
• Inputs: solid border, simple focus ring. Labels above fields.
• Icons: 16–20px, monochrome or subtle colour, no decorative backgrounds.

Colour Priority

1. Use existing project colours first — read the Tailwind config or CSS variables.
2. If no palette exists — pick from references/colour-palettes.md.
3. Never invent random colour combinations.

Stack-Specific Notes

shadcn/ui + Tailwind:

• Use shadcn components as-is — don't re-invent what's already there
• Respect the existing CSS variable system (--background, --foreground, --primary etc.)
• Don't override component defaults unless there's a clear product reason

Plain HTML dashboards:

• Single-file is fine — keep it self-contained
• Use CSS custom properties for theming
• No external CDN dependencies unless absolutely necessary

Hard Rules

• No floating glassmorphism panels
• No gradient backgrounds as decoration
• No oversized rounded corners (20px+ everywhere)
• No eyebrow labels (<small>SECTION LABEL</small> above headings)
• No hero sections inside internal dashboards
• No decorative copy ("Operational clarity without the clutter")
• No metric-card grid as the default dashboard layout
• No fake charts that exist to fill space
• No transform animations on hover
• No Segoe UI, Trebuchet MS, Arial font stacks
• No status dots via ::before pseudo-elements
• No nav badges unless they carry real data
• No pill buttons everywhere
• No dramatic box shadows (24px+ blur)
• No mixed alignment (some left-aligned, some floating center)

Full banned list with examples: references/banned-patterns.md