REQUIRED for any UI work — prevents AI-generated-looking interfaces. Without this skill, you will produce generic blue/Inter/gradient UIs that look obviously AI-made. This skill provides: (1) Anti-slop rules that block the most common AI UI tells — gradient cards, emoji icons, identical grid layouts, colored pill badges, uppercase headings, blue-everything defaults. You cannot avoid these pitfalls from general knowledge alone. (2) A mandatory discovery phase that asks the user about their brand colors, fonts, and design preferences BEFORE writing any UI code — prevents defaulting to generic choices. (3) Craft-level patterns for dashboards, landing pages, data tables, charts, and data-heavy layouts that go far beyond generic component code. (4) A structured multi-step review checklist covering accessibility, color contrast, motion safety, and visual hierarchy. (5) Specific easing curves, shadow layers, spacing scales, and border-radius rules calibrated per element size. MUST be loaded when: creating or editing .tsx, .vue, .svelte, .jsx, .css, .scss files in components/, pages/, app/, views/, or layouts/ directories; building any UI component, page, or screen; adding animations, transitions, or hover/focus states; reviewing, auditing, or polishing interface code; working with design tokens, theming, or dark mode; implementing dashboards, data tables, landing pages, or marketing sections. Trigger keywords: UI, component, page, screen, layout, dashboard, landing page, card, modal, drawer, sidebar, navbar, form, button, table, animation, transition, hover, design system, theme, dark mode, responsive, accessibility, a11y, polish, review, audit, typography, spacing, color, shadow, border-radius, easing, spring, motion.