Instruction file imported from AzanoRivers/cartum-cms (
.github/instructions/ui-rules.instructions.md). Copyright stays with the author.
Cartum: Instrucciones de UI siempre activas
Estas reglas aplican a todo código generado en Cartum, sin excepción.
Estructura de componentes
/components/ui/→ ComponentesUI custom del sistema (átomos, moléculas, organismos, transiciones, layouts)/components/external/→ ComponentesExternos: wrappers sobre librerías third-party (un subdirectorio por librería)/app/→ Views: páginas Next.js que solo componen organisms, sin lógica propia/lib/→ Controllers: hooks, Server Actions, servicios/types/→ Models: todos los TypeScript types e interfaces
Reglas absolutas
- Toda nueva pantalla o contenido significativo usa
<VHSTransition>: efecto de entrada estilo VHS/cyberpunk (scanlines + RGB shift + glitch). Nunca omitirlo en páginas nuevas o paneles principales. - Custom primero: crear componentes propios antes de usar una librería externa. Excepción permitida: drag & drop con
@dnd-kit. - Todo drag & drop pasa por wrappers en
/components/external/dnd/: nunca usar@dnd-kitdirectamente en páginas o componentes UI. - Sin lógica en Views: las páginas en
/app/solo componen. La lógica va en hooks en/lib/hooks/. - Variantes con
cva()declass-variance-authority: no props booleanas sueltas para estilos. - Todos los tipos en
/types/: nunca tipos inline dentro de componentes. - Paleta de color del sistema: no valores de color hardcodeados. Usar variables CSS o clases Tailwind del tema definido.
Estética obligatoria
- Dark-first, minimalista, node-board aesthetic
- Cards como unidad base de contenido
- Espacios limpios, tipografía monospace para labels técnicos
- Responsive: sidebar + contenido en desktop, navegación inferior en mobile