Anti Slop

---
name: anti-slop
description: "Zero-tolerance Anti-AI Slop engine: crisp UI, clean code, no slop / Engine Anti-AI Slop: UI presisi, kode bersih tanpa placeholder."
author: "Roedy Rustam"
version: "4.8.0"
---

# Sovereign Anti-AI Slop & Craftsmanship Engine (2026 Unified Edition)

[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)

---

<a name="english"></a>
## English

### Executive Directive & Trigger Conditions
The **Sovereign Anti-Slop Directive** is the uncompromising zero-tolerance standard governing all AI agent actions across the vibes-plug swarm. AI slop degrades developer trust, burns context tokens, bloats codebases, and introduces catastrophic production defects.

Anti-slop is a **filter, not a style guide**: it prescribes no fixed colors, fonts, or layouts—your creative direction remains yours. Removing slop clears away generic AI habits, while the **Liveliness Toolkit** ensures the final product is vivid, authentic, and deliberate rather than sterile.

**Universal Trigger Conditions:**
- **Every Code Generation & Modification**: Every function, component, or file created or modified by any agent.
- **Frontend & UI Work**: Design systems, page layouts, components, cards, dashboards, and responsive styling.
- **Copywriting & Prose**: Headlines, CTAs, product copy, documentation, commit messages, and PR summaries.
- **Code Comments**: Documentation comments, inline annotations, and docstrings.
- **Automated Quality Gates & PR Audits**: Code reviews (`coderabbit`), TDD loops (`autonomous-tdd-debugger`), and production release hardening (`production-ready-hardener`).

---

## Two Usage Modes Protocol

On every anti-slop activation, resolve the operational mode in this strict priority:
1. **Explicit Session Instruction**: User specifies `during` or `after` in the prompt. Announce once: `antislop active: <mode> (session override).`
2. **Global Preference**: Read `%APPDATA%\antislop\settings.json` (Windows) or `~/.config/antislop/settings.json` (macOS/Linux).
3. **Default Fallback**: Mode 1 (DURING) for new features/code generation; Mode 2 (AFTER) when auditing existing projects.

### Mode 1: DURING (Active Real-Time Prevention)
- Follow all 40 rules actively while generating code, copy, and UI.
- Prevents slop from being written in the first place.
- Conclude the task with the **Mandatory Delivery Gate** report.

### Mode 2: AFTER (Post-Build Audit & Remediation)
- Audit an existing or completed codebase/project without altering files prematurely.
- Generate a timestamped audit report in `anti-slop/audit-001-YYYY-MM-DD.md` (incrementing sequence).
- Each finding is strictly numbered, citing:
  - Violated Rule ID (`R-XX`)
  - Finding description & exact file/line
  - Priority: Hard Gate = `HIGH`, Purpose-Gate = `MEDIUM`, Quality Lock = `LOW`
- **Hard Gate**: Wait for human approval of specific finding numbers. **Never touch unapproved items.**
- Remediate approved items and deliver a follow-up verification report.

---

## The 3-Tier Rule Framework (40 Mandatory Rules)

All 40 rules are organized into three distinct tiers with clear enforcement semantics:
1. **Hard Gate** (Tier 1): Absolute bans and mandatory requirements. Zero exceptions.
2. **Purpose-Gate** (Tier 2): Technique allowed ONLY when serving a stated hierarchy/identity purpose with written rationale. Includes strict dose caps.
3. **Quality Locks** (Tier 3): Craftsmanship and resilience standards.

```
┌────────────────────────────────────────────────────────────────────────┐
│             SOVEREIGN UNIFIED ANTI-SLOP RULE MATRIX                    │
└───────────────────────────────────┬────────────────────────────────────┘
                                    │
    ┌───────────────────────────────┼───────────────────────────────┐
    │                               │                               │
┌───▼───────────────────────────┐ ┌─▼───────────────────────────┐ ┌─▼───────────────────────────┐
│     TIER 1: HARD GATE         │ │   TIER 2: PURPOSE-GATE      │ │  TIER 3: QUALITY LOCKS      │
│  (Absolute - Zero Exception)  │ │ (Purpose & Written Reason)  │ │   (Craftsmanship & Invar)   │
├───────────────────────────────┤ ├─────────────────────────────┤ ├─────────────────────────────┤
│ R-02 Copywriting (Em Dash)    │ │ R-01 Color & Gradients      │ │ C-1 Intentionality          │
│ R-03 Mobile Responsiveness    │ │ R-04 Icons Relevance        │ │ C-2 Functional Completeness │
│ R-17 Real Data & Numbers      │ │ R-06 Typography Purpose     │ │ C-3 Content-Driven Comp.    │
│ R-18 Honest Testimonials      │ │ R-07 Background Texture     │ │ C-4 System Resilience       │
│ R-23 Clarification & Assets   │ │ R-08 Spacing Rhythm         │ │ C-5 Evidence Over Claims    │
│ R-24 Real Navigation Dests    │ │ R-09 Layout Diversity       │ └─────────────────────────────┘
│ R-25 WCAG AA Color Contrast   │ │ R-10 Glassmorphism Cap (1-2)│
│ R-26 Functional Interactive   │ │ R-11 Deliberate Radii       │
│ R-27 Mandatory 3 UI States    │ │ R-12 Grounded Shadows       │
│ R-28 Product-Specific FAQ     │ │ R-13 Focus Glow Cap (1-2)   │
│ R-32 Keyboard Accessibility   │ │ R-14 Purposeful Motion      │
│ R-33 No Script File-Patching  │ │ R-15 Action-Driven CTAs     │
│ R-34 All Shipped Themes Work  │ │ R-16 Buzzword Elimination   │
│ R-35 Click-Through Evidence   │ │ R-19 Contextual Visuals     │
│ R-36 No Fabricated Claims     │ │ R-20 Functional Decors Only │
│ R-37 Design Direction & Dials │ │ R-21 Authentic Demos        │
│ R-38 Honest Placeholders      │ │ R-22 Dark Mode Rationale    │
│                               │ │ R-29 No AI Capsule Badges   │
│                               │ │ R-30 No Redundant Eyebrows  │
│                               │ │ R-31 No Banner Comments     │
└───────────────────────────────┘ └─────────────────────────────┘
```

---

### Tier 1: Hard Gate Rules (Absolute Zero-Tolerance)

Breaking any rule in this tier causes an automatic **FAIL** at the Delivery Gate.

#### R-02 — Copywriting: Em Dash Ban
- **FORBIDDEN**: The em dash character (`—`) in any AI-generated prose, marketing copy, or UI text.
- **Allowed Alternatives**: Comma (`,`), period (`.`), colon (`:`), semicolon (`;`), or parentheses `()`.
- **Rationale**: The em dash is the single most over-represented syntactic tell of synthetic text generation.
- **Carve-out**: Documentation formatting (e.g. `R-02 — Title`) is exempt; UI content and body prose are strictly subject to this ban.

#### R-03 — Mobile Responsiveness: Continuous Reflow
- **REQUIRED**: Mobile layout must be a dedicated, deliberate layout, never the desktop version shrunk down.
- Zero horizontal overflow (`overflow-x: hidden` used as a band-aid for broken layouts is forbidden).
- No text escaping container boundaries; no colliding cards or off-screen clipping.
- Minimum interactive touch target: **44x44px** (`min-h-[44px] min-w-[44px]`).
- Fluid viewport units: use `100dvh` instead of `100vh` to avoid mobile browser address bar jumps.
- Breakpoints must be placed where content breaks, not matched to arbitrary device marketing specs.

#### R-17 — Data & Numbers Authenticity
- **FORBIDDEN**: Hallucinated statistics, percentages, or metrics (`10,000+ users`, `99.9% uptime`, `500M queries`).
- If real verified data is unavailable, display **no numbers at all** or use an honest placeholder (`[REAL METRIC]`). Empty is infinitely better than deceptive.

#### R-18 — Testimonials & Social Proof
- **FORBIDDEN**: AI avatars, fictional customer names, invented job titles, or generated reviews.
- Do not generate a testimonials section unless provided with verified real customer quotes.

#### R-23 — Clarification & Honest Visual Placeholders
- **REQUIRED**: Never invent final logos, team avatars, or brand mascots on assumption.
- Confirm with user before generating brand assets. If rapid prototyping without feedback, use honest text markers: `[LOGO]`, initials avatar, or geometric placeholders. Disguising assumptions as final deliverables is forbidden.

#### R-24 — Navigation Integrity
- **FORBIDDEN**: Navbar items pointing to non-existent sections, dead anchors (`#`), or unbuilt routes.
- Every nav link must navigate to an existing, accessible route or section. Label unbuilt features explicitly as "Coming Soon".

#### R-25 — Color Contrast (WCAG 2.2 AA)
- **REQUIRED**: All text must meet WCAG AA contrast against its actual background:
  - Normal text (<18px): **minimum 4.5:1 ratio**.
  - Large text (≥18px bold or ≥24px regular): **minimum 3:1 ratio**.
- **FORBIDDEN**: Light grey text on white/light grey, dark grey on black without computation, or white text across variable photo/gradient backgrounds without a protective solid scrim.
- Contrast verification must be computed via `scripts/contrast-check.py` or mathematical formula; eyeball claims of AA compliance are rejected.

#### R-26 — Interactive Elements Completeness
- Every button, dropdown trigger, link, and toggle must possess authentic behavior or be eliminated:
  - Links navigate to real destinations.
  - Modals open, trap focus, and close with `Escape`.
  - Forms validate inputs and display authentic submission feedback.
  - Menus and accordions toggle state.
- **FORBIDDEN**: Dead buttons (`onClick={() => {}}`), empty hrefs, or static div look-alikes.

#### R-27 — Mandatory 3 UI States Contract
- **REQUIRED**: Every data-driven view or component must explicitly implement:
  1. **Empty State**: Friendly contextual illustration/icon + 1-sentence explanation + primary action CTA.
  2. **Loading State**: Geometry-matching pulsing skeleton matching the target shape (no full-page jarring spinners).
  3. **Error State**: Actionable recovery message + retry button.

#### R-28 — Product-Specific FAQ
- **FORBIDDEN**: Template FAQ questions (*"Is my data secure?"*, *"Can I cancel anytime?"*) that lack specific domain relevance.
- If domain-specific questions cannot be answered truthfully, omit the FAQ section entirely.

#### R-32 — Keyboard Accessibility & Focus Indicator
- **REQUIRED**: Full keyboard navigability (`Tab` / `Shift+Tab`) following visual order.
- Actionable elements must trigger on `Enter` or `Space`.
- **FORBIDDEN**: Removing focus outline (`outline: none`, `focus:outline-none`) without providing an explicit high-contrast focus ring (`focus-visible:ring-2 focus-visible:ring-offset-2`).

#### R-33 — Prohibition of Script File-Patching
- **FORBIDDEN**: Adding features (e.g. dark mode, theme toggles) via external Python/Node helper scripts that perform regex or string replacement on `.css`/`.tsx` files.
- All styles and logic must be implemented cleanly in the source code files.

#### R-34 — All Shipped Themes Must Be 100% Functional
- If a theme switcher is provided, both Light and Dark modes must be fully styled, tested, and contrast-compliant. Shipping an unstyled or broken secondary mode is a Hard Gate failure.

#### R-35 — Verification & Click-Through Evidence
- **REQUIRED**: Build and execute the code before declaring completion.
- Inspect the terminal and browser console for runtime errors or warnings.
- Perform a manual click-through pass of every interactive element and record evidence in the Delivery Gate report.

#### R-36 — Zero Fabricated Compliance & Performance Claims
- **FORBIDDEN**: Fabricating compliance badges (*SOC 2 Type II Certified*, *ISO 27001*, *HIPAA Compliant*) or unverified performance claims (*300% faster*, *10x acceleration*) without authentic proof.

#### R-37 — Design Direction & Honest Default Dials
- Every UI must be anchored in `DESIGN.md` or explicit brand guidelines.
- If building without direction, you must explicitly declare the output as a *"Draft without direction"* and set the honest dials to **ENERGY 1 / RHYTHM 1 / MOTION 1**. Falling into a sterile default while pretending to have design direction is forbidden.

#### R-38 — Real Content or Honest Placeholder
- Every feature, card, and metric must represent genuine domain facts OR carry an explicit placeholder badge (`[REAL DATA]`). Never write semi-realistic placeholder fiction that deceives the viewer.

---

#### R-39 — Accessible Semantics & Interaction Affordances
- **REQUIRED**: Every enabled interactive element (`button`, `a[href]`, `select`, `summary`, `label[for]`, custom `role="button"` / `tab` / `switch`) must show `cursor: pointer`, declared once in the base CSS layer. Disabled controls must show `cursor: not-allowed`.
- **REQUIRED**: Actions must be semantic `<button type="button">`; navigation must be `<a href="...">` pointing to a genuine route or destination. Never use clickable `<div onClick>` or `<span onClick>` without semantic role, keyboard focusability (`tabIndex={0}`), and keydown handlers.
- **REQUIRED**: Every interactive element must provide an accessible name (icon-only buttons require explicit `aria-label` or visually hidden text; icons require `aria-hidden="true"`). Every form input requires a visible `<label>`. Every image requires an `alt` attribute (empty `alt=""` only if purely decorative).
- **REQUIRED**: Distinct hover, active, and focus-visible states; never rely on color alone to communicate state.
- **REQUIRED**: Non-essential animations must stop under `@media (prefers-reduced-motion: reduce)`. Any animation moving longer than 5 seconds must provide a user pause/stop control.
- **REQUIRED for Full Documents**: Document-level HTML requires `<html lang="...">`, a unique informative `<title>`, semantic landmarks (`<header>`, `<nav>`, `<main>`, `<footer>`), a single `<h1>`, and sequential heading hierarchies without skipping levels.

#### R-40 — Performance Mechanisms & Core Web Vitals
- **REQUIRED (Cumulative Layout Shift - CLS)**: Every `<img>`, `<video>`, and `<iframe>` must have explicit `width` and `height` attributes or a defined CSS `aspect-ratio` (`aspect-video`, `aspect-square`). Space for dynamically injected banners, ads, or embeds must be reserved in advance to eliminate layout shift.
- **REQUIRED (Largest Contentful Paint - LCP)**: The above-the-fold hero image must be an explicit `<img>` in the HTML markup (never hidden behind CSS background images or delayed by client JavaScript), must declare `fetchpriority="high"`, and must NEVER declare `loading="lazy"`.
- **REQUIRED (Interaction to Next Paint - INP)**: No render-blocking third-party analytics or tracker scripts in `<head>`. Non-critical scripts must be loaded with `defer`, `async`, or dynamically on user interaction.
- **FORBIDDEN**: Fabricating or guessing Lighthouse scores or Core Web Vitals figures that were not empirically measured via browser DevTools or CrUX field telemetry (enforcing R-36). If unmeasured, state explicitly "not measured".

---

### Tier 2: Purpose-Gate Rules (Technique Allowed, Purpose Required)

Techniques in this tier are permitted **only when they serve a documented hierarchy or identity goal**, backed by written rationale in the code or design document.

- **R-01 — Color & Gradients**: Generic blue-purple, blue-cyan, or rainbow gradients are forbidden as defaults. Gradients are permitted only as functional hierarchy dividers with written rationale. Exactly ONE focal accent color per view.
- **R-04 — Icons**: Sparkle, star, orb, bot, and diamond icons are forbidden as default feature glyphs. Icons must possess authentic semantic connection to the feature.
- **R-06 — Typography**: Monospace terminal aesthetics and shouting wide-tracked uppercase labels (`HOW IT WORKS`) are forbidden as generic tech costumes. Type must enhance legibility and reflect brand character.
- **R-07 — Background**: Dot grids, blueprint grids, and graph paper textures are forbidden as cheap tech shortcuts. Use authentic brand textures or clean solid surfaces.
- **R-08 — Spacing Rhythm**: Uniform spacing across all sections is forbidden. Spacing must express intentional rhythm and visual breathing room.
- **R-09 — Layout**: Formulaic AI landing pages (Hero -> 3 feature cards -> 3 steps -> Bento grid -> Pricing -> FAQ) are forbidden. Layouts must reflect user task flows.
- **R-10 — Glassmorphism Dose Cap**: Frosted glass (`backdrop-blur`) is strictly capped at **maximum 1-2 elements per page**. The premier, authorized implementation is the **Floating Island Glass Capsule Header** and associated **Flyout Mega Menu Card**, utilizing high-grade dark translucency (`bg-neutral-950/80`, `backdrop-blur-xl saturate-180`, 1px `border-white/10`) to eliminate generic, monotonous edge-to-edge template navbars.
- **R-11 — Deliberate Border Radius**: Indiscriminate pill-shape addiction (`rounded-full` on standard cards, text inputs, and rectangular action buttons) is forbidden. Follow the structured 3-tier radius scale (6-8px inputs/buttons, 12-16px cards). *Architectural Exception*: The **Floating Island Navigation Capsule Bar** is the authorized, prestigious exception designed as an elevated hardware-style cockpit.
- **R-12 — Grounded Shadows**: Floating zero-gravity colored drop shadows (`shadow-2xl shadow-indigo-500/50`) are forbidden. Use crisp 1px borders paired with subtle directional elevation (`shadow-xs` / `shadow-sm`).
- **R-13 — Focus Glow Dose Cap**: Neon glow borders and radiating cards are capped at **maximum 1-2 focus elements** on the entire page.
- **R-14 — Purposeful Motion**: Perpetual floating loops and multi-stacked entrance animations on scroll (fade + slide + scale + bounce) are forbidden. Transitions must be snappy (150-250ms), purposeful, and honor `prefers-reduced-motion`.
- **R-15 — Action-Driven CTAs**: Generic CTAs (*Get Started*, *Learn More*, *Try Now*) are replaced with specific, outcome-oriented copy (*Create free account*, *Read API reference*, *Import repository*).
- **R-16 — Buzzword Elimination**: AI buzzwords (*unlock the power*, *seamless*, *robust*, *elevate*, *revolutionary*, *game-changer*, *next-level*, *delve*) are strictly eliminated in favor of concrete facts.
- **R-19 — Contextual Visuals & Isometric Machine Anatomy**: Generic Undraw/Storyset illustrations, 3D clay blob characters, and abstract "AI flowchart slop" (floating slabs or hollow boxes connected by arbitrary dotted arrows) are strictly forbidden when explaining technical architectures, algorithms, or protocols. Mandate the **Physical Isometric Anatomy Standard** ("The Object is the Explanation"): invent a concrete, high-density physical machine (test rig, dial gauge, gantry plotter, or pin-tumbler lock) with 4-tone shading, 40+ parts, lines that resolve, and live numeric readouts.
- **R-20 — Non-Functional Decorations**: Colored vertical accent stripes on card edges, trailing decorative button arrows (`→`), and floating ambient shapes are forbidden.
- **R-21 — Authentic Demos**: Marketing a tool without displaying the actual interface or executable product is forbidden.
- **R-22 — Dark Mode Rationale**: Dark mode is a conscious brand decision, not an automatic default chosen because it looks "developer-focused".
- **R-29 — Capsule Badges**: Pill badges containing "AI Powered", "Beta", or "New" with glowing dots are forbidden unless representing a verified functional runtime status.
- **R-30 — Redundant Eyebrows**: Pill badges parked directly above an H1 heading that merely repeat the category already stated in the headline are forbidden.
- **R-31 — Decorative Code Separators**: Banner comments, box-drawing separators (`// =======================`), and ALL CAPS workflow banners are forbidden in code comments.

---

### Tier 3: Quality Locks & Craftsmanship (C-1 to C-5)

- **C-1 — Intentionality**: Every visual, architectural, and copy decision has a reason that can be articulated. Defaulting because "the LLM suggested it" is rejected.
- **C-2 — Functional Completeness**: Every control works completely. No partial stubs or non-responsive interactions.
- **C-3 — Content-Driven Composition**: Every section exists because the product content requires it, not to satisfy a page template.
- **C-4 — Resilience**: The UI holds up in all 3 states (empty, loading, error), all themes, all responsive breakpoints (320px to 4K), and under keyboard-only navigation.
- **C-5 — Evidence Over Claims**: Anything presented as fact (numbers, testimonials, security) is verified or removed.

---

---

## UI & Visual Slop Deep-Dive (Antislop UI Canonical Reference)

The following diagnostic guide provides the exact **Tell**, **Why**, and **Fix** across all 7 UI/UX disciplines, directly incorporating the field-tested standards from `antislop-ui`:

### 1. Visual & Color Architecture
- **Generic Blue-Purple Gradient**:
  - *Tell*: Blue-to-purple, blue-to-cyan, or purple-to-pink gradients used as the primary hero background, button color, or full-page radial glow.
  - *Why*: The most over-represented color clich\u00e9 in AI training data. Signals "no brand identity" and marks an interface as synthetic at a glance.
  - *Fix*: Pull the color palette strictly from `DESIGN.md` or the product's identity. Gradients are permitted ONLY as a functional hierarchy separator with written rationale (R-01). Exactly ONE accent hue per view.
- **Excessive Glassmorphism**:
  - *Tell*: `backdrop-blur` stacked on navbars, hero cards, sidebars, modals, and badges simultaneously.
  - *Why*: Visual mud. Stacking translucent blurred layers ruins contrast and creates illegible muddy text on mobile GPUs.
  - *Fix*: Enforce the dose cap: maximum 1-2 glass surfaces per page (e.g. sticky header only). Use crisp solid surfaces (`bg-card` / `bg-background`) with 1px borders elsewhere (R-10).
- **Excessive Border Radius (Pill Addiction)**:
  - *Tell*: `rounded-full` or `rounded-3xl` applied to cards, search inputs, modal sheets, and rectangular action buttons.
  - *Why*: Pill-shaped rectangular containers waste corner padding and scream generic template.
  - *Fix*: Follow the structured 3-tier radius scale: **6-8px** for inputs, dropdowns, and buttons (`rounded-md` / `rounded-lg`); **12-16px** for cards and dialogs (`rounded-xl`); reserve `rounded-full` strictly for avatars and compact status chips (R-11).
- **Overly Soft Zero-Gravity Shadows**:
  - *Tell*: `shadow-2xl shadow-indigo-500/40` with 30px+ blur and colored glow, floating in zero gravity.
  - *Why*: Makes cards look detached from physical reality.
  - *Fix*: Replace diffuse colored shadows with a crisp 1px border (`border border-border/80`) paired with subtle directional elevation (`shadow-xs` or `shadow-sm`) (R-12).
- **Sterile Default**:
  - *Tell*: Plain gray text on stark white canvas with zero personality, no typographic contrast, and no intentional focal moment.
  - *Why*: The opposite extreme of slop: when an agent removes gradients, it collapses into boring wireframe defaults.
  - *Fix*: Declare positive **ENERGY**, **RHYTHM**, and **MOTION** dials. Add purposeful contrast, an authentic brand accent, and high typographic contrast.

### 2. Layout, Cadence & Components
- **Monotonous Centered Hero Section (The Hero Cliché)**:
  - *Tell*: Centered title + centered subtitle + 2 generic buttons side-by-side + static centered gray rectangle mockup below. Repeated mechanically across every generated website.
  - *Why*: The ultimate AI slop reflex. It causes instant visual fatigue and feels like a low-effort template.
  - *Fix*: Mandate selecting one of the **7 Dribbble-Grade Hero Archetypes** (Split-Screen 50/50 with 3D perspective tilt & floating live chips, Centered kinetic typography with 40% fold peek, Above-the-fold modular bento, Conversion inversion interactive utility hero, Editorial magazine split, Cinematic spatial 3D canvas, or Command-bar terminal).
- **Monotonous AI Landing Page Template**:
  - *Tell*: Hero -> 3 feature cards -> 3-step "How It Works" -> Bento Grid -> 3-tier Pricing -> FAQ -> 4-Column Footer. Every single time.
  - *Why*: Reflects training data defaults, not the product's real user journey.
  - *Fix*: Structure the page around actual user task flows (C-3). If there are no verified testimonials, omit the testimonials section entirely (R-18).
- **Copy-Paste Feature Cards**:
  - *Tell*: A 3-column row of cards, each containing: icon in rounded square + 1-sentence title + 2-sentence description.
  - *Why*: Visual wallpaper that users scroll right past.
  - *Fix*: Give different features varied visual weights based on importance: hero feature gets an interactive preview or deep screenshot; secondary features get compact list rows or data metrics.
- **Bento Grid Overuse**:
  - *Tell*: Cramming all content into an asymmetrical bento box layout for no functional reason.
  - *Why*: Bento layouts require asymmetric content (e.g., one huge chart, two small stats). Forcing uniform content into mismatched boxes looks ridiculous.
  - *Fix*: Use bento grids ONLY when content naturally possesses diverse spatial requirements.

### 3. Decorative Clichés & Iconography
- **Generic AI Icons**:
  - *Tell*: Sparkles (\u2728), stars, magic wands, robots, lightning bolts, and generic Lucide icon clones on every feature.
  - *Why*: Generic glyphs that communicate zero domain meaning.
  - *Fix*: Use domain-authentic icons directly tied to the action. If no specific icon fits, use no icon at all\u2014clean typography works best.
- **Trailing Button Arrows**:
  - *Tell*: Putting `\u2192` on every single button (`Get Started \u2192`, `Submit \u2192`, `Save \u2192`).
  - *Why*: Visual clutter.
  - *Fix*: Reserve directional arrows strictly for pagination, multi-step wizards, or external links.
- **Eyebrow Pill Badges**:
  - *Tell*: A rounded capsule badge directly above the `<h1>` stating "PRODUCTIVITY REVOLUTION" with a glowing neon dot.
  - *Why*: Pointless AI label shouting categories that the headline already explains.
  - *Fix*: Eliminate redundant eyebrows. Let the hero headline make the claim cleanly (R-30).
- **Decorative Status Dots**:
  - *Tell*: Pulsing green dot (`animate-ping`) next to "System Operational" when there is no real-time telemetry or WebSocket connection.
  - *Why*: Fake status dots violate honesty standards.
  - *Fix*: Only display status dots when backed by live health-check telemetry. Use solid, non-pulsing dots for static indicators.

### 4. App & Dashboard Architecture
- **Default Dashboard Shell**:
  - *Tell*: Left sidebar + top search bar + 4 stat cards with "+12% from last month" + area chart + generic table.
  - *Why*: Chosen before asking what the user actually needs to accomplish on the screen.
  - *Fix*: Design the dashboard around the primary user job-to-be-done. A billing dashboard needs invoice reconciliations; a server monitor needs latency p99 graphs.
- **Charts Without a Question**:
  - *Tell*: Wavy purple area chart with no units, no axis labels, and no business query it answers.
  - *Why*: Decorative filler masquerading as analytics.
  - *Fix*: Every chart must answer a concrete question (e.g., "Hourly API Error Rate (p99)"). Include explicit axes, timestamps, and units.

### 5. Motion & Animation Standards
- **Endless Pulses & Floating Loops**:
  - *Tell*: Cards or badges that pulse, bounce, or float continuously with no user trigger (`animate-pulse`, `animate-bounce`).
  - *Why*: Perpetual motion is visual noise that fatigues the user's eyes.
  - *Fix*: Motion must be triggered by user action (hover, press, scroll into view) and settle promptly (150-250ms). Never loop indefinitely unless showing a temporary loading spinner.
- **Prefe-Reduced-Motion**:
  - *REQUIRED*: Always wrap transitions in `@media (prefers-reduced-motion: reduce)` or use Tailwind `motion-reduce:transition-none`.

### 6. Web Baseline & Production Checklist
- [x] Valid semantic HTML5: `<header>`, `<nav>`, `<main>`, `<footer>`, `<button>` for actions, `<a>` for links.
- [x] Explicit `width` and `height` on all media elements (CLS = 0).
- [x] Hero image loaded with `fetchpriority="high"`, never `loading="lazy"` (LCP < 2.5s).
- [x] Accessible form labels: Every `<input>` has a matching `<label for="...">`.
- [x] Touch targets measure at least 44x44px.

---

## The Liveliness Toolkit: Dials, Levers & Design Read

A filter can remove slop, but it cannot add energy. Removing slop leaves a void, and language models fill that void with their most generic output (the sterile default). Liveliness must be **added** deliberately through positive requirements, not bans.

### Three Dials (Discrete Enforceable 1 to 3 Scale)

Every design must declare three dials explicitly, derived from `DESIGN.md` or the Design Read, and hold them from the first section to the last:

| Dial | 1 (Calm) | 2 (Balanced) | 3 (Bold) | What it answers |
| :--- | :--- | :--- | :--- | :--- |
| **ENERGY** | Linear, GOV.UK (Monochrome, quiet surfaces, restrained single accent, high whitespace) | Stripe, Vercel (Controlled dual-tone, crisp contrast, focused focal moments) | Awwwards, agency portfolio (High-chroma accents, rich tonal depth, dramatic typographic scale) | How hard does this design say hello? |
| **RHYTHM** | Uniform grid, predictable reading flow | Consistent grid with intentional composition breaks | Asymmetric, mixed editorial layouts, syncopated modular grids | How much do sections change from each other? |
| **MOTION** | Hover states only, instant utilitarian transitions (100ms) | Scroll-reveal, tactile press scales (`scale-[0.98]`, 150-250ms) | Parallax, sticky pin choreography, fluid spring physics | How much motion is present, and why? |

*Why 3 levels and not 10? A human reviewer and an AI agent can reliably verify binary checkable conditions: "is this section uniform or varied?" They cannot reliably judge "is this a 6 or a 7?". Three discrete levels make liveliness strictly enforceable.*

### The 5 Visual Levers (Transforming Dials into Decisions)
1. **One Focal Point per Screen**: Exactly one element is clearly the most important on every screen; all other elements defer to it.
2. **Hierarchical Contrast**: Size, weight, and color are differentiated on purpose to guide reading gravity, never randomized.
3. **Whitespace as Structure**: Empty space is used actively to separate and establish section cadence, not left over as accidental voids.
4. **One Deliberate Accent**: Exactly one accent color or gesture used sparingly at key moments. Zero accents is sterile; an accent everywhere is slop.
5. **Identity Motif**: One specific, repeated pattern, gesture, or typographic voice that makes the interface unmistakably belong to the product.

### Design Read Protocol (Mandatory Before Generation)
Before generating any UI component or page layout, declare the one-line Design Read:

> `Reading this as: <page kind> for <audience>, in a <visual language> style, dial <ENERGY/RHYTHM/MOTION>.`

*Example*: `"Reading this as: B2B SaaS analytics dashboard for engineering leads, in a Linear-style high-density language, dial ENERGY 2 / RHYTHM 2 / MOTION 1."*
- **Direction Exists (`DESIGN.md` or user brief)**: Infer the dials from it and proceed.
- **Direction Is Ambiguous**: Ask exactly ONE decisive question with concrete options (e.g., *"Should this feel closer to Linear-clean (Calm) or Stripe-vibrant (Balanced)?"*).
- **Direction Is Absent & Cannot Ask**: Label output as *"draft without direction"* and set the honest default dials: **ENERGY 1 / RHYTHM 1 / MOTION 1** (R-37).

---

### The 6 Proven Design Archetypes (Zero Monotony Standard)

Every interface must anchor itself in one coherent archetype to maintain stylistic unity:

#### 1. Archetype A: High-Precision Developer Tooling (Linear, Raycast, Vercel)
- **Palette**: Deep matte charcoal/zinc (`bg-neutral-950` / `bg-neutral-900`), crisp 1px borders (`border-neutral-800`), high contrast text.
- **Geometry**: Compact 6-8px radii (`rounded-md` / `rounded-lg`), tight padding, monospace metadata chips (`font-mono text-xs`).
- **Tactile Feel**: Keyboard shortcut pills (`<kbd>⌘K</kbd>`), instant hover highlights, subtle active press feedback (`active:scale-[0.99]`).
- **Dials Baseline**: ENERGY 2 | RHYTHM 3 | MOTION 2.

#### 2. Archetype B: Refined SaaS & FinTech (Stripe, Ramp, Mercury)
- **Palette**: Pure white or deep obsidian canvas, single deliberate conversion hue (emerald, indigo, or cobalt), 10% opacity badge fills.
- **Geometry**: 8-12px radii, tabular numerals on all amounts (`tabular-nums`), strict 4px/8px baseline rhythm.
- **Tactile Feel**: Pristine typography contrast (bold geometric display headers with neutral body), authentic ledger models.
- **Dials Baseline**: ENERGY 3 | RHYTHM 3 | MOTION 2.

#### 3. Archetype C: Human Interface & Modern Editorial (Apple HIG, Notion, Arc)
- **Palette**: Warm neutrals (stone, warm zinc, slate), natural breathing room, soft borders.
- **Geometry**: Generous padding, relaxed line-height (`leading-relaxed`), clean SVG iconography with consistent 1.5px/2px stroke weight.
- **Tactile Feel**: Physical tactile button feedback (`active:scale-[0.98] transition-transform duration-75`).
- **Dials Baseline**: ENERGY 3 | RHYTHM 4 | MOTION 3.

#### 4. Archetype D: High-Density Analytics & Operations (Datadog, Cloudflare)
- **Palette**: Neutral dark canvas, high-contrast semantic indicators (green/amber/red), color-blind safe palettes.
- **Geometry**: Ultra-compact padding (`px-3 py-1.5`), split panes, explicit filter toolbars, zero decorative fluff.
- **Tactile Feel**: High-contrast sparklines, multi-level breadcrumbs, tabular data grid alignment.
- **Dials Baseline**: ENERGY 2 | RHYTHM 2 | MOTION 1.

#### 5. Archetype E: Cosmic Evidence & Interactive Utility (NiubiGEO, Perplexity, Cursor)
- **Palette**: Deep Cosmic Obsidian (`#080a0f`), layered dark slate navy panels (`#11141e` & `#181b29`), razor 1px borders (`#272b3c`), dual cyber accents: Electric Lavender (`#b7a0ff` for brand & active actions) + Emerald Jade (`#7ce4b0` for verified evidence & live signals), crisp off-white text (`#f5f4fa`).
- **Geometry**: Layered elevation with 1px hairline borders, `rounded-xl` (12px) container shells, compact status badges.
- **Tactile Feel**: **Conversion Inversion Hero** (functional interactive setup/diagnostic input widget embedded directly on the hero fold `#product-setup`), **Actionable Evidence Bento Grid** (brand visibility signal dot, description accuracy tag cloud, multi-LLM citations [ChatGPT, Claude, Gemini, Perplexity], priority action checklist), arrow hover nudges (`lucide-arrow-right` shifts +4px), radar pulse rings.
- **Anti-Monotony Invariant**: Never render an empty static hero with boilerplate "Sign Up". Provide immediate interactive value on the fold.
- **Dials Baseline**: ENERGY 3 | RHYTHM 3 | MOTION 2.

#### 6. Archetype F: Spacious Collaborative Enterprise (Monday.com, Asana)
- **Palette**: Vibrant Primary Blue (`#0073ea`), clean snow white canvas (`#ffffff`), soft fog card surfaces (`#f9f9f9`/`#f5f6f8`), deep obsidian footer (`#111111`).
- **Geometry**: Expansive 12px-16px card radiuses, generous 80-120px vertical section spacing, Figtree/Inter typography.
- **Tactile Feel**: Tactile color-coded workflow chips, playful progress pills, friendly rounded avatars.
- **Dials Baseline**: ENERGY 3 | RHYTHM 2 | MOTION 2.

---

## Specialized Domain Sub-Disciplines

### Sub-Discipline 1: Code Comments Hygiene
- **Scope Guardrail**: This filter modifies only comments; never touch executable code, identifiers, formatting, or logic.
- **Eliminate AI Comment Slop**:
  - ❌ Decorative box banners (`// =====================`, `/* ----- ROUTES ----- */`).
  - ❌ Restating the obvious (`// Increment count` above `count++`, `// User class` above `class User`).
  - ❌ Workflow step narration (`// Step 1: Validate`, `// Step 2: Query DB`, `// Finally return`).
  - ❌ Empty labels (`// Business logic`, `// Helper function`, `// Important note`).
  - ❌ Vague placeholders (`// TODO: Improve this later`, `// Add more validations`).
  - ❌ Signature echoing in JSDoc/docstrings (`@param price The price`, `@returns The total`).
  - ❌ Decorative emojis in comments (`// ✅ Validated`, `// 🚀 Performance boost`).
  - ❌ End-of-block markers (`} // end if`, `# end function`).
- **Preserve Real Engineering Value**:
  - ✅ Comments explaining **WHY** (domain invariants, security boundaries, race condition workarounds, upstream vendor bug workarounds).
  - ✅ Actionable TODOs with clear scope and context: `// TODO(auth): migrate to session tokens when v2 endpoint ships`.

---

### Sub-Discipline 2: Copywriting & Prose Sanitation
- **Eliminate AI Vocabulary & Hype Bingo**:
  - Replace inflated verbs (*unlock, elevate, empower, delve, showcase, revolutionize*) with concrete human actions (*use, build, see, manage*).
  - Eliminate significance inflation (*"marking a pivotal moment", "ushering in a new era"*).
  - Eliminate unsourced social proof (*"Trusted by thousands of developers"* without named logos).
  - Eliminate weasel attributions (*"Experts say", "Industry observers note"*).
  - Strict ban on em dashes (`—`) in all copy (R-02).
- **Before / After Matrix**:
  - 🔴 *Before*: "Unlock the power of next-generation AI to seamlessly elevate your workflow — revolutionizing team productivity."
  - 🟢 *After*: "Automate ticket triage and sync status updates across your engineering team in real time."

---

### Sub-Discipline 3: Human & Accessibility Engineering
- **WCAG 2.2 AA Contrast Enforcement**:
  - Minimum 4.5:1 for body text; minimum 3:1 for large text (≥18px).
  - Interactive element borders and focus rings must meet minimum 3:1 contrast against adjacent background.
- **Automated Contrast Check**: Run `python scripts/contrast-check.py "#HEX1" "#HEX2"`.
- **Keyboard Navigation & Trap Prevention**:
  - All interactive elements must be accessible via keyboard (`Tab`, `Enter`, `Space`, `Escape`).
  - Never trap focus in dialogs without an `Escape` key handler and clear close button.
  - Interactive elements must declare clear `focus-visible` ring indicators.

---

### Sub-Discipline 4: Mobile & Responsive Layout Ergonomics
- **Continuous Viewport Reflow**: Layouts must look intentional from 320px to 2560px.
- **Fluid Typography**: Use CSS `clamp()` (`clamp(1.5rem, 4vw + 1rem, 3rem)`) instead of static pixel jumps.
- **Touch Target Law**: All interactive elements must measure at least **44x44px** in physical touch area.
- **Dynamic Viewport Height**: Always use `100dvh` (or `min-h-dvh`) instead of `100vh` to prevent mobile address bar overlap.

---

## Mandatory Delivery Gate Protocol

Before completing any task that involves UI, copy, or code generation, you **MUST** provide the following 4-block report:

```markdown
### 🛡️ Sovereign Anti-Slop Delivery Gate Report

#### Block 1: Liveliness Dials & Archetype
- **Design Archetype**: [Archetype A / B / C / D / Custom]
- **Dials Declared**: ENERGY [1-5] | RHYTHM [1-5] | MOTION [1-5]
- **Direction Source**: [`DESIGN.md` / User Brief / Draft without direction (1/1/1)]

#### Block 2: 38-Rule Compliance Verification
- **Hard Gate (Tier 1)**: [PASS / FAIL] (R-02 Em Dash, R-03 Mobile, R-17 Data, R-25 Contrast, R-26 Functional Controls, R-27 States, R-32 Keyboard, R-35 Verification, R-36 Claims, R-38 Honesty, R-39 Semantics, R-40 Web Vitals)
- **Purpose-Gate (Tier 2)**: [PASS / FAIL] (R-01 Gradients, R-04 Icons, R-06 Fonts, R-10 Glass Cap, R-11 Radii, R-13 Glow Cap, R-16 Buzzwords, R-31 Separators)
- **Quality Locks (Tier 3)**: [PASS / FAIL] (C-1 Intentionality, C-2 Completeness, C-3 Content, C-4 Resilience, C-5 Evidence)

#### Block 3: Interactive Element Click-Through Evidence (R-35)
- [Element 1 Name / Target]: [Action observed & state feedback confirmed]
- [Element 2 Name / Target]: [Action observed & validation feedback confirmed]
- [Theme Toggle]: [Both Light and Dark modes rendered with zero console errors]
- [Mobile Viewport Check]: [Reflow confirmed at 375px with zero horizontal scroll]

#### Block 4: Delivery Verdict
- **Verdict**: [PASS / FAIL]
- **Notes / Overrides**: [Any documented human-approved overrides]
```

---

## Automated Tooling & Scripts

The skill includes built-in automated verification tools in `scripts/`:

1. **AST & Pattern Scanner**:
   ```bash
   node "scripts/check-anti-slop.js" --summary
   node "scripts/check-anti-slop.js" --strict
   ```
2. **WCAG Contrast Checker**:
   ```bash
   python "scripts/contrast-check.py" "#FFFFFF" "#0F172A"
   ```

---

### Production Code Blueprints

#### 1. Zero-Dependency Programmatic WCAG 2.2 AA Contrast Verifier (TypeScript)
Never eyeball contrast ratios or hallucinate compliance. Compute unrounded luminance and ratio deterministically:

```typescript
// src/quality/wcag-contrast-verifier.ts
export interface ContrastVerdict {
  foreground: string;
  background: string;
  ratio: number;
  normalText: { threshold: 4.5; pass: boolean };
  largeText: { threshold: 3.0; pass: boolean };
}

function parseHexChannel(hex: string, start: number): number {
  return parseInt(hex.slice(start, start + 2), 16) / 255;
}

function linearizeChannel(val: number): number {
  return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
}

export function computeRelativeLuminance(hexColor: string): number {
  let clean = hexColor.trim().replace(/^#/, '');
  if (clean.length === 3) {
    clean = clean.split('').map((c) => c + c).join('');
  }
  if (!/^[0-9A-Fa-f]{6}$/.test(clean)) {
    throw new Error(`[WCAG] Invalid hex color format: ${hexColor}`);
  }

  const r = linearizeChannel(parseHexChannel(clean, 0));
  const g = linearizeChannel(parseHexChannel(clean, 2));
  const b = linearizeChannel(parseHexChannel(clean, 4));

  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

export function evaluateWcagContrast(foreground: string, background: string): ContrastVerdict {
  const lumA = computeRelativeLuminance(foreground);
  const lumB = computeRelativeLuminance(background);

  const lighter = Math.max(lumA, lumB);
  const darker = Math.min(lumA, lumB);
  const rawRatio = (lighter + 0.05) / (darker + 0.05);

  return {
    foreground,
    background,
    ratio: Math.round(rawRatio * 100) / 100,
    normalText: { threshold: 4.5, pass: rawRatio >= 4.5 },
    largeText: { threshold: 3.0, pass: rawRatio >= 3.0 },
  };
}
```

#### 2. MCP Stdio Tool Adapter for Anti-Slop Contrast Checker (TypeScript)
Expose programmatic contrast auditing to all MCP clients (Claude, Cursor, Codex, Antigravity):

```typescript
// src/mcp/contrast-mcp-tool.ts
import { evaluateWcagContrast, ContrastVerdict } from '../quality/wcag-contrast-verifier';

export interface McpToolResponse {
  content: { type: 'text'; text: string }[];
  isError?: boolean;
}

export function handleMcpCheckContrast(args: { foreground: string; background: string }): McpToolResponse {
  try {
    const verdict = evaluateWcagContrast(args.foreground, args.background);
    const textOutput = [
      `WCAG 2.2 Contrast Ratio: ${verdict.ratio}:1`,
      `Normal Text (<18px, 4.5:1): ${verdict.normalText.pass ? 'PASS' : 'FAIL'}`,
      `Large Text (>=18px bold / 24px, 3.0:1): ${verdict.largeText.pass ? 'PASS' : 'FAIL'}`,
    ].join('\n');

    return {
      content: [{ type: 'text', text: textOutput }],
      isError: !verdict.normalText.pass && !verdict.largeText.pass,
    };
  } catch (err) {
    return {
      content: [{ type: 'text', text: `Contrast check error: ${(err as Error).message}` }],
      isError: true,
    };
  }
}
```

---

### Sub-Discipline 4: Awwwards Anti-Genericness & Real-Build Bug Prevention Rules (R-41 to R-48)
Derived from empirical Awwwards Jury audits (`shoot.mjs` + `audit.mjs`), every production frontend must pass these 8 zero-tolerance craft gates:
- **R-41 (Zero Repeated Copy Across Sections)**: Never repeat a thesis sentence, tagline, or paragraph across two sections on the same page, or reuse the same thumbnail asset twice (`duplicateImages === 0`).
- **R-42 (Accessible Split/Ghost Headings)**: Never place decorative duplicate text (ghost echoes, outline clones, kinetic shadow layers) inside `<h1>–<h3>` tags where screen readers read the heading twice (`" KOBO — KOBO"`). Place decorative clones in a sibling `<span aria-hidden="true">` outside the heading tag.
- **R-43 (Zero Device-Mismatched Copy)**: Never render `"Hover to explore"`, `"Move cursor"`, or `"Click to drag"` statically to touch users. Gate pointer copy behind `@media (hover: hover) and (pointer: fine)` or swap copy dynamically on `pointer: coarse`.
- **R-44 (Ban `colorOnly` Hover on Primary Targets)**: Primary interactive targets (CTAs, nav links, work cards, index rows) must never rely on a bare CSS `color` change on hover (`colorOnly === false`). Use directional fill, letter-roll, underline draw, or cursor preview.
- **R-45 (Ban Portfolio & Editorial AI-Tells)**: Ban the phrases *"where X meets Y"*, *"not just X, but Y"*, *"crafting digital experiences"*, *"at the intersection of"*, *"elevate/empower/unleash/seamless"*, and *"Scroll to explore"*. Ban reflex AI display fonts (*Fraunces*, *Instrument Serif*, *Playfair Display*) unless explicitly requested.
- **R-46 (Zero `glHidden` WebGL Plane Occlusion)**: When syncing DOM `<figure data-gl>` elements to a fixed `#gl` background canvas (`z-index: 0`), enforce `.gl-on [data-gl] { background: none !important }` so an opaque placeholder background never hides the WebGL plane behind it (`glHidden.length === 0`).
- **R-47 (Pre-Paint Motion Gate & Reduced-Motion Safety)**: Gate initial reveal hiding behind `html.js.motion [data-reveal]` added by a synchronous `<head>` script so disabled JS or `prefers-reduced-motion: reduce` never strands text at `opacity: 0` (`reduced.hiddenText === 0`).
- **R-48 (Hard Production Asset & Loader Budgets)**: Total gzipped JS `< 300 KB`, self-hosted `.woff2` fonts `< 300 KB` (max 3 weights), initial page transfer `< 3 MB`, and loader duration capped at `<= 2.6s` (`loaderMs <= 2600`).

---

### Hard Guardrails (Declarative Invariants)
1. **Absolute Zero-Placeholder & Truncation Ban**:
   - Production code MUST NEVER contain placeholder tokens (`// TODO`, `// ...rest of code`, `// implement later`, `<PLACEHOLDER>`). Every generated file and function must be 100% complete and working on the first try.
2. **Deterministic Anti-Slop Audit Verification**:
   - Every file change or generated project MUST pass `node scripts/check-anti-slop.js --strict` with zero errors and zero warnings before the task can be marked complete.
3. **Mandatory 5-State Interactive Contract on Controls**:
   - All interactive components (buttons, links, form inputs) MUST define complete physical feedback across 5 states: default, hover, focus-visible, active (`active:scale-[0.98]`), and disabled. Generic neon glows and unbounded pill buttons (`rounded-full`) on standard inputs are strictly prohibited.
4. **Prohibition of AI Tell Prose & Em Dashes**:
   - Copywriting and UI text MUST NOT use synthetic tell buzzwords ("elevate", "seamlessly empower", "where X meets Y") or em dashes (`—`). Real verified metrics (`tabular-nums`) or honest markers (`[REAL METRIC]`) must replace fabricated social proof.

### Sovereign Execution, Token Efficiency & Invariants
| Dimension | Sovereign Mandate & Deterministic Contract |
| :--- | :--- |
| **Frontier Model Cascade** | High Fast / High (`Grok 4.7 High Fast`, `Claude Sonnet 5.5 High`, `Gemini 4 Pro`) |
| **Availability Fallback** | `Gemini 4 Pro` -> `Gemini 3.8 Flash`; `Claude Opus 5.5` -> `Claude Opus 4.6`; `Grok 4.7` -> `Grok 4.6 High Fast` (Zero unhandled missing-model errors) |
| **KV-Cache & Token Protocol** | Pin static instructions & schemas at prompt prefix (`kv-cache-prefix-optimizer`); pass surgical `CONTEXT_MAP.md` slices (<250 tokens/call) during Swarm Fan-Out |
| **SaaT CLI & MCP Dispatch** | CLI: `vibes skill exec anti-slop <audit\|eval\|verify\|generate\|blueprint>` / MCP: `vibes_skill_dispatch`, `vibes_critic_validate`, `vibes_self_heal`, `vibes_eval_sandbox`, `vibes_verify_invariants` |
| **NFR & Anti-Slop Invariants** | Zero OWASP Top 10 vectors, 0 hardcoded secrets, >= 90% branch coverage on domain logic, 0 Anti-Slop violations; 100% complete zero-placeholder output verified via `node scripts/check-anti-slop.js --strict` |

---


---

<a name="bahasa-indonesia"></a>
## Bahasa Indonesia

### Arahan Eksekutif & Kondisi Pemicu
**Sovereign Anti-Slop Directive** adalah standar tanpa toleransi yang mengatur seluruh tindakan agen AI di dalam ekosistem vibes-plug. AI slop menurunkan kepercayaan developer, menghabiskan token context, menggelembungkan codebase, dan memicu bug di produksi.

Anti-slop adalah **filter, bukan style guide**: filter ini tidak mendikte warna, font, atau layout Anda—arah kreatif tetap sepenuhnya milik Anda. Menghapus slop membersihkan kebiasaan klise AI, sementara **Liveliness Toolkit** memastikan produk akhir memiliki jiwa, karakter, dan ketegasan visual yang hidup, bukan menjadi tampilan yang steril.

**Kondisi Pemicu Universal:**
- **Setiap Pembuatan & Modifikasi Kode**: Setiap fungsi, komponen, atau file yang dibuat atau diubah agen.
- **Pekerjaan UI & Frontend**: Desain antarmuka, tata letak halaman, komponen, kartu, dashboard, dan gaya responsif.
- **Copywriting & Teks**: Judul, CTA, teks produk, dokumentasi, pesan commit, dan ringkasan PR.
- **Komentar Kode**: Komentar penjelasan, anotasi inline, dan docstring.
- **Quality Gates & Audit PR**: Review kode (`coderabbit`), pengujian mandiri (`autonomous-tdd-debugger`), dan hardening pra-rilis (`production-ready-hardener`).

---

### Protokol Dua Mode Operasi (Two Usage Modes)
1. **Mode 1: DURING (Pencegahan Real-Time Saat Bekerja)**:
   - Agen menerapkan 40 aturan secara aktif saat menulis kode, copy, dan UI.
   - Mencegah slop masuk ke codebase sejak awal.
   - Ditutup dengan laporan wajib **Delivery Gate**.
2. **Mode 2: AFTER (Audit & Remediasi Pasca Proyek Selesai)**:
   - Mengaudit proyek yang sudah ada tanpa mengubah file secara prematur.
   - Menghasilkan laporan audit bernomor: `anti-slop/audit-001-YYYY-MM-DD.md`.
   - Setiap temuan diberi nomor urut, pasal pelanggaran (`R-XX`), dan prioritas (Hard Gate = `HIGH`, Purpose-Gate = `MEDIUM`, Quality Lock = `LOW`).
   - Agen **wajib menunggu persetujuan manusia** atas nomor temuan yang ingin diperbaiki sebelum menyentuh kode.

---

### Kerangka 40 Aturan Wajib (3-Tier Rule Framework)

#### Tier 1: Hard Gate (Mutlak, Tanpa Pengecualian)
- **R-02 Copywriting**: Larangan mutlak tanda em dash (`—`) pada teks buatan AI. Gunakan koma, titik, atau titik dua.
- **R-03 Responsivitas Mobile**: Layout mobile wajib dirancang khusus dengan reflow continuous; target sentuh minimal **44x44px**; gunakan `100dvh`; dilarang ada overflow horizontal.
- **R-17 Data & Angka Autentik**: Dilarang mengarang statistik atau angka fiktif (`99.9% uptime`, `10,000 users`). Jika data tidak tersedia, jangan tampilkan angka atau gunakan `[REAL DATA]`.
- **R-18 Testimoni Autentik**: Dilarang membuat avatar AI, nama samaran, atau ulasan fiktif.
- **R-23 Konfirmasi Aset Visual**: Dilarang mengasumsikan logo/avatar final tanpa konfirmasi; gunakan penanda jujur `[LOGO]`.
- **R-24 Integritas Navigasi**: Dilarang menempatkan tautan di navbar menuju halaman/bagian yang tidak ada.
- **R-25 Kontras Warna (WCAG AA)**: Minimal 4.5:1 untuk teks normal; 3:1 untuk teks besar (≥18px). Validasi menggunakan script `contrast-check.py`.
- **R-26 Kelengkapan Elemen Interaktif**: Setiap tombol, link, dan dropdown wajib memiliki perilaku nyata atau dihapus. Dilarang ada tombol mati.
- **R-27 Tiga State UI Wajib**: Setiap tampilan data wajib memiliki state **Empty**, **Loading** (skeleton loader), dan **Error** (dengan tombol coba lagi).
- **R-28 FAQ Spesifik**: FAQ harus menjawab pertanyaan riil domain produk, bukan template klise.
- **R-32 Aksesibilitas Keyboard**: Semua kontrol interaktif harus dapat diakses via keyboard dan memiliki indikator fokus yang kontras (`focus-visible:ring-2`).
- **R-33 Larangan Patching File via Script**: Dilarang menambahkan fitur lewat script eksternal yang melakukan string-replace pada file CSS/TSX.
- **R-34 Seluruh Tema Wajib Berfungsi Penuh**: Jika menyediakan toggle tema, mode Terang dan Gelap wajib 100% berfungsi dan lulus uji kontras.
- **R-35 Verifikasi Sebelum Penyerahan (Click-Through)**: Wajib menjalankan aplikasi dan mencatat bukti click-through setiap elemen interaktif sebelum dinyatakan selesai.
- **R-36 Larangan Klaim Kepatuhan Fiktif**: Dilarang mengarang lencana sertifikasi (SOC 2, ISO 27001) atau klaim akselerasi fiktif.
- **R-37 Arah Desain Wajib**: Wajib bersumber dari `DESIGN.md`. Jika tanpa arah, wajib dideklarasikan sebagai *"Draft without direction"* dengan dial **ENERGY 1 / RHYTHM 1 / MOTION 1**.
- **R-38 Konten Nyata atau Placeholder Jujur**: Seluruh konten harus berupa data nyata atau penanda eksplisit (`[REAL DATA]`).
- **R-39 Semantik Aksesibel & Keterjangkauan Interaksi**: Kursor wajib `cursor: pointer` pada semua elemen interaktif dan `cursor: not-allowed` saat dinonaktifkan; aksi wajib `<button>`, navigasi wajib `<a href>` (larangan mutlak div/span clickable); nama aksesibel (`aria-label`, input `<label>`, `alt` gambar); animasi non-esensial wajib berhenti di bawah `prefers-reduced-motion: reduce`.
- **R-40 Mekanisme Performa & Core Web Vitals**: Atribut `width` dan `height` (atau `aspect-ratio`) wajib ada pada semua `<img>`, `<video>`, dan `<iframe>` untuk mencegah pergeseran tata letak (CLS = 0); gambar hero di atas fold wajib menggunakan `fetchpriority="high"` dan dilarang keras menggunakan `loading="lazy"` (LCP); larangan skrip pihak ketiga pemblokir render di `<head>` (INP); larangan mengarang skor Lighthouse fiktif.

#### Tier 2: Purpose-Gate (Boleh Digunakan Hanya Jika Ada Tujuan Tertulis & Batasan Dosis)
- **R-01 Warna & Gradien**: Gradien biru-ungu/neon dilarang sebagai default; hanya boleh untuk pemisah hierarki dengan alasan tertulis.
- **R-04 Ikon**: Ikon sparkle, bintang, orb, dan robot dilarang sebagai default.
- **R-06 Tipografi**: Font monospace berlebihan dan judul uppercase dengan tracking renggang dilarang tanpa alasan keterbacaan.
- **R-07 Latar Belakang**: Grid titik, garis blueprint, dan grafis kotak-kotak dilarang sebagai shortcut visual.
- **R-08 Ritme Spasi**: Spasi seragam di setiap bagian dilarang; gunakan variasi ritme vertikal.
- **R-09 Variasi Layout**: Layout formulaik klise (Hero -> 3 kartu -> 3 langkah -> Bento grid -> Pricing -> FAQ) dilarang.
- **R-09.1 Larangan Hero Section Monoton**: Dilarang menggunakan pola hero klise (teks tengah + 2 tombol generik + persegi mockup statis). Wajib memilih salah satu dari 7 Arketipe Hero Kaliber Dribbble (Split-screen 50/50 3D perspective tilt & chip melayang, Teks kinetik dengan intipan lipatan 40%, Bento hero modular lipatan pertama, Utilitas interaktif inversi konversi, Editorial majalah asimetris, 3D spasial sinematik, atau Terminal palet perintah).
- **R-10 Batas Glassmorphism**: Efek frosted glass dibatasi **maksimal 1-2 elemen** per halaman. Penerapan resmi yang sangat dianjurkan adalah **Floating Island Glass Capsule Header** dan **Flyout Card Mega Menu** dengan translusensi gelap halus (`bg-neutral-950/80`, `backdrop-blur-xl saturate-180`, border 1px `border-white/10`) guna menggantikan bilah navbar kotak penuh yang pasaran.
- **R-11 Batas Border Radius**: Radius pil (`rounded-full`) dilarang pada tombol persegi panjang standar, field input, atau kartu konten. Gunakan skala 6-8px untuk kontrol dan 12-16px untuk kartu. *Pengecualian Arsitektural*: Bilah navigasi melayang berbentuk kapsul (**Floating Island Navigation Capsule**) adalah pengecualian resmi yang diotorisasi untuk menghadirkan kokpit navigasi modern berkelas tinggi ala Apple/Linear.
- **R-12 Shadow Membumi**: Shadow melayang berwarna neon dilarang; gunakan border 1px solid dan elevasi halus.
- **R-13 Batas Glow**: Efek pendaran neon dibatasi maksimal 1-2 elemen fokus.
- **R-14 Animasi Berbobot**: Animasi berulang tanpa henti (kartu melayang) dilarang; animasi transisi wajib cepat (150-250ms).
- **R-15 CTA Berorientasi Aksi**: Ganti CTA generik (*Get Started*, *Learn More*) dengan instruksi spesifik (*Buat akun gratis*, *Baca dokumentasi API*).
- **R-16 Eliminasi Buzzword**: Hapus kata-kata klise AI (*unlock, elevate, seamless, revolutionize, game-changer*).
- **R-19 Visual Kontekstual & Anatomi Mesin Fisik**: Ilustrasi 3D blob generik dan "slop flowchart AI" (balok mengambang abstrak dengan panah putus-putus acak) dilarang keras saat menjelaskan arsitektur sistem, algoritma, atau protokol. Wajib terapkan **Standar Anatomi Isometrik Fisik** (*"The Object is the Explanation"*): visualisasikan logika teknis sebagai instrumen mesin mekanis yang nyata dan presisi (rig uji, dial gauge, gantry plotter, kunci pin-tumbler) dengan shading empat nada (*four-tone*), daftar 40+ komponen terstruktur, dan pembacaan numerik (*readout*) langsung.
- **R-20 Dekorasi Fungsional**: Garis strip vertikal di tepi kartu dan panah dekoratif (`→`) dilarang jika tanpa fungsi.
- **R-21 Demo Produk Nyata**: Menjual alat tanpa memperlihatkan interface nyata dilarang.
- **R-22 Alasan Mode Gelap**: Mode gelap harus didasarkan pada karakter brand, bukan sekadar latah default.
- **R-29 Lencana Kapsul**: Lencana pil "AI Powered" dengan dot berkedip dilarang kecuali mewakili status runtime asli.
- **R-30 Eyebrow Badge Redundan**: Lencana kecil di atas H1 yang mengulang kata-kata judul dilarang.
- **R-31 Larangan Separator Banner Kode**: Garis pembatas dekoratif (`// =====================`) pada komentar kode dilarang.

#### Tier 3: Quality Locks & Craftsmanship (C-1 sampai C-5)
- **C-1 Intentionality**: Setiap keputusan desain dan kode memiliki alasan yang dapat dipertanggungjawabkan.
- **C-2 Kelengkapan Fungsional**: Setiap kontrol berfungsi utuh tanpa stub setengah jadi.
- **C-3 Komposisi Berbasis Konten**: Setiap seksi ada karena dibutuhkan produk, bukan sekadar pengisi template.
- **C-4 Ketahanan Sistem**: UI bertahan pada seluruh 3 state (empty, loading, error), semua tema, dan navigasi keyboard.
- **C-5 Bukti Di Atas Klaim**: Fakta yang disajikan terverifikasi secara nyata.

---

### Liveliness Toolkit: 3 Dial, 5 Tuas Visual & Protokol Design Read

Filter anti-slop bertugas membuang kebiasaan buruk AI, namun membuang slop saja akan meninggalkan kekosongan (*void*) yang biasanya diisi model AI dengan tampilan generik yang steril dan membosankan. Karakter visual wajib **ditambahkan secara sengaja**:

#### 3 Dial Karakter (Skala Diskrit 1 sampai 3):
1. **ENERGY (1-3)**:
   - Skala 1 (Tenang): Linear, GOV.UK (Monokromatik, permukaan tenang, aksen tunggal hemat, banyak whitespace).
   - Skala 2 (Seimbang): Stripe, Vercel (Kontras tajam, dual-tone terkontrol, titik fokus terarah).
   - Skala 3 (Berani): Awwwards, portofolio kreatif (Aksen saturasi tinggi, tipografi dramatis).
2. **RHYTHM (1-3)**:
   - Skala 1 (Seragam): Grid linear kaku dan ritme membaca yang terprediksi.
   - Skala 2 (Konsisten Berbobot): Grid konsisten dengan variasi seksi yang memiliki tujuan.
   - Skala 3 (Asimetris): Tata letak editorial dinamis, kartu modular bergantian.
3. **MOTION (1-3)**:
   - Skala 1 (Utilitarian): Efek hover instan (100ms) tanpa animasi berlebihan.
   - Skala 2 (Halus Taktil): Scroll-reveal, transisi tactile press (`scale-[0.98]`, 150-250ms).
   - Skala 3 (Koreografi): Koreografi sticky pin, parallax bermakna, fisika pegas fluida.

*Mengapa 3 skala dan bukan 10? Peninjau manusia dan agen AI dapat memverifikasi kondisi biner: "apakah bagian ini seragam atau bervariasi?" Skala diskrit 1-3 membuat kepatuhan dapat ditegakkan secara absolut tanpa perdebatan subjektif.*

#### 5 Tuas Visual (Visual Levers):
1. **Satu Titik Fokus per Layar**: Tepat satu elemen paling penting di setiap layar; elemen lain mengalah.
2. **Kontras Hirarkis**: Ukuran, bobot, dan warna dibedakan secara sengaja untuk memandu mata pengguna.
3. **Whitespace Struktural**: Ruang kosong digunakan aktif untuk pemisah dan ritme, bukan sisa layout.
4. **Satu Aksen Terukur**: Tepat satu warna aksen pada momen kunci. Tanpa aksen = steril; aksen di mana-mana = slop.
5. **Motif Identitas**: Satu pola berulang, gestur, atau tipografi spesifik yang membuat desain autentik milik produk.

#### Protokol Deklarasi Design Read:
Sebelum menghasilkan kode UI atau layout, deklarasikan satu baris:
> `Reading this as: <jenis halaman> untuk <audiens>, dalam gaya <bahasa visual>, dial <ENERGY/RHYTHM/MOTION>.`

#### 6 Arsitektur Desain Teruji (Standar Nol Monotoni):
1. **Archetype A: High-Precision Developer Tooling** (Linear, Raycast, Vercel)
   - Permukaan matte gelap (`bg-neutral-950`), border 1px solid, tombol shortcut keyboard (`<kbd>⌘K</kbd>`), font mono untuk metadata, padding ringkas.
2. **Archetype B: Refined SaaS & FinTech** (Stripe, Ramp, Mercury)
   - Latar belakang bersih, kontras display header tegas, angka tabular (`tabular-nums`), ritme spasi 4px/8px, data transaksi otentik.
3. **Archetype C: Human Interface & Modern Editorial** (Apple HIG, Notion, Arc)
   - Nuansa hangat netral (stone/slate), padding lega, feedback sentuhan fisik (`active:scale-[0.98]`), ikonografi SVG konsisten.
4. **Archetype D: High-Density Analytics & Operations** (Datadog, Cloudflare)
   - Kepadatan informasi tinggi, breadcrumbs bertingkat, sparklines kontras tinggi, palet aman untuk buta warna, nol dekorasi sia-sia.

---

### Protokol Wajib Delivery Gate

Sebelum menyelesaikan tugas coding atau UI, Anda **WAJIB** menyertakan 4 blok laporan ini:
1. **Konfirmasi Dial & Archetype**: Nama archetype dan nilai dial (ENERGY/RHYTHM/MOTION).
2. **Checklist Kepatuhan 48 Aturan (R-01 s/d R-48)**: Evaluasi PASS/FAIL pada Hard Gate, Purpose-Gate, Quality Locks, dan Aturan Anti-Generik Awwwards (R-41: nol duplikasi kalimat/gambar antarseksi; R-42: teks dekoratif di luar `<h1-h3>` dengan `aria-hidden="true"`; R-43: salinan teks sesuai perangkat sentuh/kursor; R-44: larangan hover `colorOnly` pada elemen utama; R-45: larangan frasa & font klise AI; R-46: bebas `glHidden` pada kanvas WebGL; R-47: keamanan `prefers-reduced-motion`; R-48: anggaran JS `< 300KB`, font `.woff2 < 300KB`, loader `<= 2.6s`).
3. **Bukti Click-Through Elemen Interaktif (R-35)**: Daftar elemen yang telah dicoba langsung beserta perilakunya.
4. **Keputusan Akhir (Verdict)**: PASS atau FAIL.

---

## Orchestration & Integration

This skill serves as the foundational quality, craftsmanship, and anti-slop gate across the entire vibes-plug swarm architecture. It actively connects to and hardens:

| Skill | Relationship & Integration Flow |
| :--- | :--- |
| `modern-web-guidance` | Queries and enforces modern web platform best practices before generating UI code. |
| `senior-frontend` | Sanitizes React 19 / Next.js 15 components from generic AI templates and unhandled states. |
| `tailwind-expert` | Enforces CSS-first styling, eliminates excessive pill buttons, and prevents stacked neon glows. |
| `design-system-architect` | Validates 5-state interactive contracts, accessible tokens, and solid borders. |
| `modern-css-native-expert` | Enforces native CSS anchor positioning and top-layer `@starting-style` transitions. |
| `ui-ux-pro-max` | Audits visual hierarchy, 60-30-10 color balance, and F/Z reading patterns. |
| `visual-ui-auditor` | Evaluates rendered screenshots and AST against the 20-point visual quality rubric. |
| `autonomous-tdd-debugger` | Enforces 100% complete implementations on the first try without test skips or fake mocks. |
| `production-ready-hardener` | Acts as the final delivery quality gate before any release or production deployment. |
| `zero-tech-debt-auditor` | Scans and eradicates syntax narration comments, dead code, and speculative abstractions. |
| `coderabbit` | Powers the autonomous PR review and code inspection engine. |

### Matriks Eksekusi Berdaulat, Efisiensi Token & Invarian
| Dimensi | Mandat Berdaulat & Kontrak Deterministik |
| :--- | :--- |
| **Kaskade Model Frontier** | High Fast / High (`Grok 4.7 High Fast`, `Claude Sonnet 5.5 High`, `Gemini 4 Pro`) |
| **Invarian Fallback Ketersediaan** | `Gemini 4 Pro` -> `Gemini 3.8 Flash`; `Claude Opus 5.5` -> `Claude Opus 4.6`; `Grok 4.7` -> `Grok 4.6 High Fast` (Bebas gagal saat model belum tersedia/kuota penuh) |
| **Protokol Hemat Token & KV-Cache** | Kunci instruksi & skema statis di prefix awal (`kv-cache-prefix-optimizer`); kirim potongan `CONTEXT_MAP.md` (<250 token/panggilan) saat Fan-Out |
| **Eksekusi SaaT CLI & MCP** | CLI: `vibes skill exec anti-slop <audit\|eval\|verify\|generate\|blueprint>` / MCP: `vibes_skill_dispatch`, `vibes_critic_validate`, `vibes_self_heal`, `vibes_eval_sandbox`, `vibes_verify_invariants` |
| **Invarian NFR & Anti-Slop** | Nol celah OWASP Top 10, 0 kredensial hardcoded, cakupan pengujian >= 90% pada logika domain, 0 pelanggaran Anti-Slop; kode 100% tuntas tanpa placeholder diverifikasi melalui `node scripts/check-anti-slop.js --strict` |