UI Component Architect

This skill guides the creation of premium, consistent UI components for QoreDB.

Core Principles

1. Premium Aesthetics: Avoid default browser styles. Use bg-primary, text-muted-foreground, etc., from the theme.
2. Interactive: All interactive elements must have hover/active states and micro-animations.
3. Accessible: Use semantic HTML and focus-visible states.
4. Type-Safe: Use cva (Class Variance Authority) for variant management.

Workflow

1. Component Structure

Create a new file in src/components/ui/ (or specific feature folder) using the assets/component.tsx template.