@gessobuild/anti-slop

A deterministic design critique for HTML/CSS, extracted from the set of rules professional designers use in production-grade designs.

“Slop” is the set of visual tells that make generated UI read as generated: the gradient-clipped headline, the indigo accent nobody chose, the puffy stacked drop-shadow, the emoji standing in for an icon system, the row of equal dots faking a chart, the badge card floated over the hero, the em dash mid-sentence, the $1,842,000 figure no designer would typeset raw. This package holds 73 of those tells as executable rules: each one a documented detector with an exact threshold, most with a deterministic, idempotent, design-preserving auto-fix. Simple tells are regex-level; structural tells are found by parsing the markup (never executing it).

The detector reads .html files (inline styles and `` blocks): exports, prototypes, static builds, generated screens. It does not parse JSX/TSX source; render or export to HTML first, then check the output.

Install

npx -y @gessobuild/anti-slop install

Use

/gesso-critique page.html

That one command is the whole loop: the deterministic verdict with evidence, the auto-fixes on request, then a clearly-labeled second opinion. You can also just ask (“check this for slop”, “second opinion on this screen”), and the installed skill runs the check on its own before the agent shows, ships, or commits HTML/CSS.

The install copies the skill and the command into the current project’s .claude/, git-reviewable (--global targets ~/.claude/ instead). Everything you install is committed here word for word: SKILL.md, rules.md, critique.md.

Other ways to install

On another agent (Codex, Cursor, Amp, and friends), install through the skills CLI; there is no slash command there, so trigger it by asking for a slop check or critique:

npx skills add Gesso-Build/skills

Claude Code users can install the plugin instead. Note the plugin spells the command /gesso:critique (colon, not hyphen):

/plugin marketplace add Gesso-Build/skills
/plugin install gesso@gesso

CLI

Nothing to install for one-off checks and CI:

npx -y @gessobuild/anti-slop check page.html        # verdict + tells; exit 1 on slop
npx -y @gessobuild/anti-slop check dist/ --json     # machine-readable, whole tree
npx -y @gessobuild/anti-slop fix page.html --write  # apply the deterministic fixes

check exits 0 on clean, 1 on slop, 2 on usage errors, so a CI step is one line (see Wiring it into CI). Advisory (FLAG-tier) hits are reported for context but never affect the verdict or the exit code. fix is idempotent: running it twice is a no-op.

A failing check prints SLOP (severity N, M advisory): severity is a weighted sum of distinct gating tells, capped at 4 per rule so one runaway pattern cannot drown the rest, and the advisory count is the genre-dependent context that never gates. Read severity 1-2 as an isolated tell, 3-6 as a pattern with a shared cause, and 7+ as template-grade slop that needs design attention beyond the fixes; those bands are calibrated for a single screen, so compare longer documents on severity plus the advisory count together, never severity alone. A pass is stricter than a low score: it means zero FIX/GATE hits. When a document links external stylesheets it does not inline, the check says so and every style-dependent result is a lower bound.

The 73 guards

FIX rules are auto-fixable; GATE rules are detect-only because the right fix needs a decision the tool refuses to fake (which properties to animate, what the copy should say, which real image to use); FLAG rules are advisory and never affect the verdict, because their tell is genre-dependent (an over-designed list row is a defect on an app feed but the genre on a marketing page); BASE rules are additive polish whose absence is not a defect (they never affect the verdict; fix injects the default once, idempotently). Every guard’s exact detection condition, rationale, and before/after pair is documented in skills/anti-slop/references/rules.md.

Opting out intentionally

A deliberately “slop-shaped” element opts out per rule, visibly in the markup, so the decision is reviewable:

• element rules: data-slop-allow="rule-id" attribute (list or "all"),
• CSS rules: a --slop-allow: rule-id custom property in the same declaration block.

Library

import {
  runSlopGuard,
  applySlopFixes,
  buildSlopConstraintsBlock,
  FLAGSHIP_RULES,
} from "@gessobuild/anti-slop"

const check = runSlopGuard(html, {}, FLAGSHIP_RULES)
// { pass, issues, severity, counts }

const fixed = applySlopFixes(html, {}, FLAGSHIP_RULES)
// { html, fixes, total } -- idempotent

const promptBlock = buildSlopConstraintsBlock(undefined, FLAGSHIP_RULES)
// negative constraints to paste into your generation system prompt

Each rule is one source of truth for three artifacts: a prevention constraint you inject into a generation prompt, a detect pass over the HTML string, and (for FIX-tier rules) a deterministic fix. The engine is generic over the rule context: register your own rules with richer style/token types alongside (or instead of) the flagship registry. Every detect/fix call is wrapped in try/catch, so a buggy rule degrades to “no hit / no fix” and never breaks a pipeline. Faithful-replication workflows can pass { replicate: true } to sanction expressive treatments (gradient headlines) the reference legitimately uses.

Security

The detector parses markup as text. It never executes, renders, or fetches anything: no network access, no child processes, no install hooks, and a single runtime dependency (node-html-parser). Evidence excerpts quoted into a report are length-bounded, and the skill treats them strictly as data to report, never as instructions to follow. As with any tool that quotes untrusted file content to an agent, a bounded injection surface is inherent to the category; the automated audit results on the skills.sh listing carry the detail.

Made by Gesso

This package is maintained by Gesso, the AI creative team for builders: explore the sea of creative ideas and build with Gesso. Designs created at app.gesso.build arrive with this check already applied; run it on everything else you ship.

License

MIT