# Guía de Prompting V4 — Desarrollo con IA
## Guía y plantillas de prompts de alta fidelidad para el desarrollo guiado por agentes autónomos

> **Propósito:** Esta guía proporciona a los desarrolladores la plantilla oficial para redactar prompts claros, estructurados y libres de ambigüedad al delegar la creación de UI a un agente de Inteligencia Artificial.

---

## 1. Filosofía de Prompting Seguro y de Alto Impacto

Para que la IA produzca interfaces que sigan el **100% de los estándares de seguridad y rendimiento**, los prompts deben proveer contexto explícito y limitar el alcance del desarrollo.

- **Evita prompts ambiguos:** *"Hazme una pantalla de dashboard"* genera código genérico que viola la arquitectura de Next.js y el cifrado de datos.
- **Uso estructurado:** Divide tus solicitudes en: Contexto de Negocio, Enrutamiento, Especificaciones de UI, Integración de APIs, y Activación de Skills.

---

## 2. Plantilla Oficial de Prompt para Pantallas / Componentes

Copia y completa la siguiente plantilla y pégala en tu chat con el agente cuando inicies un nuevo desarrollo:

```
Implementa una pantalla en Next.js siguiendo AGENT.md, docs/guia-4-implemented-pattern.md y las reglas operacionales.

### 1. Contexto y Enrutamiento
- Nombre técnico: [ej. Dashboard de Transferencias]
- URL Path: [ej. /dashboard/transferir]
- Nivel de Seguridad: [ej. Protegida por middleware serverRequireAuth]

### 2. Especificación de UI (F Figma / daisyUI)
- Estructura visual requerida: [ej. Panel lateral, formulario central de 3 campos, tabla resumen]
- Componentes daisyUI a usar: [ej. input, select, button, card, modal]
- Estado del cliente: [ej. Registrar 'montoTransferido' en Zustand store lib/auth/client/useAuthStore.ts]

### 3. Integración de APIs (Backend Downstream)
- Endpoint a consumir: [ej. POST /api/transferencias o POST directo a backend Spring Boot]
- Cifrado requerido: [ej. Cifrar 'cuentaOrigen' y 'cuentaDestino' usando lib/cypher/encrypt.ts]
- Headers obligatorios: [ej. traceId, appId]

### 4. Activación de Skills (Gobernanza)
- Activar 'security-best-practices': para validación de flags de cookies y sanitización.
- Activar 'test-driven-development': para generar la suite de pruebas unitarias en Vitest.
- Activar 'code-review-excellence': para auditar la implementación final antes del PR.
```

---

## 3. Ejemplo Práctico

### Prompt enviado al agente:
```
Implementa una pantalla en Next.js siguiendo AGENT.md, docs/guia-4-implemented-pattern.md y las reglas operacionales.

### 1. Contexto y Enrutamiento
- Nombre técnico: Dashboard de Resumen Financiero
- URL Path: /dashboard
- Nivel de Seguridad: Protegida por middleware serverRequireAuth

### 2. Especificación de UI (F Figma / daisyUI)
- Estructura visual: Panel con 3 tarjetas de resumen (Saldo Ahorros, Saldo Corriente, Tarjeta de Crédito) y una tabla con los últimos 5 movimientos.
- Componentes daisyUI: card, table, badge, dropdown.
- Estado del cliente: Ninguno persistente.

### 3. Integración de APIs (Backend Downstream)
- Endpoint a consumir: GET /api/cuentas (Next.js Route Handler que propaga credenciales de cookie HTTP-only y llama al Spring Boot backend /cuentas).
- Cifrado requerido: Cifrar el balance y el número de cuenta al mostrar.

### 4. Activación de Skills (Gobernanza)
- Activar 'code-review-excellence' al finalizar para verificar que no haya directivas de localStorage u omisiones de auth.
```