agentleFS
Sign inStart free
systemonstersystemonster/slop-check/SKILL.md

slop-check

Skill1 starsChanged 2 months agoMITView on GitHub

Ship-gate checklist that catches AI-generated design slop before you call a page done. Use when building or reviewing a landing page, hero, card, button or section; when a design "looks basic" and you can't say why; or right after a design gets rejected.

5 other projects use a version of this.

Adopted by

Most recently taken up by

  • Other versions5 projects use a version of this.

    Word for word · 0

    None found.

    Edited · 0

    None found.

    Wrote their own version · 5

    1. polarsource/polar★ 10ksame name
    2. CyranoB/department-of-prose★ 2same name
    3. Aidan945/slop-check★ 1same name
    4. dzivkovi/claude-skills★ 1same name
    5. tslateman/skills★ 1same name

    How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.

The file

We split this skill into the rules it gives an agent

6 rules. 0 are common, 5 are distinctive, and 1 is very specific to this project.

  • 0

    Common

    Most of the 5 edited versions we read keep these.

  • 5

    Distinctive

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Run it before you call anything done.

    line 10
  2. Distinctive:

    Layout comes from the content's logic, not from a card grid: If "card grid" was the reflex answer, the layout was not designed.

    line 21
  3. Distinctive:

    Same skeleton, different paint?: Put it beside the previous page.

    line 32
  4. Distinctive:

    Neutral sans everywhere?: All type flattened into quiet sans weights with no hierarchy and no voice.

    line 38
  5. Very specific:

    Unfinished interactive element?: If only background-color changes on hover, the element is not finished.

    line 44
  6. Distinctive:

    Every rule here is a *default* to break deliberately, not a law.

    line 63

“Common” is measured: kept by at least 6 in 10 of the 5 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Slop check

A design that is technically fine and still reads as machine-made fails for a small number of repeatable reasons. This is the list of them.

Run it before you call anything done. One "yes" means the page is not finished.

Provenance: distilled from the banned-pattern and sacred-pattern rules of an abandoned design-intelligence project that had ingested ~2,600 Awwwards Site-of-the-Day winners, plus lessons from real client rejections. See CREDITS.

Order matters — do these first

Skipping a step here comes back later as slop you can't name.

  1. Typography before decoration. Establish hierarchy — heading/body/label scale, weight contrast, line length — before you touch color, shadow or radius. A page decorated on top of flat hierarchy cannot be rescued by styling.
  2. Layout comes from the content's logic, not from a card grid. If "card grid" was the reflex answer, the layout was not designed. Ask what shape the content actually is.
  3. Spacing should be rhythmic and uneven. Giving every section the same vertical padding is the quietest source of template-feel. Build a rhythm: places that breathe, places that compress.
  4. Motion needs a doctrine. Motion must express hierarchy, time, or spatial logic. "It looks nice" does not pass. If removing an animation costs the reader nothing, remove it.

A. Composition — most failures are here

  1. Template hero? Hero → features → pricing, assembled by default rather than because the content asked for it.
  2. Stock-photo hero? Photo + headline overlaid + two buttons. This is the pattern even when the photo is real and good. Either the image is the hero, or there is no hero image.
  3. Three equal cards? An equal-width three-card grid used as the reflex answer to "explain the benefits". Fine when the content is genuinely three peers; never as a default.
  4. Same skeleton, different paint? Put it beside the previous page. If the only differences are color and border-radius, it is the same page twice. What must differ: hero media type, the interactive module, the typeface pairing.

B. Material

  1. The default AI trio? Purple/indigo gradient + Inter or Roboto as primary + uniform "safe" rounding. Present together, the page reads as generated no matter how well it is executed.
  2. Gradient CTA? A purple/indigo gradient button used as the default accent move.
  3. Neutral sans everywhere? All type flattened into quiet sans weights with no hierarchy and no voice.
  4. SaaS drift? Generic SaaS polish applied when the brief called for editorial, cultural, luxury or sector work. A hair salon's site should not look like Stripe.

C. Motion and interaction

  1. Ornamental scroll? Scroll-linked motion that does not change comprehension, pacing, or the meaning of a section. Cut it.
  2. Unfinished interactive element? If only background-color changes on hover, the element is not finished. At least three things should move together — surface, position, and shadow — and the shadow should be a softened version of the element's own color, not neutral black.

D. Evidence and honesty

  1. Style without evidence? "I think it looks better" is not evidence. Cite a measured reference value, a spec, or data. If you are claiming a reference does something, measure it with getComputedStyle — do not eyeball it.
  2. Fabricated proof? Testimonials, star ratings, client logos, "N happy customers", award badges, suspiciously precise percentages. If there is no source, remove it — including on demo and concept pages.

Measurable tests (when there is more than one page)

  • Skeleton test — describe each page's mobile first screen in six words. If two pages get the same six words, it is a template.
  • Greyscale blind test — desaturate the thumbnails. Can you still tell them apart? This is where "changed the colors" is caught.
  • Five-second rule — when the opening moment ends, is the phone number / booking / price on screen?

Notes

  • Every rule here is a default to break deliberately, not a law. Breaking one on purpose, with a reason you can state, is design. Breaking one by reflex is slop.
  • The order section is the part people skip. It is also the part that decides whether the rest can work.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free