# Apply clean fixes

> Map scanner hits to remediation steps from the fixes playbook, choose propose vs apply in an agent host, and confirm the clean alternative.

- Repository: yetone/kill-ai-slop
- GitHub: https://github.com/yetone/kill-ai-slop
- Human docs: https://grok-wiki.com/public/docs/yetone-kill-ai-slop-c0d8c9670cbb
- Complete Markdown: https://grok-wiki.com/public/docs/yetone-kill-ai-slop-c0d8c9670cbb/llms-full.txt

## Source Files

- `skill/references/fixes.md`
- `skill/SKILL.md`
- `skill/references/detection.md`
- `website/src/data/demos.ts`
- `website/src/components/BeforeAfter.astro`

---

---
title: "Apply clean fixes"
description: "Map scanner hits to remediation steps from the fixes playbook, choose propose vs apply in an agent host, and confirm the clean alternative."
---

After triage and the pre-edit report, **kill-ai-slop** remediates confirmed tells through the agent skill’s **Fix** step: map each hit to a direction in `skill/references/fixes.md`, apply the minimal edit (or only propose it), then re-scan and visually check that the clean alternative holds. The standalone scanner (`node scripts/scan.mjs`) **never edits files** — only an agent host that loads the skill can write changes.

## Prerequisites

| Requirement | Detail |
| --- | --- |
| Agent skill | `kill-ai-slop` installed in a coding agent (`skill/SKILL.md`) |
| Prior steps | Scope → Scan → Triage → Report already done; do **not** mass-edit before the user has seen the report |
| Playbook | `skill/references/fixes.md` (before→after directions per tell) |
| Scanner | `node scripts/scan.mjs <root>` and optional `--json` for machine-readable triage |
| Optional visual ref | Field-guide demos in `website/src/data/demos.ts` via `BeforeAfter.astro` (Slop / Clean) |

<Warning>
Do not treat scanner output as a verdict. Every hit is a lead: open the file, decide **slop vs intentional**, and keep deliberate brand choices (tokens, logos, real illustrations).
</Warning>

## Propose vs apply

The skill workflow splits **proposal** (Report) from **application** (Fix). The scanner never crosses that boundary.

```text
Scanner (read-only)          Agent host (skill)
─────────────────            ──────────────────
scan.mjs → hits              triage (slop vs intentional)
                             report + proposed fix per group
                             ask: which groups / all?
                             ── user decision ──
                             apply minimal diffs (Fix)
                             re-scan + visual check
```

| Mode | When | What the agent does | Files written? |
| --- | --- | --- | --- |
| **Propose** | Always before edits; default until the user chooses groups | Group confirmed hits; one-sentence why + proposed fix; ask which groups to apply or whether to proceed on all | No |
| **Apply** | After the user approves some or all groups | Minimal change per tell using `references/fixes.md`; prefer shared tokens/components | Yes (explicit paths only) |

Report format the skill mirrors:

```text
slop  src/Hero.tsx:12   indigo→violet gradient        → one solid accent
slop  src/Hero.tsx:31   gradient-clip headline        → solid ink, scale up
slop  src/Note.tsx:8    border-l-4 callout ×3         → 1 aside, rest is body
slop  copy.md:1         "not just X — it's Y"         → say the specific thing
→ 4 groups, 11 hits.
```

Then ask which groups to apply, or whether to proceed on all.

## Fix procedure

<Steps>
  <Step title="Hold the fix principles">
    On every change: decide before you decorate; one accent, one voice; hierarchy from scale and space; subtract first; prefer specific copy over punchy copy; decoration only when it is a real signal.
  </Step>
  <Step title="Order of operations (playbook)">
    1. Design tokens / theme first (colors, radius, fonts) — many hits drop at once.  
    2. Shared components, then one-off call sites.  
    3. Copy last.
  </Step>
  <Step title="Map each approved group to a playbook section">
    Look up the tell in `skill/references/fixes.md` (numbered **01–23**). Patterns are **directions**, not find-and-replace rules — adapt to project tokens and framework.
  </Step>
  <Step title="Apply the minimal edit">
    Preserve intent and function. Prefer editing shared tokens/components over every call site. Never invent new brand colors: if palette must change, propose neutrals + the project’s existing accent and let the user confirm. Keep copy meaning; make it specific rather than deleting it.
  </Step>
  <Step title="Confirm the clean alternative">
    Re-run the scanner and note intentional leftovers with reasons. If a dev server exists, compare before/after visually — a green scan is not the same as a better page. Optional: match the tell’s field-guide demo (`before` → `after` in `demos.ts`).
  </Step>
</Steps>

### Re-scan commands

```bash
node scripts/scan.mjs <root>          # human-readable grouped report
node scripts/scan.mjs <root> --json   # machine-readable for triage
```

Success signal: hit count for the fixed tells drops; remaining hits are either unapproved groups or intentional keeps with a stated reason.

## Map scanner hits → remediation

Use the tell name from the report (or taxonomy id) as the key into `references/fixes.md`. Summary of the playbook direction and the clean outcome:

| Tell | Remediation direction | Clean outcome |
| --- | --- | --- |
| **01** Indigo→violet gradient | Solid accent class/token; drop colored glow shadow; if gradient kept, single-hue, low contrast, justified | One solid, chosen accent |
| **02** Gradient headline text | Solid ink; use scale/weight for impact | Solid heading, no `bg-clip-text` default |
| **03** Warm “cozy” palette | Near-neutral paper/ink/rule; one warm accent only; propose neutrals, confirm before global apply | Neutral base + one accent |
| **04** Default semantic palette | Neutrals + at most one–two intentional semantic colours (not stock blue/green/amber/red set) | Coherent chips from brand palette |
| **05** One-hue status box | State in a word; neutral surface + border; one muted accent | Neutral alert, not mono-hue wash |
| **06** Gradients as atmosphere | Flat background; hairline/border for depth; glow only if it points at one element | Flat held surfaces |
| **07** Serif-italic on one word | Emphasize by weight/position, one voice | Bold (or structure), not serif/italic span in sans heading |
| **08** Serif where sans belongs | UI sans in font tokens; serif only for genuine editorial product voice | Sans UI/body unless editorial |
| **09** Decorative strikes & highlights | Remove decorative `<s>`/`<u>`/`<mark>`; keep real edits, links, annotations | Structure carries emphasis |
| **10** Highlighted keywords | Specific prose; at most one accented phrase | No multi-color keyword soup |
| **11** AI copywriting voice | Rewrite for specifics; delete triads and em-dash drama | Concrete claims, not “not just X — it’s Y” |
| **12** Emoji everywhere | Remove from headings/buttons/bullets; keep only if real status info | Plain chrome labels |
| **13** Glowing status dot | Flat dot + word; no ping/pulse/glow shadow | Small flat status marker |
| **14** Rounded card, colored left border | Collapse stacked callouts to body; at most one real `<aside>` | Prose + one aside |
| **15** Rounded-square icon tiles | Labelled list with real specifics; drop decorative tiles | Specific feature lines |
| **16** Max radius + glassmorphism | One small radius token; solid surfaces instead of blur panes | Solid card, consistent radius |
| **17** Oversized drop shadow | Tight elevation or hairline; colorless; never larger than the element | Hairline + tight contact shadow |
| **18** Corners that don’t nest | Inner radius = outer − padding, or no inner radius | Concentric nested corners |
| **19** Badge & pill spam | Delete decorative pills; keep at most a real status/version tag | e.g. `v2.1` only |
| **20** AI-drawn SVG icons | Real designed or refined icon; no crude blob-with-dot-eyes; no bare letter fallback | Crisp on-brand mark |
| **21** Icon in a tint of itself | Icon inherits text color; no tinted tile container | Bare icon (or deliberate opaque surface) |
| **22** All-caps card grid | One important point told fully; drop equal-weight CAPS micro-labels | Lead + supporting prose |
| **23** Tasteful terminal | Monospace for code only; terminal chrome only when product-serving | UI not faux-terminal |

<Note>
Full before→after diffs live in `skill/references/fixes.md`. Detection patterns and false positives live in `skill/references/detection.md` — use them during triage, not as auto-apply rules.
</Note>

### Example: report line → playbook → edit

**Report:** `slop  src/Hero.tsx:12   indigo→violet gradient → one solid accent`

**Playbook (01):**

```diff
- class="bg-gradient-to-r from-indigo-500 to-purple-500 shadow-lg shadow-purple-500/50"
+ class="bg-[--accent]"      /* one solid, chosen accent */
```

**Verify:** re-run scanner on the project root; open Hero in the running app if available.

## Confirm the clean alternative

### 1. Scanner delta

| Check | Expected |
| --- | --- |
| Count for fixed tells | Lower than pre-fix report |
| Leftover hits | Listed with reason (intentional brand / unapproved group) |
| Unrelated files | Untouched (no drive-by reformat) |

### 2. Visual check (when a dev server exists)

Compare the live UI before and after. Prefer this over scan-only success for surfaces that grep poorly (e.g. nested corner radius, AI SVG judgment).

### 3. Field-guide before/after demos

The site encodes the preferred clean outcome as plain HTML pairs in `website/src/data/demos.ts` (`before` / `after`). `website/src/components/BeforeAfter.astro` renders them with a Slop / Clean toggle (`data-show="before" | "after"`). Demo `after` panes follow the same rules the skill enforces: one accent, no gradient chrome, hierarchy from scale + space, mono for code only, no decorative emoji/badges.

| Demo id (`demos.ts`) | Illustrates (approx.) |
| --- | --- |
| `indigo-violet-gradient` | Solid card/button vs gradient chrome |
| `gradient-text` | Solid head vs gradient-clip head |
| `warm-cozy-palette` | Neutral workspace card vs amber wash |
| `default-semantic-palette` | Coherent chips vs stock semantic rainbow |
| `serif-emphasis` | Bold vs serif-italic single word |
| `serif-body-misuse` | Sans panel vs display serif UI |
| `decorative-text-lines` | Plain head vs strike/underline/mark |
| `highlighted-keywords` | Specific copy vs colored keyword spans |
| `ai-copy-tics` | Specific product copy vs AI voice tics |
| `emoji-everywhere` | Specific bullets vs emoji list |
| `status-dot-glow` | Flat dot vs glowing/live status |
| `left-border-callout` | Plain list vs stacked colored callouts |
| `pastel-icon-tiles` | Specific feature list vs icon tiles |
| `over-rounded-glass` | Flat solid card vs glass/pill |
| `oversized-shadow` | Hairline + tight shadow vs room-sized fog |
| `badge-spam` | Version tag vs pill spam |
| `feature-grid` | Focused narrative vs CAPS card grid |

Use demos as a **target shape**, not as pasteable production markup — adapt to the host project’s tokens.

## Guardrails while applying

| Rule | Behavior |
| --- | --- |
| Authorship | Unfamiliar files and deliberate flourishes: ask, don’t strip |
| Diff size | Small, reviewable; never reformat unrelated code |
| Staging | Never `git add -A`; stage explicit files only; leave others’ WIP alone |
| Dependencies | No new packages solely to de-slop |
| Brand colors | Propose neutrals + existing accent; user confirms global palette changes |
| Palette (03) | Propose neutral values; confirm before applying globally |
| Scanner role | Pure Node, no deps, **never edits files** |

## Troubleshooting

| Symptom | Likely cause | Action |
| --- | --- | --- |
| Scan still reports a “fixed” file | Pattern still matches (e.g. leftover utility class) or intentional keep | Re-open file; finish token-level fix or document intentional leave |
| Mass visual regression | Applied without Report approval or edited all call sites | Revert; re-report by group; fix tokens/components first |
| Brand looks wrong after palette swap | Invented colors or global cozy→neutral without confirm | Stop; re-propose neutrals + existing accent |
| Copy became empty or generic | Deleted instead of specified | Restore meaning; rewrite to concrete claims (playbook 11/10) |
| Nested radius still looks off | Same `rounded-*` on outer and inner | Inner ≈ outer − padding (playbook 18) |
| Agent edited without asking | Skipped Report step | Treat as process failure; show report and re-ask groups |

## Related pages

<CardGroup>
  <Card title="Skill workflow" href="/skill-workflow">
    Full lifecycle: scan, triage, report, then propose or apply without silent scanner edits.
  </Card>
  <Card title="Remediation playbook" href="/fixes-playbook">
    Per-tell clean fixes, remove/replace guidance, and before/after directions.
  </Card>
  <Card title="Scan a web project" href="/scan-web-project">
    Point the scanner at a path and interpret grouped vs JSON reports.
  </Card>
  <Card title="Detection patterns" href="/detection-patterns">
    Code-level signals and false positives used when confirming hits.
  </Card>
  <Card title="Use the agent skill" href="/use-agent-skill">
    Invoke kill-ai-slop in a coding agent host after install.
  </Card>
  <Card title="Scanner CLI reference" href="/scanner-cli-reference">
    Invocation, `--json`, and the hard constraint that the scanner never edits files.
  </Card>
</CardGroup>
