anti-ui-slop

Files (1)

• SKILL.md

SKILL.md (first lines)

# Anti UI Slop

## Goal

AI-generated interfaces reveal themselves through convergence: familiar fonts, palettes,
card anatomies, copy rhythms, spacing, and motion accumulate until the page could belong to
any product. A single fashionable choice provides weak evidence. Repeated context-free choices
provide strong evidence.

The finished interface should express its product, audience, content, and constraints. Removing
a tell counts as progress only when the replacement strengthens that specificity.

Keep two classes of findings separate:

- **Quality failures** reduce accessibility, readability, robustness, or performance. Confirmed
  failures receive correction recommendations in reviews and fixes in authorized edit tasks.
- **Slop signals** reveal convergence. Context, repetition, composition, and product fit determine
  whether they become actionable findings.

## Operating contract

- Match the user's authorization. Review and audit requests produce findings only. Diagnose
  requests explain causes only. Build, fix, refine, and polish requests authorize edits.
- Preserve the established design system, brand language, component conventions, responsive
  behavior, semantics, and interaction behavior.
- Read changed UI files first, then shared tokens, layout primitives, typography, and representative
  pages. Existing intent supplies the design direction.
- Exclude generated output, dependency code, lockfiles, snapshots, and intentional anti-pattern
  specimens. Storybooks, design-system galleries, and documentation examples need page-context
  confirmation before they count as repeated composition.
- Use existing fonts, packages, icons, and assets. Obtain user authorization before adding a
  dependency, remote font, generated image, or broad design-system change.
- Preserve product facts. Remove unsupported metrics and decorative claims; never invent evidence.
- Keep fixes scoped. A local tell receives a local fix. A repeated system-level tell receives a
  token or primitive fix.

## Workflow

1. **Scope the interface.** Identify the route, components, styles, and shared primitives that
   control the requested surface. Inspect recent or changed files first in an existing project.
2. **Write the direction.** State one sentence before editing:
   `[product/audience] should feel [qualities]; [content] has priority; [constraints] shape the UI.`
3. **Scan in three passes.** Check quality failures, catalogued slop signals, then composition-level
   repetition across the whole page.
4. **Classify the evidence.** Assign layer, confidence, and context. Record earned exemptions.
5. **Fix the highest-leverage cause.** Correct shared tokens and repeated structures before isolated
   selectors. Let content hierarchy determine layout, emphasis, and rhythm.
6. **Verify.** Inspect the diff, run existing checks, and perform rendered checks when a browser or
   preview is available.
7. **Report the outcome.** Lead with findings for reviews. Lead with implemented changes for edit
   requests. Include remaining rendered-verification items.

## Evidence model

| Layer | Meaning | Reporting rule |
|---|---|---|
| **Source** | Literal markup, styles, tokens, or copy provide direct evidence | Cite the selector, class, component, or text and its source line |
| **Render** | Computed layout, stacking, viewport size, or composited color determines the result | Confirm in a rendered page; otherwise label `Candidate - needs rendered verification` |
| **Judgment** | Product context and page composition determine whether a pattern is earned | Cite at least two concrete observations and explain the product mismatch |
| **Opt-in** | Provider-associated weak signal from the reference catalog | Keep silent unless the user requests an aggressive/provider-specific sweep |

Use these confidence levels:

- **Confirmed:** direct quality failure, rendered failure, or unmistakable source pattern with its
  component role verified.
- **Probable:** one dominant slop signature or at least two independent slop signals within the same
  region.
- **Candidate:** missing rendered evidence, unresolved variables, incomplete component context, or a
  weak global signal.
- **Exempted:** the pattern communicates real meaning, follows the established brand, or serves a
  functional interaction.

Severity and confidence answer different questions. Severity describes user impact; confidence
describes evidential strength.

- **Critical:** blocks access or use, ships a broken asset, hides required content, or creates a major
  accessibility failure.
- **High:** affects a primary flow or dominates a page through a repeated slop cluster.
- **Medium:** affects a local component, secondary flow, or isolated slop signature.
- **Low:** cleanup with limited user impact. Keep unverified Candidates in their own section.

Accuracy rules:

- Quality findings can stand alone. Slop findings need a dominant signature or a local cluster.
- Weak global signals **T8, T9, C1, and C5 never stand alone**. Fonts and colors become evidence
  through their relationship with layout, type hierarchy, copy, and decoration.
- Count related symptoms once. An identical feature grid with icon tiles is one compositional cluster,
  with both rule IDs cited as supporting evidence.
- Follow variables, component variants, conditional classes, and shared tokens to their effective use.
- Use the rendered DOM for heading order when component composition changes source order.
- Trace localized strings and mapped components to their rendered role before applying copy or
  repetition rules.
- Treat demo pages that intentionally display bad UI as specimens. Preserve the demonstrated defect.
- Treat thresholds as screening values. Component role, physical size, language, density, and viewport
  determine the final judgment.

## Replacement principles

- **Structure follows content.** Comparable items suit tables or aligned lists. Sequences suit steps.
  Narrative content suits editorial flow. Interactive choices suit controls with clear boundaries.
- **Hierarchy uses a system.** Establish explicit roles for display, heading, body, label, and data.
  A single font family can support strong hierarchy through size, weight, width, optical size, and
  spacing. A second family earns its place through a clear role.
- **Color carries a job.** Assign colors to brand, action, status, emphasis, and surfaces. Repeated
  decorative gradients and glows dilute those jobs.
- **Spacing communicates relationship.** Related items sit close. Sections receive larger separation.
  Repeated spacing tokens remain useful when their semantic roles differ visibly.
- **Motion communicates state, continuity, or causality.** Default surfaces stay still. One meaningful
  transition carries more value than many ornamental effects.
- **Decoration carries meaning.** Domain artifacts, real product UI, data, photography, diagrams, and
  brand motifs provide specificity. Generic icons and blobs disappear when they carry no information.
- **Asymmetry follows priority.** Give more space to more important content. Avoid arbitrary card-size
  variation created solely to appear designed.

## The 46-rule catalog

The catalog preserves the reference split: 41 deterministic candidates, five Judgment rules, and
four provider-specific Opt-in modifiers.

From discountry/ritmex-skills, MIT.

More from discountry/ritmex-skills