# Anti Slop Frontend

> Use to audit or improve AI-generated frontend UI so it stops looking generic, over-carded, over-gradient, low-density, misaligned, or visually unserious.

- Skill: `frankxai/anti-slop-frontend` (Agent Skill)
- Install (CLI): `npx skillmds@latest add frankxai/anti-slop-frontend`
- Raw SKILL.md: https://api.skillmd.com/api/skills/frankxai/anti-slop-frontend/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: frankxai (https://skillmd.com/u/frankxai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/frankxai/anti-slop-frontend

---


# Anti-Slop Frontend

Use this skill before shipping any AI-generated website, app, dashboard, landing page, or product surface.

## Review Order

1. Purpose: the first viewport must reveal the real product, offer, workflow, or object.
2. Layout: remove nested cards, decorative panels, random grids, and marketing sections that hide the actual experience.
3. Hierarchy: make headings, controls, data, and actions match their importance.
4. Density: operational tools should be dense and scannable; editorial pages can breathe more.
5. Color: avoid one-note purple/blue, beige, slate, or gradient-heavy sameness.
6. Motion: use motion to clarify state or focus, not to prove the page has animation.
7. Evidence: use real screenshots, product states, diagrams, data, or generated assets with clear purpose.

## Output

Return: slop risks, highest-leverage fix, visual system corrections, motion corrections, content corrections, and acceptance checks.