# Antislop UI

UI and visual skill for antislop.

- Repository: https://github.com/miqdadbadjuber/anti-slop (7917 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add miqdadbadjuber/anti-slop --skill antislop-ui -g -a claude-code -y`
Codex: `npx skills add miqdadbadjuber/anti-slop --skill antislop-ui -g -a codex -y`
Cursor: `npx skills add miqdadbadjuber/anti-slop --skill antislop-ui -g -a cursor -y`
Gemini CLI: `npx skills add miqdadbadjuber/anti-slop --skill antislop-ui -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add miqdadbadjuber/anti-slop`

## Description

UI and visual skill for antislop. Use when building or editing any interface: color, layout, components, motion, and page performance. Load with the core.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# antislop-ui

> Anti Slop: Rules for AI Coding Agents. UI & Visual skill

> Part of the antislop system. Read together with `antislop.md` (the core). This skill deep-dives the UI/visual concern: color, layout, components, decoration, structural flow, and motion. It references core rules by number and never duplicates or renumbers them. Load it when the task builds or edits a website, web app, or any interface.

## How to use this skill

- Load together with `antislop.md` whenever the task is UI or visual work. The core holds the mechanism (the purpose test, the three tiers, the Delivery Gate); this skill holds UI-specific depth.
- Every entry has the same shape: **Tell** (the pattern), **Why** (why it reads as slop), **Fix** (what to do instead), with the governing core rule cited as R-XX.
- The Delivery Gate in the core remains the gate. The "UI Skill Checklist" at the end of this file is the UI-specific supplement to run alongside it.

## Visual & Color

### Generic Blue-Purple Gradient

- **Tell:** blue-to-purple, blue-to-cyan, or purple-to-pink gradients used as the primary color treatment, or a full-page colored glow.
- **Why:** the most over-represented color treatment in training data. It signals "no brand identity", not "our palette", and marks the design as AI-generated at a glance.
- **Fix:** pull the palette from `DESIGN.md` or the product's own identity. Keep a gradient only as a hierarchy function with the reason written down (R-01). A gradient separating one level from another is craft; the same gradient on every section is a default.
- **The same default family:** harsh or rainbow gradients, purple-and-black schemes, neon or pastel palettes, and blurred radial orbs behind the hero. They are the same tell wearing different clothes: color from the model's default, not from the brand. All of them are FORBIDDEN as defaults without purpose (R-01).

### Excessive Glassmorphism

The rest: https://github.com/miqdadbadjuber/anti-slop/blob/HEAD/skills/antislop-ui/SKILL.md