workspace/projects/gamilit/orchestration/prompts/PROMPT-FRONTEND-AGENT.md

PROMPT FRONTEND-AGENT - EXTENSIÓN GAMILIT

Versión: 2.0.0 Fecha: 2025-12-05 Tipo: Extensión de prompt global Proyecto: GAMILIT - Sistema de Gamificación Educativa

---

HERENCIA

EXTIENDE: core/orchestration/agents/PROMPT-FRONTEND-AGENT.md
CONTEXTO: orchestration/00-guidelines/CONTEXTO-PROYECTO.md

IMPORTANTE: Este archivo NO duplica el prompt global. Solo contiene:

1. Resolución de variables para GAMILIT
2. Extensiones específicas del proyecto (si las hay)

---

RESOLUCIÓN DE VARIABLES PARA GAMILIT

Al leer el prompt global, resolver estos placeholders:

{PROJECT_NAME}:    GAMILIT
{FRONTEND_ROOT}:   apps/frontend
{FRONTEND_SRC}:    apps/frontend/src
{FRONTEND_TESTS}:  apps/frontend/tests
{BACKEND_ROOT}:    apps/backend
{API_URL}:         http://localhost:3000

---

APPS DEL PROYECTO GAMILIT

GAMILIT implementa multi-app dentro del mismo frontend:

App	Ruta Base	Propósito	Usuarios
student	/student/	Experiencia gamificada de aprendizaje	Estudiantes
teacher	/teacher/	Gestión de cursos y seguimiento	Docentes
admin	/admin/	Administración del sistema	Administradores
institution	/institution/	Gestión de institución	Directivos

---

ESTRUCTURA ESPECÍFICA GAMILIT

apps/frontend/src/
├── shared/                    # Compartido entre todas las apps
│   ├── components/
│   │   ├── ui/               # Button, Input, Card, Modal, etc.
│   │   ├── layout/           # Header, Sidebar, Footer
│   │   └── gamification/     # BadgeDisplay, ProgressBar, XPCounter
│   ├── types/                # Types SSOT (Single Source of Truth)
│   │   ├── user.types.ts
│   │   ├── gamification.types.ts
│   │   └── content.types.ts
│   ├── hooks/                # Custom hooks compartidos
│   ├── stores/               # Zustand stores
│   ├── services/api/         # API services
│   └── constants/            # Constantes globales
├── apps/
│   ├── student/              # App Estudiante
│   │   ├── pages/
│   │   │   ├── Dashboard.tsx
│   │   │   ├── Lessons.tsx
│   │   │   ├── Challenges.tsx
│   │   │   └── Profile.tsx
│   │   ├── components/
│   │   └── routes.tsx
│   ├── teacher/              # App Docente
│   ├── admin/                # App Admin
│   └── institution/          # App Institución
└── main.tsx                  # Entry point

---

RUTAS DE TRABAJO GAMILIT

# Componentes
apps/frontend/src/shared/components/ui/
apps/frontend/src/shared/components/layout/
apps/frontend/src/shared/components/gamification/

# Types (SSOT - importar desde @shared/types)
apps/frontend/src/shared/types/

# Stores
apps/frontend/src/shared/stores/

# API Services
apps/frontend/src/shared/services/api/

# App Pages
apps/frontend/src/apps/{app}/pages/

# Inventarios
orchestration/inventarios/MASTER_INVENTORY.yml
orchestration/inventarios/FRONTEND_INVENTORY.yml

# Trazas
orchestration/trazas/TRAZA-TAREAS-FRONTEND.md

---

DIRECTIVAS ESPECÍFICAS GAMILIT

Además de las directivas globales, consultar:

Directivas del proyecto:
  - orchestration/directivas/GUIA-NOMENCLATURA-COMPLETA.md

Documentación de diseño:
  - docs/01-fase-alcance-inicial/ (especificaciones de UI)
  - docs/95-guias-desarrollo/frontend/ (convenciones de código)
  - docs/97-adr/ (decisiones arquitectónicas)

---

EXTENSIONES ESPECÍFICAS (si difieren del global)

Componentes de Gamificación

GAMILIT tiene componentes específicos para gamificación:

// Componentes en shared/components/gamification/
import { BadgeDisplay } from '@shared/components/gamification/BadgeDisplay';
import { XPProgressBar } from '@shared/components/gamification/XPProgressBar';
import { LevelIndicator } from '@shared/components/gamification/LevelIndicator';
import { ChallengeCard } from '@shared/components/gamification/ChallengeCard';
import { LeaderboardWidget } from '@shared/components/gamification/LeaderboardWidget';
import { AchievementToast } from '@shared/components/gamification/AchievementToast';

Tema Visual Maya

GAMILIT usa una temática visual basada en la cultura Maya:

// Colores y variables CSS en tailwind.config.js
// Iconografía maya para badges y rangos
// Animaciones de celebración al subir de nivel

Stores Específicos

// Stores de gamificación
import { useGamificationStore } from '@shared/stores/gamificationStore';
import { useChallengeStore } from '@shared/stores/challengeStore';
import { useProgressStore } from '@shared/stores/progressStore';

// useGamificationStore contiene:
// - currentLevel, xp, badges, activeStreak
// - fetchUserGamification(), earnXP(), claimBadge()

Multi-tenant en Frontend

// El tenant se obtiene del token JWT
const { user } = useAuthStore();
const tenantId = user?.tenantId;

// Todas las llamadas API incluyen tenant context
const headers = {
    'Authorization': `Bearer ${token}`,
    'X-Tenant-Id': tenantId
};

---

FLUJO DE INICIO

Cuando el usuario diga "lee el prompt de Frontend Agent para GAMILIT":

1. Leer prompt global: core/orchestration/agents/PROMPT-FRONTEND-AGENT.md
2. Leer este archivo: Para resolver variables y ver extensiones
3. Leer contexto: orchestration/00-guidelines/CONTEXTO-PROYECTO.md
4. Listo para recibir tarea

---

Nota: Cualquier mejora a las directivas generales se hace en core/orchestration/agents/PROMPT-FRONTEND-AGENT.md y se refleja automáticamente en todos los proyectos.