visual-ui-auditor

Visual UI Auditor & Vision Quality Gate (Anti-Slop Pillar 7)

English | Bahasa Indonesia

---

English

Description

Production guide for automated visual quality auditing using multimodal vision frontier models (Gemini 4 Pro/Flash Vision, Claude 3.7/5.1 Sonnet Vision, GPT-5 Vision). Standard text-based AST linters cannot evaluate spatial breathing room, perceived elevation, optical alignment, or contrast degradation under dynamic lighting. This skill combines automated regex/AST scanners with multimodal vision evaluation to audit UI code and rendered screenshots against the strict Anti-Slop Pillar 7 visual standard: 1px crisp borders, structured 3-tier radius scales, tabular numerals, eradication of generic neon radial glow orbs, and mandatory 5-state interactive contracts.

Trigger Conditions

• Reviewing UI components, web pages, or application screenshots prior to release (Phase 5/6).
• Converting Figma designs or mockup screenshots into code (screenshot-to-code-expert).
• Auditing codebases for AI slop visual clichés (e.g., bg-gradient-to-r from-blue-500 to-purple-600 or rounded-full on standard rectangular buttons).
• Enforcing WCAG 2.2 Level AA accessibility color contrast and keyboard focus indicators.

The 20-Point Visual Quality Rubric

SCREENSHOT OR UI CODE
          │
          ▼
┌───────────────────────────────┐
│ 1. STATIC AST / REGEX SCAN    │  Bans `rounded-full` on buttons, generic blue-purple gradients
└──────────────┬────────────────┘
               │
               ▼
┌───────────────────────────────┐
│ 2. MULTIMODAL VISION SAMPLING │  Evaluates optical balance, elevation, visual hierarchy
└──────────────┬────────────────┘
               │
               ▼
┌───────────────────────────────┐
│ 3. STRUCTURED SCORECARD       │  Score (0-100), Verdict, Pixel-Level Fixes
└───────────────────────────────┘

The 6 Core Visual Laws (Pillar 7)

1. Rejection of Pill-Button Addiction: Standard rectangular action buttons must use structured radius (rounded-md 6px or rounded-lg 8px). rounded-full is strictly prohibited on non-circular/non-badge elements.
2. 1px Crisp Borders: Elevated surfaces (dialogs, cards, dropdowns) must use crisp 1px borders (border border-slate-200 dark:border-slate-800 or rgba(255,255,255,0.08)) to ground geometry rather than heavy floating drop-shadows.
3. Anti-Generic Gradients: Generic AI blue-to-purple gradients (from-blue-500 to-purple-600) and blurred neon radial backdrops are banned in favor of curated brand palettes.
4. Tabular Numerals (tabular-nums): Monetary sums and data table counts must specify font tabular figures to prevent horizontal character shifting during live updates.
5. 5-State Interactive Affordance: Buttons and controls must provide clear visual states for default, hover, focus-visible, active (pressed), and disabled.
6. Anti-Decorative Emojis: Prohibits rocket (🚀), sparkles (✨), and fire (🔥) clutter in enterprise titles and badges.