Skill: leostehlik/no-slop-ui (version 0.2.1)

--- name: no-slop-ui description: "Build or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns." metadata: version: "0.2.1" --- # 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`


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)