sloppi

name	sloppi
description	Design intelligence skill for coding agents to prevent generic, repetitive AI frontend defaults through disciplined research, reasoning, content architecture, visual synthesis, DESIGN.md contracts, implementation, visual QA, anti-slop audit, and iterative refinement.

Sloppi: Design Intelligence for Coding Agents

Sloppi prevents coding agents from producing generic, repetitive, low-intent frontend interfaces by providing an end-to-end system for design research, content architecture, visual synthesis, DESIGN.md contracts, frontend implementation, visual QA, anti-slop auditing, and closed-loop refinement.

---

1. When to Activate Sloppi

Activate Sloppi whenever you are:

• Creating a new frontend, landing page, dashboard, or web application.
• Redesigning or improving an existing user interface.
• Implementing a frontend based on user screenshots, Figma designs, or URLs.
• Resolving visual bugs, broken mobile layouts, or accessibility flaws.
• Responding to user requests containing aesthetic descriptors ("modern", "premium", "clean", "minimal", "impressive", "sleek"), translating vague requests into rigorous design reasoning.

---

2. Core Operational Doctrine

1. Anti-Default, Not Anti-Style: Sloppi has no default visual aesthetic. It produces stark terminal CLIs for dev tools, rich editorial serif for luxury, and dense tabular matrices for finance.
2. Never Override Explicit User Direction: If the user explicitly asks for cards, gradients, or glassmorphism, implement them with structural excellence rather than rejecting them.
3. Preserve User References: When the user supplies a reference image, URL, or mockup, extract its transferable principles rather than substituting generic preferences.
4. Rendered Output Outranks Mental Assumptions: A design is unproven until inspected in the browser. Never assume code compilation equals design success.
5. Zero Fabricated Evidence: Never claim to have inspected a screenshot if no rendering occurred. Distinguish Observed, Inferred, Assumed, and Unavailable.

---

3. The 14-Stage Closed-Loop Lifecycle

Understand ──► Research ──► Synthesize ──► Content Architecture ──► Design System ──► DESIGN.md ──► Inspect Project ──► Implement ──► Render ──► Visual Audit ──► Anti-Slop Audit ──► Critique & Prioritize ──► Targeted Refinement ──► Regression Check ──► Accept / Re-Enter

---

4. Task Complexity & Fast-Path Routing

Consult routing.md to calibrate workflow depth to task scope:

• MICRO TASK (1-line CSS/token fix) $\longrightarrow$ Direct edit + verify focus ring & contrast.
• SMALL TASK (Button primitive, navbar tweak) $\longrightarrow$ Follow workflows/component.md.
• MEDIUM TASK (Hero redesign, new section) $\longrightarrow$ Follow workflows/visual-fix.md.
• LARGE TASK (Full landing page / app) $\longrightarrow$ Follow workflows/new-project.md or workflows/redesign.md.

---

5. Master Resource Directory

Load only the specific module files required for your active task:

Foundations & Principles

• principles.md — 15 core design principles.
• doctrine/anti-slop.md — Contextual evaluation & failure catalog.
• doctrine/design-reasoning.md — 6-stage cognitive framework.

Research & Synthesis

• research/protocol.md — High-intent research questions & stopping criteria.
• references/source-registry.md — Map of 15 specialized reference channels (Supahero, Navbar, Minimal, etc.).
• research/reference-analysis.md — Transferable principles extraction.
• research/synthesis.md — Design Thesis formulation.

Content & Composition

• content/methodology.md — 7 pre-content inquiries & density modes.
• content/product-messaging.md — Falsifiable claims & mechanism language.
• content/page-architecture.md — 10 Hero models & 8 feature layouts.
• content/cta.md — Outcome-explicit action copywriting.

Design System & Contracts

• design-system/methodology.md — 9 pre-token inquiries.
• design-system/typography.md — Modular scales, leading inversion & 65ch measure.
• design-system/color.md — Semantic color roles & WCAG contrast.
• design-system/layout.md — Container archetypes & section cadence.
• templates/DESIGN.template.md — Canonical 25-section persistent contract.

Implementation Protocol

• implementation/protocol.md — Incremental 7-pass build strategy & Polish Trap protocol.
• implementation/project-inspection.md — 16-point codebase inspection matrix.
• implementation/token-implementation.md — 3-tier CSS Custom Properties template.
• implementation/responsive-implementation.md — Mobile touch ergonomics ($\ge 44\text{px}$) & clamp formulas.
• implementation/interaction-implementation.md — 12 states & 2px focus rings.
• implementation/asset-strategy.md — Intentional asset absence & single icon family.
• implementation/dependency-policy.md — 6 evaluation gates & package bloat ban.

Visual QA & Anti-Slop Audit

• audit/visual-audit.md — 4-tier Viewport Matrix (Mobile, Tablet, Desktop, Wide).
• audit/anti-slop-audit.md — 26 AI Default Review Signals & Strip the Effects test.
• audit/hierarchy-audit.md — Focal point & Equal Loudness checks.
• audit/severity.md — 4-tier severity model (Blocker, High, Medium, Low).
• audit/audit-output.md — Category dashboard & 9-field finding schema.

Critique, Refinement & Stopping Rules

• refinement/critique.md — 5-layer root-cause diagnostic pipeline.
• refinement/prioritization.md — Impact $\times$ Cost matrix.
• refinement/iteration.md — "One Iteration = One Objective" rule.
• refinement/change-strategy.md — Minimal intervention principle.
• refinement/regression.md — 7-point regression checklist.
• refinement/stopping-rules.md — 7 objective stopping criteria & diminishing returns.
• refinement/human-review.md — Strategic review boundaries & request precision.

Workflows & Checklists

• checklists/pre-design.md — Validation before drafting design system.
• checklists/pre-implementation.md — Verification before writing code.
• checklists/pre-render.md — Code integrity gate before rendering.
• checklists/pre-ship.md — Final quality gate before ship.
• failure-recovery.md — Graceful degradation & honesty rules.
• artifacts.md — Artifact persistence & anti-pollution rules.