fn-design-system/design_prompts/custom.md

Pantalla custom (sin page generator)

Cuando la pantalla no encaja en ninguno de los generators (analyticsPage, crudPage, detailPage, settingsPage, AuthForm, ErrorPage), usa esta plantilla. Respeta DESIGN_SYSTEM.md.

Objetivo

{Describe en 1-2 frases qué hace la pantalla y qué problema resuelve para el usuario.}

Shell

• ¿Va dentro de FnAppShell (header + navbar)? → {sí/no}. Si sí:
  • Header: {título app, búsqueda global, avatar menu, notificaciones}
  • Navbar: {items principales con FnNavLink + iconos Tabler}
• Sticky PageHeader con tabs: {sí/no}

Layout principal

Describe la composición en términos de primitives de Mantine (Stack, Group, SimpleGrid, Grid, Paper, Box) y wrappers de @fn_library.

Ejemplo:

Stack gap="lg"
├── PageHeader (título + acciones)
├── SimpleGrid cols={2}
│   ├── Card (KpiCard list)
│   └── Card (LineChart)
└── DataTable

Componentes requeridos (todos desde @fn_library)

• {lista exhaustiva de componentes que debes usar — KpiCard, DataTable, Command, Dialog, etc.}

Interacciones

• {clics, hovers, modales que se abren, estados de loading, empty states, errores}

Estados

• Loading: {Skeleton variant / LoadingOverlay}
• Empty: EmptyState con {icono, mensaje, acción}
• Error: {Alert destructive / toast}

Datos (mock)

{Pega o describe el shape de los datos; JSON realista de 3-5 filas si es tabla, arrays de puntos si es chart, etc.}

Restricciones

• {lo que NO debe hacer — ej. "sin modal global, todo inline"}

Entrégalo listo para Handoff to Claude Code.