What problem does it solve? Building or styling UI in this codebase without consistent guidance leads to mismatched colors, wrong fonts, and components that break the dark cyberpunk-minimal aesthetic. This Skill encodes the project's complete design system so every new page, section, or component matches the existing visual language. ## Core Features & Use Cases - Semantic Token System: Enforces CSS variable tokens (text-foreground, bg-card, border-border, text-primary) instead of hardcoded colors across all UI work. - Component Patterns: Documents exact usage for react-aria-components primitives styled with cva — buttons, badges, cards, inputs, field groups, accordions, and separators — all with rounded-none geometry and glassmorphism effects. - Typography & Layout Rules: Prescribes font-mono (JetBrains Mono) for body text and font-heading (Manrope) for headings, plus spacing, focus ring, and ambient background blob conventions. - Use Case: When asked to "add a projects section" or "build a settings card", the Skill ensures the output uses the correct card glass effect, hover ring highlights, Badge variants, and Field/FieldGroup form patterns automatically. ## Quick Start Use the frontend-design skill to build a new contact section for the homepage that matches the rest of the site.
