egutierrez
0883155432
- 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>
37 lines
1.5 KiB
Markdown
37 lines
1.5 KiB
Markdown
# Dashboard de analytics
|
|
|
|
Diseña una página de analytics usando `analyticsPage` como generator raíz. Respeta `DESIGN_SYSTEM.md`.
|
|
|
|
## Contexto
|
|
- **Dominio:** {QUÉ MIDE — ej. monitoreo de pipelines / ventas / tráfico web}
|
|
- **Audiencia:** {QUIÉN LO VE — ej. operador, ejecutivo}
|
|
- **Frecuencia:** {tiempo real / cada hora / diario}
|
|
|
|
## Header
|
|
- Título: `{TÍTULO}`
|
|
- Subtítulo: `{SUBTÍTULO — ej. "últimas 24h"}`
|
|
- Acciones (botones a la derecha): {LISTA — ej. "Refresh" (outline + IconRefresh), "Export" (ghost + IconDownload)}
|
|
- Date range selector: {sí / no}
|
|
|
|
## KPIs (fila de KpiCards)
|
|
Entre 2 y 6. Para cada uno:
|
|
| label | value | unit | delta |
|
|
|-------|-------|------|-------|
|
|
| {Runs totales} | {1284} | — | +12% positivo |
|
|
| {Success rate} | {97.3} | % | +0.4% positivo |
|
|
| {P95 latency} | {842} | ms | -8% positivo (bajar es bueno) |
|
|
| {Errores} | {34} | — | +5 negativo destructivo |
|
|
|
|
## Charts
|
|
{ENTRE 2 Y 6 charts. Para cada uno:}
|
|
- **id** · título · tipo (`line` / `bar` / `area` / `pie`) · span (`1` o `2`) · series
|
|
- Ej. `runs` · "Runs por hora" · `line` · span 1 · series `success` + `failure`
|
|
- Ej. `top` · "Top pipelines" · `bar` · span 1 · series `count`
|
|
- Ej. `latency` · "Latencia por etapa" · `area` · span 2 · stacked · series `p50` + `p95`
|
|
- Ej. `domain` · "Distribución por dominio" · `pie` · span 1 · donut
|
|
|
|
## Notas
|
|
- {Restricciones adicionales, ej. "sin header, se embebe en otra página"}
|
|
|
|
Entrégalo listo para Handoff to Claude Code. Los datos pueden ser mock realistas.
|