egutierrez
ca07927d38
- 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>
30 lines
1.9 KiB
Markdown
30 lines
1.9 KiB
Markdown
# Handoff Integrate — prompt para Claude Code (yo)
|
|
|
|
Usa este prompt cuando tengas el export de Claude Design y quieras que lo integre al registry.
|
|
|
|
---
|
|
|
|
Acabo de terminar un diseño en Claude Design y te paso el export. Quiero que lo integres en `fn_registry` siguiendo `frontend/DESIGN_SYSTEM.md`.
|
|
|
|
## Destino
|
|
- **App:** `apps/{APP}/` (si no existe, dímelo y decidimos si se crea).
|
|
- **Ruta / componente:** `{src/pages/Whatever.tsx}` o similar.
|
|
|
|
## Contexto del diseño
|
|
- **Tipo:** `{dashboard / crud / detail / settings / auth / error / custom}`
|
|
- **Propósito:** `{1-2 frases}`
|
|
|
|
## Export de Claude Design
|
|
{pega aquí los ficheros `.tsx` que te dio el handoff. Si son varios, uno bajo cada encabezado `### path/to/file.tsx` con el código dentro de ``` ```.}
|
|
|
|
## Qué necesito que hagas
|
|
1. **Verifica** que todo lo importable de UI viene de `@fn_library` (no `@mantine/core` directo, no HTML nativo, no librerías ajenas). Si el export usa otra cosa, reescríbelo con wrappers del registry.
|
|
2. **Valida** la deny-list: cero `tailwindcss`, `clsx`, `cn`, `cva`, `lucide-react`, `shadcn`, `@radix-ui/*`, `framer-motion`, `chakra`, `mui`, `antd`, CSS modules, className con clases propias, style inline para maquetar.
|
|
3. **Migra** cualquier icono a `@tabler/icons-react`.
|
|
4. **Coloca** los ficheros bajo `apps/{APP}/frontend/src/` respetando la estructura existente.
|
|
5. Si aparece un **componente que no existe en `@fn_library` pero tiene sentido como primitiva reutilizable**, dime: propones extraerlo a `frontend/functions/ui/{nombre}.tsx` + `.md` y corremos `fn index`. No lo hagas sin confirmar.
|
|
6. **Verifica** con `pnpm tsc --noEmit` o `pnpm build` que compila. Si no, arregla los imports.
|
|
7. **Reporta** en tres líneas: qué integraste, qué cambiaste del export, y qué quedó pendiente.
|
|
|
|
No inventes features. No añadas lógica que no estaba en el export. Integración fiel + adaptación al stack.
|