anti-slop · diff
git:20261025.ea2b348 to git:20261025.d67ede7
81 added, 62 removed. Audit A to A.
---
name: anti-slop
description: Anti-AI-slop and clean craftsmanship skill. Eliminates decorative badges, fake mock databases, neon gradients, obvious comments, and marketing fluff.
---
# Anti-AI-Slop & Clean Craftsmanship (`/anti-slop`)
> **Philosophy**: *Zero fluff. Zero decorative badges. Zero toy mock arrays. Zero neon purple gradients. Zero conversational sycophancy. Deliver real, human-grade, high-density software.*
- This skill purges synthetic AI tropes and enforces professional engineering rigor across architecture, implementation, user interfaces, documentation, and agent pairing.
+ This skill purges synthetic AI tropes and enforces professional engineering rigor across architecture, implementation, user interfaces, documentation, brand identity, and agent pairing.
---
- ## 1. The Anti-Slop Prohibitions
+ ## 1. Quick Navigation & Specialized References
+ | Resource Type | Document | Description |
+ | :--- | :--- | :--- |
+ | **Reference** | [references/ui-slop-taxonomy.md](references/ui-slop-taxonomy.md) | Detailed breakdown of the 10 UI AI slop patterns and production remediations. |
+ | **Reference** | [references/app-logo-and-icon-craftsmanship.md](references/app-logo-and-icon-craftsmanship.md) | The 4 Logo Stress Tests, modular grids, Apple continuous squircles, optical centering. |
+ | **Reference** | [references/color-theory-and-palette-architecture.md](references/color-theory-and-palette-architecture.md) | 60-30-10 spatial rule, OKLCH perceptual lightness, temperature undertones, WCAG 2.2. |
+ | **Reference** | [references/typography-and-font-pairing.md](references/typography-and-font-pairing.md) | Editorial serif + neo-grotesque pairing, dynamic optical tracking, tabular numbers. |
+ | **Reference** | [references/animation-and-motion-design.md](references/animation-and-motion-design.md) | Apple mass-spring-damper physics, GPU-only composite rule, staggered list choreography. |
+ | **Template** | [templates/CraftedAppLogo.svg](templates/CraftedAppLogo.svg) | Production-grade mathematical vector SVG logo mark passing all 4 stress tests. |
+ | **Template** | [templates/CraftedAppLogo.tsx](templates/CraftedAppLogo.tsx) | React vector logo component with material and monochrome silhouette variants. |
+ | **Template** | [../ui/templates/TactileSpringButton.tsx](../ui/templates/TactileSpringButton.tsx) | Production tactile button implementing Apple spring physics and 44x44px touch targets. |
+ | **Utility** | [scripts/sanitize_ai_slop.py](scripts/sanitize_ai_slop.py) | Standalone CLI auditor checking codebases for badges, mocks, glows, and AI tropes. |
+
+ ---
+
+ ## 2. The Core Anti-Slop Prohibitions
+
```mermaid
- flowchart LR
- A["Incoming AI Output"] --> B{"Contains Slop?"}
+ flowchart TD
+ A["Raw AI Output"] --> B{"Contains Slop?"}
B -- "Badges & Shields" --> C["Strip Markdown Badges"]
B -- "In-Memory Mock Arrays" --> D["Implement Real DB / Schema"]
B -- "Trivial Comments" --> E["Purge Self-Evident Notes"]
- B -- "Neon Purple / Glows" --> F["Replace with High-Contrast Neutrals"]
- B -- "Raw Emojis in Controls" --> G["Replace with Semantic Lucide SVGs"]
- B -- "Fluffy Greetings" --> H["Direct Technical Communication"]
- C & D & E & F & G & H --> I["Clean Human-Grade Codebase"]
+ B -- "Purple Hero Gradients" --> F["Replace with High-Contrast Neutrals"]
+ B -- "Cardocalypse (3-Card Soup)" --> G["Design Domain-Specific Functional Layout"]
+ B -- "Raw Emojis in Controls" --> H["Replace with Semantic Lucide SVGs"]
+ B -- "Floaty 3s Animations" --> I["Apply Apple Spring Physics (180ms)"]
+ B -- "Fluffy Greetings" --> J["Direct Technical Communication"]
+ C & D & E & F & G & H & I & J --> K["Clean Human-Grade Codebase"]
```
| Slop Category | Prohibited Pattern | Mandatory Engineering Standard |
| :--- | :--- | :--- |
| **Decorative Badges** | `shields.io`, build/version badges, decorative tags. | Clean semantic headers; metadata belongs in manifests (`package.json`, `Cargo.toml`). |
| **Fake Mock Arrays** | `const mockUsers = [...]` acting as permanent state. | Real persistence: SQLite, PostgreSQL, Cloud SQL, or structured file stores. |
| **Comment Slop** | Obvious restatements: `// set loading to true`, `# increment counter`. | Intent-only comments: explain *why* non-obvious architecture was chosen. |
- | **Neon Vibe Tropes** | Purple/indigo gradients (`from-purple-600 to-indigo-600`), neon glow rings. | Disciplined neutrals (`zinc`, `slate`), subtle 1px borders, high contrast. |
- | **Card Soup** | 3-column generic SaaS cards nested within cards. | Bespoke functional layouts tailored to the domain's data hierarchy. |
+ | **Purple Hero Gradients** | `#6366f1` to `#ec4899` linear gradients across headers. | Calibrated neutral surfaces (`zinc-950`) with 1px specular highlights. |
+ | **Cardocalypse** | 3-column generic SaaS cards nested within cards. | Bespoke functional layouts tailored to the domain's data hierarchy. |
| **Raw Emoji Controls** | 🚀, ✨, 🔥 in buttons, navigation, and headers. | Semantic SVG icons (Lucide Icons) with `aria-hidden="true"`. |
+ | **AI Logo Blobs** | Swirling gradient ribbons, floating cubes, messy vectors. | Monochromatic silhouette first; modular grid; passes the 16px Favicon test. |
+ | **Unconfigured Inter** | Default Inter with 0 letter-spacing on 48px headings. | Dynamic optical tracking (`-0.035em` on display, `+0.06em` on captions), `tnum`. |
+ | **Floaty Motion** | 3-second linear fades, CPU-killing particle meshes. | Snappy Apple springs (160ms–220ms), GPU composite properties (`transform`, `opacity`). |
| **Conversational Sycophancy** | "Sure! I'd be happy to help with that!", "Great choice!". | Omit conversational padding; provide dense, targeted engineering answers. |
- | **Marketing Copy** | "Revolutionary AI-powered next-generation paradigm". | Direct, factual, token-efficient technical communication. |
---
- ## 2. Dynamic Sanitization Workflow
+ ## 3. App Logo & Icon Craftsmanship Standards
- When authoring or reviewing code, execute the sanitization pass:
+ Every logo or application icon must pass the **4 Mandatory Logo Stress Tests**:
- ### Rule 1: Zero Restatement Comments
- Comments must explain **why**, never **what**. If code requires a comment to explain what it is doing, refactor variable or function names.
+ ```mermaid
+ flowchart LR
+ A["Logo Design"] --> B{"1. Silhouette Test"}
+ B -- Pass --> C{"2. 16px Favicon Test"}
+ C -- Pass --> D{"3. 5s Memory Sketch"}
+ D -- Pass --> E{"4. Clean Vector Geometry"}
+ E -- Pass --> F["Certified Production Mark"]
+ ```
- ```typescript
- // ❌ AI SLOP: Self-evident restatements
- // Check if user is authenticated
- if (!session.user) {
- // Redirect to login page
- router.push("/login");
- // Return early
- return null;
- }
+ 1. **The Silhouette Test**: The logo must be instantly recognizable in **100% solid black on white** and **100% solid white on black**. If it relies on gradients or drop-shadows to define its shape, reject it immediately.
+ 2. **The 16px Favicon Test**: When scaled down to $16 \times 16\text{ px}$, strokes must not blur together into visual noise. Minimum stroke weight: $1.5\text{ px}$ at $16\text{ px}$ scale.
+ 3. **The 5-Second Memory Sketch Test**: A user must be able to accurately sketch the silhouette from memory after 5 seconds of viewing.
+ 4. **The Vector Cleanliness Check**: Hand-crafted SVG paths with clean mathematical nodes ($< 30$ control points), zero overlapping bezier mess.
- // ✅ CLEAN PRODUCTION: Self-documenting code
- if (!session.user) {
- router.push("/login");
- return null;
- }
+ ---
+
+ ## 4. Color Theory & The 60-30-10 Architecture
+
+ ```mermaid
+ pie title The 60-30-10 Spatial Balance
+ "60% Dominant Canvas (Neutral Zinc/Slate)" : 60
+ "30% Structural Hierarchy (Cards, Borders, Typography)" : 30
+ "10% Intentional Accent (Action CTAs, Active States)" : 10
```
- ### Rule 2: Anti-Mock / Real Persistence Mandate
- Never generate arrays of fake objects when creating API endpoints or data services. Use SQLite with `better-sqlite3`, PostgreSQL with `pg`, or local structured storage with Zod schema validation:
+ - **60% Dominant Canvas**: Temperature-calibrated dark neutral (`zinc-950` `#09090b` or `slate-950`). Never pure `#000000` without temperature.
+ - **30% Structural Hierarchy**: Architectural containers, cards, borders (`zinc-800`), secondary text (`zinc-400`).
+ - **10% Intentional Accent**: High-contrast focal points (`sky-500`, `emerald-500`).
+ - **Contrast Guardrail**: Ensure all text satisfies WCAG 2.2 AA ($4.5:1$ for body, $3:1$ for headers).
- ```typescript
- // ❌ AI SLOP: In-memory toy array pretending to be a database
- const USERS = [
- { id: "1", name: "Alice", role: "admin" },
- { id: "2", name: "Bob", role: "user" },
- ];
+ ---
- export async function GET() {
- return Response.json(USERS);
- }
+ ## 5. Typography Hierarchy & Optical Tracking
- // ✅ CLEAN PRODUCTION: Parameterized SQL against real storage
- import Database from "better-sqlite3";
- import { z } from "zod";
+ Dynamic letter-spacing is mandatory across font sizes:
+ - **Display Headings ($48\text{ px}+$):** Tight negative tracking (`letter-spacing: -0.035em`).
+ - **Section Titles ($20\text{--}32\text{ px}$):** Moderate negative tracking (`letter-spacing: -0.015em`).
+ - **Body Copy ($14\text{--}16\text{ px}$):** Neutral tracking (`letter-spacing: -0.005em`).
+ - **Captions & Eyebrows ($10\text{--}12\text{ px}$):** Wide positive tracking (`letter-spacing: +0.06em; text-transform: uppercase`).
+ - **Tabular Data:** Always enable `font-feature-settings: "tnum" 1, "zero" 1;` on numbers.
- const db = new Database("app.db");
- db.pragma("journal_mode = WAL");
+ ---
- const UserSchema = z.object({
- id: z.string().uuid(),
- name: z.string().min(1),
- role: z.enum(["admin", "user"]),
- });
+ ## 6. Tactile Motion & Apple Spring Physics
- export async function GET() {
- const rows = db.prepare("SELECT id, name, role FROM users WHERE active = 1").all();
- return Response.json(UserSchema.array().parse(rows));
- }
- ```
+ Reject mechanical linear CSS transitions. Use Apple mass-spring-damper physics:
+ - **Button Press**: scale down to `0.97`, duration `160ms`, spring timing `cubic-bezier(0.175, 0.885, 0.32, 1.275)`.
+ - **Panel Entrances**: duration `280ms`, timing `cubic-bezier(0.16, 1, 0.3, 1)`.
+ - **GPU Composite Rule**: Strictly animate `transform` and `opacity`. Never animate `width`, `height`, `top`, or `left`.
+ - **Accessibility**: Always respect `@media (prefers-reduced-motion: reduce)`.
- ### Rule 3: High-Density Pairing Communication
- When communicating with the user or other agents:
- 1. Never open with pleasantries or flattery ("Certainly! I can definitely do that for you!").
- 2. State the exact action taken, diff, and verification status.
- 3. Structure complex information using markdown tables or code fences.
+ ---
+ ## 7. Anti-Mock / Real Persistence Mandate
+
+ Never generate arrays of fake objects when creating API endpoints or data services. Use SQLite with `better-sqlite3`, PostgreSQL with `pg`, or local structured storage with Zod schema validation.
+
---
- ## 3. Sanitizer CLI Execution
+ ## 8. Sanitizer CLI Execution
Audit any directory using the standalone anti-slop validator:
```bash
python3 skills/anti-slop/scripts/sanitize_ai_slop.py --path .
```
- This CLI verifies:
+ This CLI audits:
- Presence of shields.io badges in documentation.
- Trivial restatement comments in source files.
- Hardcoded mock data arrays pretending to be state.
- Neon gradient utility classes and raw emoji buttons.
+ - Excessive fuzzy glow drop-shadows and unconfigured typography.