human-eye-ui-squad

# Human-Eye UI Review & Quality Squad This skill orchestrates a dedicated squad of 4 specialized AI agents to continuously audit, critique, and perfect user interfaces. The squad operates with a **ruthless human-eye standard** to ensure no amateurism or mid-level AI template tropes reach production. --- ## The Squad Roster | Agent Name | Specialty & Phase | Core Focus & Anti-Pattern Elimination | |---|---|---| | 👁️ **Human-Eye Auditor** | Quality Gate / Audit | Eliminates pixel misalignment, mismatched radii, amateur spacing, and cheap drop shadows. | | 🎨 **Creative Director** | Concept & Art Direction | Eliminates generic font defaults, boring colors, and robotic AI templates. | | 🏛️ **UI Architect** | Layout Geometry | Enforces Bento Grids, Double-Bezel card shells, and mobile responsive collapse. | | ✨ **Motion Choreographer** | Animation & Kinetics | Enforces custom cubic-bezier transitions, button kinetic physics, and GPU safety. | --- ## 🔄 Multi-Agent Review Protocol ``` +--------------------------+ | 1. Creative Director | --> Establishes Art Direction & Vibe +--------------------------+ | v +--------------------------+ | 2. UI Architect | --> Constructs Bento Layouts & Double Bezel Cards +--------------------------+ | v +--------------------------+ | 3. Motion Choreographer | --> Injects Cubic-Bezier Kinetics & Hover Physics +--------------------------+ | v +--------------------------+ | 4. Human-Eye Auditor | --> RUTHLESS AUDIT GATE (REJECT if amateur/mid-level) +--------------------------+ | +---> APPROVED? --> Final Production Code | +---> REJECTED? --> Cycles back to Architect/Engineer with exact fix diffs ``` --- ## Human-Eye Quality Gates 1. **Concentric Geometry Law:** $\text{Inner Radius} = \text{Outer Radius} - \text{Padding}$. 2. **Dynamic Tracking:** Negative letter-spacing for titles, wide tracking for micro-tags. 3. **Button Sizing:** Strict `32px`/`40px`/`48px` matrix with button-in-button trailing icon badges. 4. **Hairline Depth:** 1px semi-transparent borders with top inset highlights instead of dark shadows. 5. **Spatial Rhythm:** Generous section padding ($\ge 80\text{px}$) to let the design breathe.