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