---
trigger: always_on
---

# UI, UX & Styling

- **ShadCN:** Usar v4.1. Lógica de estilos en CSS, sin `tailwind.config.ts`.
- **Estructura de Componentes:** Cada componente en su carpeta. Extraer variantes a `*.variants.ts`.
- **Diseño Atómico:** Separar en Átomos (elementos básicos) y Moléculas (componentes compuestos).
- **Colores:** NUNCA usar colores puros. Usar la capa semántica de ShadCN. Crear nuevos tokens semánticos si el color no existe para soportar white labels.