Skip to content
Get packs

Anti-Slop UI Rules

Makes the agent avoid generic AI-looking UI and build interfaces with intentional color, layout and motion.

Source Download skill
Repository
miqdadbadjuber/anti-slop
Stars
7,976
Licence
MIT
Files
3 files

What it does

When an AI agent builds or edits a website or app, this skill gives it a checklist of common 'AI-generated look' patterns to avoid, such as default blue-purple gradients, excessive glass blur, pill-shaped everything, heavy glows and stock background grids. For each pattern it explains why it reads as generic and what to do instead, tying the advice to a core rule set. The result is interfaces that look chosen for a specific product rather than defaulted.

Great for

  • Developers who want their AI coding agent to produce less generic front-end work
  • Designers reviewing or steering AI-built interfaces
  • Teams that already use the antislop core rules and want the UI-specific supplement

Skip it if

  • Projects that need a specific pre-existing brand style the agent should copy exactly, since the skill pushes against defaults and may conflict with it (the core and a DESIGN.md file are needed for brand direction)
  • Non-visual tasks such as backend logic or data pipelines, where the rules add no value

Try asking

  • “Build a landing page for my analytics startup without the usual generic AI look”
  • “Review this React dashboard's styling and flag overused gradients, shadows and glow”
  • “Redesign the pricing section so the layout is not a templated hero-feature-testimonial stack”
Step-by-step guide: how to use Anti-Slop UI RulesInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    antislop-ui.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip antislop-ui.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip antislop-ui.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Load the core antislop.md together with this skill, since the rules reference core rule numbers and the Delivery Gate lives in the core.
  • Provide a DESIGN.md or brand notes so the agent has a palette and identity to follow instead of falling back to neutral defaults.
  • Ask the agent to explain which rules it applied and why, so you can check its judgement.

What's inside

  • references/CORE-WEB-VITALS.md
  • references/WEB-BASELINE.md
  • SKILL.md

Redistributed unmodified from miqdadbadjuber/anti-slop under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.