Guide · Agent skill
How to use the Anti-Slop UI Rules agent skill (antislop-ui)
Updated · written with AI from the project's own documentation and checked against our catalogue data
The antislop-ui skill is a set of UI and visual rules that an AI coding agent loads when it builds or edits a website or app. It checks the agent's work against common 'AI-generated look' patterns, such as default gradients, glass blur and stock background grids. After this guide you will know what the skill does, how to install it, how to ask for it, and what it needs to work.
Anti-Slop UI Rulesmiqdadbadjuber/anti-slop · MIT Download the skill Quick start
- 1Download the ZIP. Download the antislop-ui ZIP from the skill page on this site.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into the project's .claude/skills/ folder for one project.
- 3Or upload in the Claude apps. In the Claude apps, go to Settings, then Capabilities, then Skills, and upload the skill.
- 4Add the core file. Make sure antislop.md from the same repository is available, since the skill says to load it alongside.
- 5Ask for interface work. Describe the interface you want built or edited, and say who it is for.
- 6Review the output. Check the result against the patterns the skill lists, and ask the agent to explain its choices where a pattern appears.
What the skill makes the agent do
An agent skill is a folder with a SKILL.md file that tells an AI agent how to handle a kind of task. When the task is building or editing an interface, antislop-ui gives the agent a checklist of visual patterns to avoid, with the reason each one reads as generic and what to do instead.
Each pattern entry follows the same shape: the Tell (the pattern), the Why (why it reads as slop), and the Fix (what to do instead). Each entry cites the governing rule from the antislop core as R-XX. The skill covers color, layout, components, decoration, structural flow and motion.
- Blue-to-purple and similar default gradients, plus glows and radial orbs used without purpose
- Excessive glassmorphism, pill-shaped everything, and overly soft shadows
- Glow on every element, stock background grids, and dark mode chosen by habit
- Too many colors, too many accents, and monotonous template layouts such as identical feature cards or a bento grid used by default
Install the antislop-ui skill
Download the ZIP for skills/antislop-ui from the miqdadbadjuber/anti-slop repository page on this site. Unzip it into your personal skills folder at ~/.claude/skills/, or into a project's .claude/skills/ folder if you want the skill to apply to one project only.
If you use the Claude apps instead, upload the skill under Settings, then Capabilities, then Skills.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload
~/.claude/skills/Set up the required core file
This skill does not work alone. It says to load it together with antislop.md, the core file from the same repository. The core holds the mechanism, including the purpose test, the three tiers, and the Delivery Gate. The UI skill holds the UI-specific depth and references core rules by number.
The skill also needs an agent that can read SKILL.md files and use the Read, Write, Edit, Glob and Grep tools. Its allowed tools are listed as Read, Write, Edit, Glob and Grep.
- antislop.md (core file) from the same repository
- An agent that can read SKILL.md files
- Tools: Read, Write, Edit, Glob, Grep
Trigger the skill with natural requests
You do not need a special command. The skill's description tells the agent to use it when building or editing any interface, covering color, layout, components, motion and page performance. Ask for interface work in ordinary language and make sure the core file is loaded alongside it.
Say what the product is and who uses it. The skill pushes against defaults, so the agent needs the context to choose a direction that fits.
- Build a landing page for a bookkeeping app for freelancers, and load antislop.md with the UI skill
- Redesign the settings page in this app so it does not look like a default template
- Review the colors and layout of this dashboard for generic AI styling
- Add a pricing section to this site and avoid glow and glass effects
Know when not to use it
The skill pushes against defaults, so it may conflict with a brand style you want the agent to copy exactly. For brand direction, the core and a DESIGN.md file are needed. The skill itself says the palette should come from DESIGN.md or the product's own identity.
It adds no value to non-visual work such as backend logic or data pipelines.
- Skip it when you need an existing brand style copied exactly, unless you supply DESIGN.md and the core
- Skip it for backend logic and data pipelines
Safety notes: scripts and network
The skill runs no scripts and uses no network. It consists of Markdown instructions and reference files: SKILL.md, references/CORE-WEB-VITALS.md and references/WEB-BASELINE.md. It is licensed under MIT.
The reference files are adapted from the MIT-licensed web-quality-skills by Addy Osmani, and a LICENSE-web-quality-skills file sits in the skill folder. Review the files yourself before installing if you need to audit them.
- Runs scripts: no
- Uses network: no
- Licence: MIT
What people use it for
- Steering an AI agent away from default blue-purple gradients when building a marketing site
- Reviewing an AI-built dashboard for glow, glass and pill-shaped elements that flatten hierarchy
- Checking that feature sections vary in layout instead of repeating identical cards
- Adding a check for web basics such as viewport and charset using the optional web baseline reference
Frequently asked questions
Is the antislop-ui skill free?
The skill is licensed under MIT, as stated on this page. Check the LICENSE files in the repository for the full terms.
Do I need antislop.md to use antislop-ui?
Yes. The skill says to load it together with antislop.md, the core file from the same repository. The core holds the mechanism and the Delivery Gate that this UI skill builds on.
Where do I install an agent skill?
Unzip the skill into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps, upload it under Settings, then Capabilities, then Skills.
What does the agent need to run this skill?
An agent that can read SKILL.md files and use the Read, Write, Edit, Glob and Grep tools. The skill runs no scripts and uses no network.
Does this skill work for backend or data work?
No. The skill is for visual and interface work. Backend logic and data pipelines gain nothing from these rules.
Will the skill force a specific brand style?
No, it pushes against defaults. For a specific brand look, provide a DESIGN.md file along with the core rules so the agent has brand direction to follow.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use antislop-ui if you want an AI coding agent to produce interfaces chosen for a specific product, and you are willing to load the core file alongside it. Pick something else if you need an existing brand style copied exactly, or if your task is backend or data work where these visual rules add nothing.
Download the skill