preventing-ui-slop
Installation
SKILL.md
Preventing UI slop
A standing constraint on every UI task, whether or not anyone says "AI slop": new interfaces, small edits, reviews, UI copy, and prompts for image or UI generators. Pass the relevant tells below into delegated briefs and image prompts, because another tool does not inherit this skill. Scale the check to the surface: a button fix does not authorise a redesign. Read the existing components, tokens and content first. It works alongside interface-design-taste, which chooses the visual direction; this skill only blocks the failures below.
"Modern", "premium", "polished", "tech" and an underspecified brief are not permission to add any of these. Do not decorate a section because it feels empty.
Tells to leave out
- Gradients everywhere: gradient buttons, gradient text, background blobs, an automatic purple glow. Start from the product's surface and action tokens. Keep a gradient the user asked for as brand treatment, or one that is a real continuous data scale.
- Arbitrary rainbow colour: a different hue per card, metric or field. Give each colour one role (action, selection, status, category, brand) and pair meaningful colour with a label or other cue. Do not strip distinctions a chart needs.
- Pulsing badges and invented status: decorative "Live", "Active", "Verified", "Secure" pills. Show a state only if it is true and has an identifiable data source; never infer "verified" from a login, a logo or the existence of a profile. Use static feedback unless something actually changed, and respect reduced motion.
- Fingernail cards: repeated rounded cards with a narrow coloured edge, usually on the left. Use spacing, separators, lists or tables for grouping. An established semantic edge, such as incident severity, stays, with a text label so colour is not the only cue.
- Emoji decoration: rockets and sparkles on headings, stats and buttons. Use an icon only where it aids recognition, from the product's own icon set with accessible names. Intentional emoji content, such as reactions, stays.
- Misalignment: floating SVGs, timeline marks, icons, ASCII art or wrapped labels that drift. Align to real baselines and layout tracks, and test long labels, multiline rows, missing values and narrow widths. Fix the layout instead of nudging with arbitrary offsets.
- Font personality by reflex: Inter by default, monospace because "tech", decorative
//prefixes. Inherit the product's type system. Monospace is for code and values that benefit from it. Inter and JetBrains Mono are fine when they fit; do not swap them for an illegible novelty face to look less generated. - Chat-context leakage: public copy about the owner's editor, framework, instructions to the agent, or an internal reorganisation ("I write in Neovim" in a footer, "we consolidated three apps" as a slogan). Write for the visitor's task.
- Default glassmorphism or stock brutalism: blurred translucent panels everywhere, or brutalism as the supposed cure. Use them only for an actual brief or existing system, and check text and controls against every background they can sit over.
- Hype and redundant intros: "Elevate", "Seamless", "Next-Generation", "Supercharge", "Unleash", "Empower", "Welcome to your Dashboard ✨". Say what the product does and what the user can do next. Drop subtitles that repeat the heading. A working screen needs working content, not a landing-page hero. A precise ordinary use of one of these words is fine.
- Redundant eyebrows and ornamental numbering: tracked all-caps "FEATURES" above "Features", or "02. ABOUT" on an unnumbered page. Labels that add information, real step numbers and navigation landmarks stay.