premium-ui-ux

What problem does it solve?

Prevents low-quality, generic, or inconsistent UI/UX by enforcing a mobile-first, product-specific design process, mandatory post-generation reviews, and token-based design systems across web, mobile, and desktop codebases. It eliminates unnoticed visual regressions by auto-triggering reviews on any UI-relevant change and ensures accessibility, dual-input support, and platform-appropriate patterns are applied consistently.

Core Features & Use Cases

• Automatic Review Enforcement: Auto-triggers a mandatory review pass after any creation, refactor, or change to UI-relevant files (CSS, HTML, TSX/JSX, Dart, component templates, icons, animations).
• Design-System Init & Enforcement: Detects or generates a minimum viable design system, prevents hardcoded colors/spacing, and ensures tokens are used project-wide.
• Modes: CREATE / REVIEW / REFACTOR / DESIGN-SYSTEM: Produce production-grade UI, audit code with file:line findings, refactor to premium standards, and block UI generation until a design system exists.
• Anti-Slop Protocol: Requires product-DNA discovery, anti-goals, component questioning, and a self-critique gate to avoid interchangeable, trend-driven designs.
• Post-Generation Quality Check: Mandatory checks for mobile-first behavior, dual-input support, accessibility, spacing/tokens, platform guidelines, and premium-feel polish; fixes must be applied before presenting results.
• Use Case: After a CI job emits updated component code, run the skill to auto-audit changes, fix token violations and accessibility issues, and produce a concise Quality Check report.

Quick Start

Invoke the premium-ui-ux skill to review and fix recent frontend changes, enforce the design system, and produce a mandatory quality-check summary.