Anti-Slop Skill: 73 Deterministic Guards for HTML and CSS

What is the anti-slop skill?

The anti-slop skill is a deterministic design critique for HTML and CSS, extracted from the rules professional designers use in production-grade designs. It holds 73 slop guards, each a documented detector with an exact threshold.

Slop means the visual tells that make a screen read as generated rather than designed, such as the gradient-clipped headline, the indigo accent nobody chose and the emoji standing in for an icon system.

The workflow

1. Run the detector with check. It exits 0 when clean, 1 when slop is found and 2 on usage errors, such as no .html files under the target.
2. Read the JSON, which holds a pass flag, the issues, a severity score and counts of gating and advisory hits.
3. Apply the deterministic fixes with fix and the write flag, then re-run the check.
4. Resolve the detect-only guards by hand, quoting the exact occurrence from the JSON.
5. Report a verdict and a table with one row per guard that fired. If you asked for a critique, a separate Beyond the ruleset section adds judgment.

Guard tiers

• FIX: auto-fixable, deterministic, idempotent and design-preserving, and hits count toward the verdict.
• GATE: detect-only because the right fix needs a decision, such as which properties to animate, what the copy should say or which real image to use.
• FLAG: advisory, not counted toward pass or severity, used for genre-dependent tells.
• BASE: additive polish whose absence is not a defect, which fix injects once.

Reading severity

Severity is a weighted sum capped at 4 per rule. A score of 1 to 2 is an isolated tell, 3 to 6 is a pattern with a shared cause and 7 or more is template-grade slop. A pass means zero FIX or GATE hits.

Who the anti-slop skill is for

Best for

• Generated or hand-written HTML and CSS that is about to be shown, exported, shipped or committed.
• Exports, prototypes, static builds and generated screens saved as .html files.
• CI steps that gate on the exit code of the check command.

Not for

• JSX or TSX source files, which the detector does not parse until they are rendered or exported to HTML.
• Scoring a screen across six weighted dimensions and Nielsen's ten heuristics with a prioritized findings table, which the design-review skill covers.
• Laying out toolbars, forms and dashboards with six Gestalt principles so related controls visibly belong together, which the gestalt-ui-organisation skill covers.
• Measuring contrast and checking WCAG 2.2 criteria in a findings table with severity and fixes, which the plugin87-a11y-audit skill covers.
• Auditing HTML for missing names, broken keyboard access, bad focus handling and unlinked form errors, which the fixing-accessibility skill covers.

How to install Anti-Slop Skill: 73 Deterministic Guards for HTML and CSS

npx -y @gessobuild/anti-slop install

1. Run the install command

   In your project, run npx -y @gessobuild/anti-slop install. It copies the skill and the command into the current project's .claude/ folder.

2. Install globally if you prefer

   Add --global to the install command to target ~/.claude/ instead.

3. Run the check

   Run /gesso-critique page.html, or ask for a slop check or a second opinion on a screen.

4. Check from the command line

   For one-off checks and CI, nothing needs installing: run npx -y @gessobuild/anti-slop check page.html, which exits 1 on slop.

Check that it loaded

Run /gesso-critique page.html on an HTML file. Expect a verdict line such as SLOP with a severity and one row per guard that fired, or PASS when the file is clean.

Read the official instructions on GitHub

Key features

• 73 slop guardsEach guard is a documented detector with an exact threshold, grouped into color, type, visual, layout, motion, copy, imagery and quality categories.
• Deterministic auto-fixesMost guards have an idempotent, design-preserving fix. Running fix twice is a no-op, and the fix flattens a shadow instead of redesigning the card.
• Detect-only guardsGuards such as transition-all, layout-prop-animation and placeholder-image have no deterministic rewrite, so the agent proposes concrete edits that quote the exact occurrence from the JSON.
• Severity score and verdictSeverity is a weighted sum of distinct gating tells, capped at 4 per rule so one runaway pattern cannot drown the rest. Advisory hits are reported for context but do not change the verdict or the exit code.
• Marketing flagAdding the marketing flag to check or fix reports em-dash-copy as advisory instead of gating and leaves authored em dashes alone. In interface chrome the tell stays gating.
• Opt-outs in the markupA data-slop-allow attribute on an element, or a --slop-allow custom property in a CSS block, opts a deliberate design choice out of a rule where reviewers can see it.
• CI exit codesThe check command exits 0 on clean, 1 on slop and 2 on usage errors, so a CI step is one line. Gate on check, not on fix.
• Required report formatThe report leads with a verdict, then a table with one row per guard that fired showing hits, action and why it matters. Only rule ids and counts the JSON emitted go in the table.
• Library functionsThe package exports runSlopGuard, applySlopFixes, buildSlopConstraintsBlock and FLAGSHIP_RULES, so the rules can also produce negative constraints for a generation prompt.
• External stylesheet warningWhen a document links external stylesheets it does not inline, the check says so, and every style-dependent result is a lower bound.

Frequently asked questions