Files
fn_registry/.claude/rules/frontend_theming.md
T
egutierrez 2d108c295a refactor: migrate frontend from shadcn/Tailwind to Mantine v9
Reescribe todos los componentes UI para usar Mantine v9 en lugar de shadcn/Tailwind.
Elimina cn(), CVA, components.json, theme_provider custom y globals.css con Tailwind.
Añade 25+ componentes nuevos (AppShell, AuthForm, DatePickerInput, Dropzone, etc.)
y MantineProvider como wrapper estándar del sistema de temas.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 23:46:44 +02:00

939 B

En todos los frontends se usan los componentes de @fn_library (alias a frontend/functions/ui/) antes que elementos HTML nativos o librerias externas.

El sistema de UI es Mantine v9. Todos los componentes de @fn_library wrappean componentes de Mantine.

Theming: Cada app define su tema con createTheme() de @mantine/core y lo pasa a MantineProvider (o FnMantineProvider de @fn_library). No se usan CSS variables custom — Mantine genera las suyas automaticamente (--mantine-color-*).

Styling: No se usa Tailwind, CVA, cn(), ni clases CSS manuales. Los componentes se estilizan con props de Mantine (size, color, variant, p, m, fw, etc.) y el style system de Mantine.

Iconos: Se usa @tabler/icons-react (el set nativo de Mantine), no lucide-react.

Layout: Se usan los componentes de layout de Mantine: Group, Stack, Grid, Flex, SimpleGrid, AppShell, Container, Box, Paper.