Files

T

egutierrez 0883155432 feat(design-system): DESIGN_SYSTEM.md + prompts + extract-design command

- frontend/DESIGN_SYSTEM.md: contrato del @fn_library (regla suprema para
  Claude Design y agentes).
- frontend/design_prompts/: 11 plantillas de prompt (onboarding, dashboard,
  crud, detail, settings, auth, error, custom, handoff_integrate) +
  questionnaire numerado para arranque rapido.
- .claude/commands/extract-design.md: workflow de 10 pasos para extraer
  componentes nuevos y mejoras desde exports "standalone" de Claude Design
  al registry, sync al espejo fn-design-system y push a gitea+github.
- .claude/scripts/extract_design_bundle.py: decodificador del bundle
  (base64+gzip en manifest, nombra JSX por heuristica de header).
- .gitignore: ignorar subrepos/*/ (el mirror fn-design-system es repo
  propio con remotes dataforge/fn-design-system + gutierenmanuel/fn-design-system).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-04-21 20:46:00 +02:00

1.6 KiB

Raw Permalink Blame History

Onboarding — pegar al crear el proyecto en Claude Design

Voy a usarte para diseñar UI de un sistema con design system propio llamado @fn_library.

Regla suprema: lee DESIGN_SYSTEM.md en la raíz del repo enlazado. Es la fuente de verdad. No improvises componentes ni estilos fuera de lo que ese documento define.

Resumen de reglas duras:

Stack: React 19 + Mantine v9 + @tabler/icons-react + @mantine/charts.
Solo importas UI desde @fn_library (barrel). Nunca @mantine/core directo en las apps.
Layout (Stack, Group, SimpleGrid, Grid, Paper, Box, Container, AppShell, Title, Text): sí desde @mantine/core.
Iconos: solo @tabler/icons-react (nunca lucide-react).
Prohibido: Tailwind, cn(), CVA, clsx, className con clases propias, style inline para maquetar, Recharts directo, shadcn, Radix directo, Chakra, MUI.
Props Mantine (size, color, variant, p, m, gap, radius, shadow, c, fw, fz) en vez de CSS.
Page generators preferidos antes de montar layouts a mano: analyticsPage, crudPage, detailPage, settingsPage, dashboardLayout, AuthForm, ErrorPage.
Root de cada app envuelto en FnMantineProvider con defaultColorScheme="dark".
Color scheme por defecto: dark.

Antes de generar nada, confírmame que has leído DESIGN_SYSTEM.md listándome:

Los 7 page generators y cuándo usa cada uno.
Cinco primitives que usarías para un dashboard de analytics.
Los tres imports que aparecen en el root de toda app (provider + tema + estilos).

Cuando te pida una pantalla, entrégamela lista para Handoff to Claude Code.

1.6 KiB Raw Permalink Blame History

Onboarding — pegar al crear el proyecto en Claude Design

1.6 KiB

Raw Permalink Blame History