UI Component Architect

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.

• Imports: framer-motion, cn (clsx/tailwind-merge), cva.
• Variants: Define visual styles using cva. Avoid hardcoded colors (e.g., bg-blue-500); use CSS variables (e.g., bg-primary).
• Animation: Wrap the root element in motion.<element> and add subtle initial/animate props.

2. Styling Rules (Tailwind)

• Colors: Use semantic tokens: primary, secondary, accent, muted, destructive.
• Spacing: Use gap-2, p-4, etc.
• Borders: border-input, border (1px default).
• Radius: rounded-md or rounded-lg.

3. Usage Example

import { Component } from './Component';

export function Demo() {
  return (
    <Component variant="outline" size="lg">
      Click Me
    </Component>
  );
}

Template

See assets/component.tsx for the full boilerplate.

// Quick Reference
const componentVariants = cva('base-classes...', {
  variants: {
    variant: { default: '...', outline: '...' },
    size: { default: 'h-9 px-4', sm: 'h-8 px-3' },
  },
  defaultVariants: { variant: 'default', size: 'default' },
});

Checklist

• Used cva for variants
• Added framer-motion for micro-interactions
• Used semantic colors (not raw hex/names)
• Forwarded ref correctly
• Exported Component and componentVariants

Converted and distributed by TomeVault — claim your Tome and manage your conversions.