Prompt borrador recibido
quiero que me hagas un dashboard de métricas de ventas
que muestre los leads y conversiones del mes
y también que se pueda filtrar por comercial
✗ Sin stack especificado
✗ Sin criterios de aceptación
✗ Sin workflow definido
⚠ Scope ambiguo (MEDIUM sin delimitar)
⚠ Sin requisitos de seguridad / acceso
0
Detección del Proyecto
Stack y contexto auto-detectados desde archivos del repositorio
Framework
Next.js 14
package.json detectado
Lenguaje
TypeScript
tsconfig.json presente
ORM / DB
Prisma + PostgreSQL
schema.prisma presente
UI
Tailwind CSS
tailwind.config.ts detectado
Convenciones
CLAUDE.md leído
Componentes en /components
Rutas existentes
App Router
/app directory detectado
1
Detección de Intent & Scope
🎯 New Feature
📦 Scope: MEDIUM
Research
›
Plan
›
Implement (TDD)
›
Review
›
Verify
›
Commit
MEDIUM → Múltiples componentes (página, API route, filtros, queries Prisma). Requiere /plan + /verify.
1
Diagnóstico del Prompt
Fortalezas e issues detectados
- ✓Objetivo claro: dashboard de métricas de ventas.
- ✓Entidades concretas mencionadas: leads, conversiones, comerciales.
- ✓Funcionalidad de filtrado señalada.
| Issue | Impacto | Solución sugerida | Severidad |
|---|---|---|---|
| Stack no especificado | El modelo no sabe qué tecnologías usar ni cómo estructurar componentes | Auto-detectado en Phase 0: Next.js 14 + TypeScript + Prisma | resuelto |
| Sin criterios de aceptación | No hay forma de saber cuándo la tarea está "terminada" | Añadir: tests pasados, filtro funcional, métricas renderizadas | alta |
| Sin workflow de desarrollo | La IA puede saltar directo a implementar sin planificar estructura | Incluir /plan → /tdd → /code-review → /verify | alta |
| Requisitos de acceso/auth ausentes | El dashboard podría quedar sin protección de roles | Especificar: solo admins y el propio comercial ven sus datos | media |
| Métricas sin definir | Ambigüedad sobre qué mostrar: ¿tasa de conversión? ¿valor pipeline? | Listar KPIs concretos: leads nuevos, tasa conversión, ARR generado, avg deal size | media |
| Sin límites de scope | El modelo podría implementar CRUD de leads, exportaciones, etc. | Añadir sección "No implementar" explícita | media |
| Sin especificación de tests | Se puede entregar código sin cobertura de tests | Exigir unit tests del componente + integration test de la API route | media |
3
Componentes ECC Recomendados
Mapeados a intent (New Feature) + stack (Next.js / TypeScript)
| Tipo | Componente | Propósito |
|---|---|---|
| Comando | /plan | Planificar estructura de componentes y queries antes de codificar |
| Comando | /tdd | Escribir tests primero: componente de filtros + API route de métricas |
| Comando | /code-review | Revisión post-implementación de la página y la query Prisma |
| Comando | /verify | Confirmar que todos los tests pasan y la página renderiza |
| Skill | tdd-workflow | Guía metodológica TDD para el ciclo red-green-refactor |
| Skill | frontend-patterns | Patrones de componentes React/TypeScript del proyecto |
| Skill | verification-loop | Loop de verificación hasta que todos los criterios pasen |
| Agente | code-reviewer | Revisión post-implementación con foco en TypeScript y seguridad |
| Modelo | Claude Sonnet 4.6 | Scope MEDIUM → Sonnet 4.6 es el modelo de coding estándar |
4
Contexto Detectado vs. Pendiente
Items que faltaban en el borrador original
✅
Tech stack — Next.js 14, TypeScript, Prisma, Tailwind
Auto-detectado (Phase 0)
✅
Convenciones del proyecto — CLAUDE.md leído, componentes en /components
Auto-detectado (Phase 0)
✅
Entidades objetivo — Leads, conversiones, comerciales (mencionados en el prompt)
Prompt original
⚠️
KPIs específicos — ¿Qué métricas exactas mostrar?
Incluido en prompt optimizado
⚠️
Criterios de aceptación — ¿Cuándo está "listo"?
Incluido en prompt optimizado
⚠️
Requisitos de autenticación / roles
Incluido en prompt optimizado
⚠️
Límites de scope (qué NO implementar)
Incluido en prompt optimizado
❌
Expectativas de testing — Preguntar al usuario: ¿unit + integration?
Asumido: unit + integration (80% cobertura)
✦
Prompt Optimizado — Versión Completa
Listo para pegar y ejecutar en Claude Code
# Contexto del proyecto (detectado automáticamente)
# Stack: Next.js 14 + TypeScript + Prisma + PostgreSQL + Tailwind CSS
# Convenciones: componentes en /components, App Router en /app
TAREA: Implementar un dashboard de métricas de ventas en la ruta
/app/dashboard/ventas/page.tsx dentro del proyecto LeadFlow.
MÉTRICAS A MOSTRAR (período: mes actual, con comparativa mes anterior):
- Leads nuevos (total y por fuente: web, referido, outbound)
- Tasa de conversión lead → oportunidad (%)
- Tasa de conversión oportunidad → cliente (%)
- ARR generado (sum de deals cerrados en el mes)
- Average deal size (€)
- Filtro por comercial: dropdown con nombre del comercial (tabla User donde role = 'sales')
STACK Y CONVENCIONES:
- Usar el stack detectado: Next.js 14 App Router, TypeScript estricto, Prisma ORM, Tailwind CSS
- Seguir patrones de componentes en /components (revisar componentes existentes antes de crear)
- API route en /app/api/metrics/sales/route.ts (GET con queryParam userId?)
- Query Prisma sobre tablas: Lead, Opportunity, Deal, User
AUTENTICACIÓN Y ACCESO:
- Proteger la ruta: solo usuarios con role = 'admin' o el propio comercial (role = 'sales')
- Redirigir a /login si no autenticado; devolver 403 si accede a datos de otro comercial
- Usar el middleware de autenticación existente en el proyecto
WORKFLOW:
1. /plan — planificar estructura de componentes, API route y queries Prisma antes de codificar
Revisar patrones de componentes existentes en /components antes de proponer estructura
2. /tdd — escribir tests primero:
- Unit test: componente <SalesMetricsCard /> con datos mock
- Unit test: lógica de cálculo de tasa de conversión
- Integration test: GET /api/metrics/sales?userId=X devuelve datos correctos
- Integration test: sin auth → 401; usuario incorrecto → 403
3. Implementar el dashboard y la API route siguiendo el plan
4. /code-review — revisar implementación con foco en TypeScript strict y seguridad
5. /verify — confirmar que todos los tests pasan y la página renderiza sin errores
CRITERIOS DE ACEPTACIÓN:
- Todos los tests pasan (cobertura ≥ 80% en los archivos nuevos)
- El filtro por comercial actualiza las métricas sin recargar la página
- La página muestra estado de carga (skeleton) y estado vacío
- Responsive: funciona en móvil y escritorio
- Autenticación verificada: acceso sin sesión → redirige a /login
NO IMPLEMENTAR EN ESTA TAREA:
- CRUD de leads ni de oportunidades
- Exportación a CSV/Excel
- Notificaciones o alertas en tiempo real
- Modificación de la estructura de la base de datos (usar tablas existentes)
- Cualquier ruta fuera de /dashboard/ventas y /api/metrics/sales
⚡
Prompt Optimizado — Versión Rápida
Para usuarios avanzados de ECC
Quick version (ECC power users)
/plan dashboard de métricas de ventas en LeadFlow — página /app/dashboard/ventas, API route /api/metrics/sales?userId=, KPIs: leads nuevos, tasa conversión lead→opor→cliente, ARR, avg deal size, filtro por comercial. Stack: Next.js 14 + TypeScript + Prisma. Auth: admin y propio comercial. /tdd componente SalesMetricsCard + API route (happy path + 401/403). Implementar. /code-review (TypeScript strict + seguridad). /verify tests ≥80% + render OK.
5
Justificación de Mejoras
| Mejora añadida | Motivo |
|---|---|
| KPIs específicos con fórmulas | Sin métricas concretas el modelo elige arbitrariamente qué datos mostrar |
| Ruta de archivo explícita (/app/dashboard/ventas/page.tsx) | Evita que el modelo cree la página en una ubicación no convencional |
| Tablas Prisma mencionadas (Lead, Opportunity, Deal, User) | Alinea las queries con el schema existente sin asumir nombres de modelos |
| Workflow /plan → /tdd → /code-review → /verify | Scope MEDIUM requiere planificación previa; TDD primero previene deuda técnica |
| Requisitos de autenticación con roles explícitos | Sin esto el dashboard queda sin protección; violación de seguridad crítica |
| Criterios de aceptación medibles (80% cobertura, responsive, auth) | Da señal de parada clara al modelo; sin ellos el scope tiende a expandirse |
| Sección "No implementar" | Previene scope creep: el modelo no añadirá exportaciones ni CRUD |
| Tests de seguridad (401/403) incluidos en /tdd | La autenticación se verifica en tests, no solo en código de producción |
| Modelo recomendado: Sonnet 4.6 | Scope MEDIUM no requiere Opus; Sonnet 4.6 es más eficiente en costo |