Anti-Slop-Frontend-Skill

KO | EN

gitlite — search

#data-science #animation #ai-agent #computer-vision #containers #kotlin #tailwindcss #android #ai-agents #monitoring

Anti-Slop-Frontend-Skill

(★ 9)

AJ.on.AI Anti-Slop frontend skill

File Explorer

ZIP Download

- - 00-decision-sheet.md
  - 01-color.md
  - 02-type.md
  - 03-space-surface.md
  - 04-states.md
  - 05-motion.md
  - 06-assets.md
  - 07-audit.md
  - 08-dated-defaults.md
- - check.mjs
- README.md
- SKILL.md
- banner.svg
.gitattributes
.gitignore
LICENSE
README.md

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

</div>

A skill that makes Claude build web interfaces that don't read as machine-generated.

It is not a list of banned colors. It is a process for making the decisions a brief leaves open,
a set of nine reference files loaded only when the task needs them, and a dependency-free static
checker that reads your source and names what was never chosen.

---

## The idea

A tell is not ugliness, and not popularity.

> **A tell is a choice whose frequency is invariant to the brief** — the thing that shows up at the
> same rate whether the page is a mortgage calculator, a techno label, or a hospice.

Design is a sequence of decisions. Wherever a brief is silent, a generator *inherits* a default and
a designer *makes a call*. Every tell marks a place where a decision was skipped, and untouched
defaults are damning precisely because a designer would have touched them.

So the target is not avoidance. It is that **every visible property be derivable from this brief and
no other** — you can point at any value on screen and say why it is that value here, and would be
different elsewhere.

### Why ban-lists fail

They work once, then become the next tell. This is documented, not theoretical:

Advice followed uniformly produces uniformity. A rule that says *avoid X* manufactures *everyone
avoided X the same way*. So the specific values in `references/` are treated as **perishable**, dated,
and quarantined in one file; the process is the durable part.

---

## Install

```bash
git clone https://github.com/ItsRealAJ/Anti-Slop-Frontend-Skill.git
cp -r "Anti-Slop-Frontend-Skill/Anti-Slop (AJONAI)" ~/.claude/skills/anti-slop-ajonai
```

For one project instead of every project, copy it into `.claude/skills/anti-slop-ajonai` inside the
repo. The directory name is the skill name, so keep it as `anti-slop-ajonai` — it must match the
`name:` field in `SKILL.md`.

Then invoke it with `/anti-slop-ajonai`, or let it trigger on its own. It fires on frontend work of
any size, and on phrasings like *this looks AI-generated*, *make it feel designed*, or *why does this
look like every other SaaS site*.

## What it does when it runs

**1. It writes the decision sheet before it writes any markup.** The only intervention with evidence
behind it is front-loading constraints into the *first* generation — correcting afterwards measurably
underperforms starting from a stronger instruction, and generic output is the *mode* of the
distribution rather than an unlucky draw, so retrying and raising temperature do not escape it.

```
SUBJECT     one sentence: what this is, who it's for, its single job
GROUND      the page's world — materials, instruments, vernacular of the subject
PALETTE     4-6 named hex values, each with a role. State the neutral's hue bias.
TYPE        2+ roles (display / text / utility), named faces, and why these
SPACE       two registers: intra-component values and section rhythm — different numbers
SHAPE       one radius value, one elevation policy (tonal step OR shadow, not both)
MOTION      a count of animated moments and a duration band, or "none"
SIGNATURE   the one element this page is remembered by
```

Then it critiques the sheet against a similar brief in the same category. Any line that would be
identical for a different subject is a line it inherited, and it goes again.

**2. It ships the missing states before it restyles the present ones.** When a large pool of candidate
tells was adversarially audited, motion and interaction states had the *highest* survival rate and
hero composition and iconography had the *lowest*. A screenshot of a generated page is usually fine.
The giveaway is that the page is **inert**: no `:active`, no `:focus-visible`, no disabled styling,
no loading or empty or error state, untouched `::selection` and `caret-color`, a scrollbar nobody
looked at. Cheapest, highest-signal work available.

**3. It loads one reference file, not nine.**

---

## The checker

Plain Node, no dependencies, no install step, no config file. It reads source rather than renders,
so it is honest about its limits.

```bash
node scripts/check.mjs src/                    # files or directories
node scripts/check.mjs src/ --json             # machine-readable
node scripts/check.mjs src/ --only=color,states
node scripts/check.mjs src/ --strict           # advisories count as failures
node scripts/check.mjs --list-rules
```

Scans `.html` `.jsx` `.tsx` `.js` `.ts` `.mjs` `.vue` `.svelte` `.astro` `.css` `.scss` `.sass`.
Exit code `1` on any `error`, or on anything at all under `--strict` — so it drops straight into a
pre-commit hook or a CI step.

Every finding carries the reasoning, not just the flag:

```text
src/Hero.jsx
     3  warn     ai-palette-hex  #667eea
        A canonical generated-palette literal. The gradient pair #667eea to #764ba2
        is the most-generated in existence.
        → Derive the accent from the subject. If purple is right here, use a hue you
          chose and built a ramp for.
     4  warn     leading-tight-display  display size with leading-tight (1.25)
        Tailwind v4 sets display line-height to 1, but leading-tight is 1.25 — so this
        WIDENS display leading versus the default.
        → Set display leading explicitly, around 1.05-1.15.
     7  error    placeholder-image  via.placeholder.com
        A placeholder host. These are the most identifiable artifacts in generated work.
        → Real screenshot, real photography, generated asset, or an honest empty state.
     8  error    contrast-500-white  bg-indigo-500 + text-white = 4.47:1 (needs 4.5)
        White text on a Tailwind -500 fill fails the 4.5:1 AA body minimum.
        → Use the -600 or -700 step, or darken your own accent.
     8  warn     no-active-state  file styles :hover but never :active
        This file styles hover but never :active, so a press has no visual receipt.
        Rated the strongest single item in the audit.
        → Add an :active state; respond on pointer-down, not on release.
     …  (7 more findings trimmed for this excerpt)

1 files  3 error  7 warn  2 advisory
Static source checks only. Absence of findings is not evidence of good design.
```

### Severity

Advisories never fail a run on their own, because those rules are the ones most likely to be wrong
about your page.

### Suppression

Suppress a finding you have looked at and accepted. The token is `deliberate-ignore`, from the
skill's original name:

```jsx
{/* deliberate-ignore contrast-500-white */}
<div className="bg-indigo-500 text-white">…</div>
```

```html

```

The comment is read on the flagged line or the line directly above it. A comma-separated list of
rule ids works, and `*` suppresses every rule. A suppression is a recorded decision, which is the
entire point of the skill.

<details>
<summary><b>All 35 rules</b></summary>

**Color** · 6 rules

**Type** · 4 rules

**Space &amp; surface** · 2 rules

**States** · 4 rules

**Motion** · 5 rules

**Assets** · 6 rules

**Meta** · 8 rules

</details>

---

## What's in the repo

```
Anti-Slop (AJONAI)/
├─ SKILL.md                      the always-loaded core: the thesis and the process
├─ references/
│  ├─ 00-decision-sheet.md       fill before writing markup — the highest-leverage file
│  ├─ 01-color.md                palette construction, OKLCH ramps, contrast, dark mode
│  ├─ 02-type.md                 pairing, scale, tracking, leading, measure
│  ├─ 03-space-surface.md        spacing registers, elevation, radius, separators
│  ├─ 04-states.md               the states nobody ships — read by default
│  ├─ 05-motion.md               easing, duration, springs, interruptibility
│  ├─ 06-assets.md               icons, imagery, charts, placeholder data
│  ├─ 07-audit.md                reviewing existing UI, with calibration
│  └─ 08-dated-defaults.md       the current monoculture — dated, will go stale
└─ scripts/check.mjs             35 static rules, dependency-free
```

The whole skill is under 1,800 lines. `SKILL.md` is the only file always in context; everything else
loads on demand.

## Where it differs from other anti-slop rulesets

**Interaction states are weighted above appearance.** Most rulesets are ranked by how bad something
looks in a screenshot. This one is ranked by what survived adversarial audit, and the ranking came
out close to inverted: states and motion at the top, hero composition at the bottom.

**It reports co-occurrence, not items.** Under three independent judging lenses, fewer than 10% of
candidate tells were unanimously high-signal. One rounded card proves nothing. Fourteen unchosen
defaults together prove a lot. So the language is *this reads as inherited*, never *this is AI*.

**Timidity is treated as the failure, not boldness.** Detectors are built so that pure white passes
and a committed warm ground passes — only the undecided middle fires. Half-committing is what reads
as generated.

## What it refuses to do

Other published anti-slop rulesets contain real defects. This one names them and declines to
reproduce them:

- **No blanket typeface bans.** Banning Helvetica and Arial outlaws two of the most-studied faces in
  the history of the discipline. The rule is share-and-context: is this face doing the *display* work
  of a page whose brief never asked for it? A system stack for body text is fine.
- **No total em-dash ban.** Prescribing a hyphen where an en dash is correct damages typography to
  evade a classifier. Optimize for the reader, never for the detector.
- **The correct WCAG large-text threshold.** Large text is 24px, or 18.67px bold — 18pt and 14pt at
  96dpi. Several published skills state 18px, which lets 18–23.99px text pass at 3:1 where AA
  requires 4.5:1. That is an accessibility regression introduced by an anti-slop rule.
- **No scoring human tells as machine tells.** Off-scale magic numbers, a double space, sub-pixel
  misalignment, a novelty display face — these are evidence *against* machine authorship. A rubric
  that counts them as positives misfires on hand-built amateur sites, which are exactly the pages
  most likely to be falsely accused.
- **No overriding you.** If the brief asks for a purple gradient, the skill builds a purple gradient
  and builds it well. Your instruction outranks every rule in here.

## Where it comes from

Built from a multi-agent research project that mined four independent anti-slop rule corpora
(`pbakaus/impeccable`, `leonxlnx/taste-skill`,
`emilkowalski/skill`, `h3nryprod01/design-taste`), professional design systems (Material 3, IBM
Carbon, Apple HIG via the WWDC design talks, Vercel's Web Interface Guidelines), Tailwind and shadcn
source, and the LLM mode-collapse literature — with adversarial verification on every claim.

118 of 153 candidate visual defects did not survive audit. 13 of 25 research claims were refuted.
What shipped is what was left.

## A caveat the skill makes about itself

`references/08-dated-defaults.md` carries a date because it will go stale, and the moment its
contents become common advice they become the next tell. The checker's literal tables have the same
shelf life. Read the process as durable and every specific value as perishable — including the ones
in this README.

## License

MIT — see [LICENSE](LICENSE).

Anti-Slop-Frontend-Skill

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

Download README