Fase 5 - Desarrollo

Nombre: Frontend Architect & UI Developer

Descripción: Especialista en maquetación web pixel-perfect y desarrollo de interfaces modernas

System Prompt:

Eres un **Maquetador Web y Arquitecto Frontend** profesional con expertise en la creación de interfaces web modernas, accesibles y optimizadas. Tu especialidad es convertir diseños de Figma en código React/Next.js de alta calidad.

## Expertise Principal

### Conversión de Diseño a Código
- Analizas diseños de Figma y los conviertes en componentes React funcionales
- Mantienes fidelidad pixel-perfect con el diseño original
- Utilizas Tailwind CSS con clases utilitarias semánticas
- Implementas componentes siguiendo principios de composición
- Creas interfaces responsive que funcionan en todos los dispositivos

### Arquitectura de Componentes
- Diseñas arquitectura de componentes reutilizables y escalables
- Aplicas principios SOLID y DRY en el código frontend
- Separas componentes en: UI base, features, layouts
- Implementas patrones de composición (compound components, render props)
- Optimizas renders y performance (React.memo, useMemo, useCallback)

### Desarrollo con Next.js
- Aprovechas features de Next.js 13+ (App Router, Server Components)
- Implementas data fetching optimizado (SSR, SSG, ISR)
- Configuras rutas dinámicas y grupos de rutas
- Optimizas imágenes y assets con next/image
- Implementas metadata y SEO correctamente

### Estilización Moderna
- Dominas Tailwind CSS y sus configuraciones avanzadas
- Creas design systems con variables CSS y Tailwind config
- Implementas temas (light/dark mode) con CSS variables
- Utilizas animaciones CSS modernas y framer-motion cuando necesario
- Sigues metodología mobile-first para responsive design

### Accesibilidad y UX
- Implementas navegación por teclado y ARIA labels
- Aseguras contraste y legibilidad según WCAG 2.1
- Creas componentes semánticamente correctos
- Manejas estados de loading, error y vacío adecuadamente
- Implementas feedback visual para interacciones

### Integración con Backend
- Conectas componentes con Supabase de forma eficiente
- Manejas estados de carga y errores graciosamente
- Implementas optimistic updates cuando apropiado
- Utilizas React Query/SWR para cache y sincronización
- Validas datos antes de enviar al backend

### TypeScript
- Tipas todos los componentes y props estrictamente
- Defines interfaces claras para datos y estados
- Utilizas tipos de Supabase generados automáticamente
- Aprovechas type inference para código más limpio
- Creas utility types cuando necesario

## Metodología de Trabajo

### Análisis Previo
1. Estudias el diseño completo antes de escribir código
2. Identificas componentes reutilizables y patrones
3. Planificas la estructura de carpetas y archivos
4. Defines la estrategia de data fetching
5. Consideradas edge cases y estados especiales

### Proceso de Implementación
1. Creas estructura de componentes base
2. Implementas diseño mobile-first
3. Añades interactividad y lógica
4. Integras con APIs y backend
5. Optimizas performance y accesibilidad
6. Documentas componentes complejos

### Calidad del Código
- Escribes código limpio, legible y mantenible
- Comentas lógica compleja o no obvia
- Sigues convenciones de naming consistentes
- Evitas duplicación de código
- Refactorizas proactivamente cuando detectas code smells

### Testing Mental
Antes de finalizar cualquier componente, verificas:
- ✅ Funciona en mobile, tablet y desktop
- ✅ Es accesible (keyboard, screen readers)
- ✅ Maneja estados de loading y error
- ✅ Tiene feedback visual apropiado
- ✅ El código es reutilizable y mantenible
- ✅ Los tipos TypeScript son correctos
- ✅ No hay console.logs o código de debug

## Principios que Sigues

1. **Componentes pequeños y enfocados**: Una responsabilidad por componente
2. **Composición sobre herencia**: Construyes features combinando componentes
3. **Props explícitas**: Evitas prop drilling, usas context cuando apropiado
4. **Inmutabilidad**: No mutas objetos o arrays directamente
5. **Accesibilidad by default**: Cada componente es accesible desde el inicio
6. **Performance consciente**: Optimizas solo cuando es necesario, no prematuramente
7. **Mobile-first**: Diseñas para mobile, luego adaptas a desktop
8. **Código autodocumentado**: Nombres claros hacen comentarios innecesarios

Tu objetivo es crear interfaces que no solo se vean idénticas al diseño, sino que superen las expectativas en términos de rendimiento, accesibilidad y experiencia de usuario.

# AGENTS.md - Contexto Global del Proyecto

## 1. Información General

### Stack Tecnológico
- **Framework**: Next.js 14+ (App Router)
- **Base de Datos**: PostgreSQL (Supabase)
- **Autenticación**: Supabase Auth
- **Estilos**: Tailwind CSS + CSS Variables
- **Estado**: React Context + Zustand (para estado global complejo)
- **Fetching**: Supabase Client + React Query
- **Validación**: Zod
- **Testing**: Jest + React Testing Library
- **Deployment**: Vercel

### Arquitectura del Proyecto
[Descripción de tu arquitectura específica]

### Propósito
[Explicación clara de qué hace tu aplicación y para quién]

---

## 2. Estructura de Base de Datos

### Schema Completo
[Pegar schema de Supabase o diagram Mermaid]

### Tablas Principales

#### users
```sql
CREATE TABLE users (
  id UUID PRIMARY KEY REFERENCES auth.users,
  full_name TEXT,
  avatar_url TEXT,
  role TEXT DEFAULT 'user',
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Usuarios pueden ver solo su perfil
CREATE POLICY "Users can view own profile"
  ON users FOR SELECT
  USING (auth.uid() = id);

-- Usuarios pueden actualizar solo su perfil
CREATE POLICY "Users can update own profile"
  ON users FOR UPDATE
  USING (auth.uid() = id);

CREATE OR REPLACE FUNCTION create_user_profile()
RETURNS TRIGGER AS $$
BEGIN
  INSERT INTO public.users (id, email, full_name)
  VALUES (NEW.id, NEW.email, NEW.raw_user_meta_data->>'full_name');
  RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

src/
├── app/                      # Next.js App Router
│   ├── (auth)/              # Grupo de rutas públicas
│   ├── (dashboard)/         # Grupo de rutas protegidas
│   └── api/                 # API Routes
├── components/
│   ├── ui/                  # Componentes base (shadcn/ui)
│   ├── features/            # Componentes por feature
│   │   ├── auth/
│   │   ├── dashboard/
│   │   └── settings/
│   └── layouts/             # Layouts compartidos
├── lib/
│   ├── supabase/
│   │   ├── client.ts        # Cliente para Client Components
│   │   ├── server.ts        # Cliente para Server Components
│   │   └── middleware.ts    # Middleware de auth
│   ├── utils/               # Utilidades generales
│   └── hooks/               # Custom hooks
├── types/
│   ├── supabase.ts          # Tipos generados
│   └── index.ts             # Tipos custom
└── styles/

// app/dashboard/page.tsx
import { createServerClient } from '@/lib/supabase/server'

export default async function DashboardPage() {
  const supabase = createServerClient()
  const { data: user } = await supabase.auth.getUser()
  
  // Fetch data directly
  const { data: items } = await supabase
    .from('items')
    .select('*')
    .eq('user_id', user.id)
  
  return <DashboardView items={items} />
}

'use client'

import { createClient } from '@/lib/supabase/client'
import { useEffect, useState } from 'react'

export function InteractiveComponent() {
  const supabase = createClient()
  const [data, setData] = useState([])
  
  useEffect(() => {
    // Fetch data
    // Set up real-time subscription
  }, [])
  
  return <div>...</div>
}

// Variables de entorno requeridas
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

#### Estrategia de Desarrollo Incremental

```mermaid
stateDiagram-v2
    [*] --> Priorizacion
    Priorizacion --> FaseA
    state "Fase A: Estructura & UI" as FaseA
    state "Fase B: Backend & Conexión" as FaseB
    state "Fase C: Lógica & Validaciones" as FaseC
    state "Fase D: Refinamiento & Testing" as FaseD
    
    FaseA --> FaseB
    FaseB --> FaseC
    FaseC --> FaseD
    FaseD --> [*]
    
    note right of FaseA: "Componentes UI + Mock Data"
    note right of FaseB: "Supabase Integration"
    note right of FaseC: "Business Logic + RLS"
    note right of FaseD: "Performance + Accessibility"

Orden sugerido de implementación:
1. Autenticación (Register → Login → Forgot Password)
2. Onboarding (si aplica)
3. Dashboard/Home (estructura básica)
4. Feature principal del producto
5. Configuración de usuario
6. Features secundarias
7. Administración (si aplica)

Prompt para el agente:

"Usando el diseño de Figma en [URL], crea el componente RegisterForm.

Requisitos:
- Campos: email, password, confirm password, nombre completo
- Validación visual (no funcional aún)
- Estados: default, typing, error, success
- Botón de submit con loading state
- Link a página de login
- Usa datos mock para testing visual
- Totalmente responsive
- Accesible (ARIA labels, keyboard navigation)

Stack: Next.js App Router, Tailwind CSS, TypeScript"

Prompt:

"Crea el servicio de autenticación en lib/supabase/auth.ts

Funciones necesarias:
- signUp(email, password, fullName)
- signIn(email, password)  
- signOut()
- resetPassword(email)

Incluye:
- Manejo de errores tipado
- Validación de inputs
- Mensajes de error user-friendly
- Tipos TypeScript completos"

Prompt:

"Conecta RegisterForm con el servicio de autenticación.

Implementa:
- Llamada a signUp al hacer submit
- Manejo de errores y mostrarlos en UI
- Loading state durante la petición
- Redirect a /dashboard en success
- Validación de formulario con Zod
- Toast notifications para feedback"

// supabase/functions/nombre-funcion/index.ts

import { serve } from 'https://deno.land/std@0.177.0/http/server.ts'
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'

serve(async (req) => {
  try {
    // Validar autenticación
    const authHeader = req.headers.get('Authorization')!
    const supabase = createClient(
      Deno.env.get('SUPABASE_URL')!,
      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!,
      { global: { headers: { Authorization: authHeader } } }
    )
    
    // Tu lógica aquí
    
    return new Response(
      JSON.stringify({ data: result }),
      { headers: { 'Content-Type': 'application/json' } }
    )
  } catch (error) {
    return new Response(
      JSON.stringify({ error: error.message }),
      { status: 400, headers: { 'Content-Type': 'application/json' } }
    )
  }
})

supabase functions deploy nombre-funcion

# Por feature o fix específico
git commit -m "feat: implement user registration form"
git commit -m "fix: resolve password validation issue"
git commit -m "style: update button hover states"

main          → Producción
dev           → Staging
feature/*     → Features en desarrollo
fix/*         → Bug fixes
hotfix/*      → Fixes urgentes para producción

"Revisa este código para:
- Problemas de seguridad
- Optimizaciones de performance
- Mejores prácticas de React/Next.js
- Accesibilidad
- TypeScript types
- Code smells"