Skip to content
Get packs

Anti-UI-Slop Design Guide

Makes the agent build product-specific, non-generic UI that covers required states and is checked in a rendered view

Source Download skill
Repository
sickn33/agentic-awesome-skills
Stars
49,023
Licence
MIT
Files
1 file

What it does

When installed, the agent follows a design-first process before writing interface code: it works out the screen's purpose, user and required states (loading, empty, error, disabled), reuses the project's existing components and design tokens, and avoids inventing fake metrics or testimonials. For larger redesigns it writes a short design contract with acceptance criteria, and when the environment allows it, renders the result and fixes visible problems like clipping or overlap. It can optionally consult UIZZE's public screenshot catalogue or an authenticated UIZZE search tool for visual references, treating them as inspiration rather than templates.

Great for

  • Front-end developers building or redesigning web or iOS screens who want fewer generic layouts
  • Designers or product teams reviewing an interface before shipping
  • Teams that already have a design system and want agents to follow it

Skip it if

  • Projects with no existing design system or product brief, where the output will still be generic guesswork
  • Anyone expecting it to replace accessibility audits, security review or product testing, which the skill says it does not do

Try asking

  • “Redesign the settings page of our app using our existing components and tokens, and cover loading and error states”
  • “Review this checkout screen before release and fix any clipping, overlap or missing empty states”
  • “Design a new onboarding flow for our iOS app with a short design contract and acceptance criteria”
Step-by-step guide: how to use Anti-UI-Slop Design GuideInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    anti-ui-slop.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip anti-ui-slop.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

  • Give the agent your product brief, primary user and existing component library so it reuses your design system instead of inventing one
  • Ask for a rendered check only when you can run the app locally, since visual inspection depends on the environment
  • Treat any UIZZE references as inspiration; review them for licensing before copying anything

What's inside

  • SKILL.md

Redistributed unmodified from sickn33/agentic-awesome-skills 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.