← ClaudeAtlas

ui-verifierlisted

Complete 5-Pillar UI & Frontend Quality Verification Engine (WCAG AA Accessibility, Responsive Breakpoints, Anti-Slop Visual Architecture, Sub-Pixel rAF Motion Performance, and Semantic RTL/BiDi Resilience).
omid-io/vibe-ui-skills · ★ 0 · Web & Frontend · score 73
Install: claude install-skill omid-io/vibe-ui-skills
# 🔍 UI-Verifier: 5-Pillar Frontend Quality & Verification Engine ## 🎯 Purpose The `ui-verifier` skill provides automated, rigorous quality gates for generated interfaces. It acts as an autonomous design auditor, ensuring that code synthesized by `mr-ui-designer` (utilizing `visual-chemistry-engine` and `ui-kit`) meets international engineering, accessibility, and aesthetic standards. --- ## 🏛️ The 5 Verification Pillars Whenever asked to audit, verify, or review any web page, component, or frontend generation, execute this 5-stage inspection: ``` ┌─────────────────────────────────────────────────────────────┐ │ 🔍 UI-VERIFIER PIPELINE │ └─────────────────────────────────────────────────────────────┘ │ ├─► [1] Anti-Slop Visual Architecture (Aesthetics & Tokens) ├─► [2] Responsive Multi-Device Integrity (375px / 768px / 1440px) ├─► [3] Accessibility & WCAG AA (Keyboard, ARIA, Reduced Motion) ├─► [4] Performance & Compositing Budget (rAF, Blur Count, Vectors) └─► [5] Semantic RTL & BiDi Stability (Fixed Layout, Monospace LTR) ``` --- ### Pillar 1: Anti-Slop Visual & Novelty Audit - **Measurement Method:** Audit visual chemistry against the 5 archetypes and verify the **Novelty Budget**. - **Evidence Required:** - Specified visual chemistry (e.g., *Minimalist SaaS*, *Neobrutalism*, *Swiss Editorial*). - Novelty check: At least 2 of 6 structural dimensions (hero composition, card geometry, background treatment, typograp