What problem does it solve? AI-generated interface code often contains visual slop: inconsistent spacing, poor hierarchy, arbitrary z-index values, layout-breaking animations, and inaccessible components. This Skill enforces an opinionated UI baseline so React and Tailwind CSS interfaces stay clean, accessible, and consistent. ## Core Features & Use Cases - Constraint Enforcement: Applies strict rules across stack, components, interaction, animation, typography, layout, performance, and design (e.g., use h-dvh not h-screen, animate only transform and opacity, cap interaction feedback at 200ms). - File Review Mode: Audits a specific file and reports violations with the exact offending snippet, a one-sentence rationale, and a concrete code-level fix. - Accessibility Guardrails: Requires accessible primitives (Base UI, React Aria, Radix) for keyboard and focus behavior, aria-label on icon-only buttons, and AlertDialog for destructive actions. - Use Case: After generating a dashboard page with an AI assistant, run a baseline review to catch gradient misuse, missing skeleton loading states, hardcoded z-index values, and useEffect misuse before shipping. ## Quick Start Ask the assistant to review your React component file against the baseline-ui constraints and list every violation with a concrete fix.
