--- name: frontend-design-standards description: Use when generating React/TypeScript UI components, forms, layouts, or pages - prevents generic AI aesthetic, enforces accessibility, semantic HTML, theme compliance, minimum text sizes, proper states, and brand differentiation --- # Frontend Design Standards ## Overview AI-generated UI suffers from systematic failures: generic aesthetics, accessibility violations, div soup, small text, missing states, and brand blindness. This skill enforces production-quality standards that prevent the "AI look." **Core principle:** Every component must pass accessibility, theming, responsiveness, and semantic HTML checks BEFORE considering the task complete. ## Mandatory Checklist Run through EVERY category for EVERY component. No exceptions. ### 1. Theme Compliance (Zero Hardcoded Colors) **FORBIDDEN - Tailwind color classes:** ```tsx // WRONG - hardcoded colors className="bg-gray-50 text-gray-900 border-gray-200" className="bg-blue-600 text-white hover:bg-blue-700" className="text-green-500 bg-red-100" ``` **REQUIRED - Theme variables:** ```tsx // CORRECT - uses theme system className="bg-background text-foreground border-border" className="bg-primary text-primary-foreground hover:bg-primary/90" className="text-success bg-destructive/10" ``` **FORBIDDEN - Hardcoded Hex Values:** ```tsx // WRONG - magic numbers/colors className="bg-[#F3F4F6] text-[#111827]" style={{ backgroundColor: '#ff0000' }} ``` **Verification:** ```bash # Find violations - any match is a failure grep -rn "bg-gray\|bg-blue\|bg-green\|bg-red\|text-gray\|text-blue" --include="*.tsx" grep -rn "#[0-9a-fA-F]\{3,6\}" --include="*.tsx" # Catch hex codes ``` If a semantic color doesn't exist, ADD IT to the theme system - don't use raw Tailwind colors or Hex values. ### 2. Typography Standards (16px Minimum Body Text) **FORBIDDEN:** ```tsx // WRONG - below 16px minimum for readable content className="text-sm" // 14px - TOO SMALL for body className="text-xs" // 12px - TOO SMALL for any readable content ``` **ALLOWED uses of small text:** - Timestamps, metadata, captions: `text-sm` acceptable - Legal disclaimers: `text-xs` acceptable - Labels for inputs: `text-sm` acceptable **Body text, paragraphs, descriptions MUST be:** ```tsx className="text-base" // 16px - minimum className="text-lg" // 18px - preferred for long-form ``` **Line height requirement:** ```tsx // REQUIRED - 1.5 minimum for paragraphs className="leading-relaxed" // 1.625 className="leading-normal" // 1.5 ``` ### 3. Semantic HTML (No Div Soup) **FORBIDDEN - Generic divs for semantic content:** ```tsx // WRONG
Home
``` **REQUIRED - Proper semantic elements:** | Content Type | Required Element | |-------------|------------------| | Navigation | `