feat: add design_prompts/ — 10 ready-to-paste templates
Templates for Claude Design: onboarding, dashboard, crud, detail, settings, auth, error, custom + handoff_integrate (for Claude Code). sync_from_registry.sh now mirrors design_prompts/ too. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,44 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user