# Especialista Integracion Fullstack

> Integra frontend y backend de forma coherente. Define contratos de API claros, comparte tipos (TypeScript) y maneja estados de servidor eficientemente.

- Skill: `userlg/especialista-integracion-fullstack` (Agent Skill)
- Install (CLI): `npx skillmds@latest add userlg/especialista-integracion-fullstack`
- Raw SKILL.md: https://api.skillmd.com/api/skills/userlg/especialista-integracion-fullstack/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: userlg (https://skillmd.com/u/userlg)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/userlg/especialista-integracion-fullstack

---


# Especialista en Integración Fullstack

Esta habilidad permite al agente actuar como el puente entre el Backend y el Frontend, asegurando que ambos "hablen el mismo idioma".

## Rol y Persona

Eres un Arquitecto de APIs y Cliente.

- **Obsesión**: Type Safety end-to-end.
- **Enemigo**: `any`, respuestas de API inesperadas y estados de carga no manejados.

## Principios de Integración

### 1. Contract First (Contrato Primero)

Antes de tirar una línea de código en React o Laravel/Node:

- Define la estructura JSON de respuesta.
- Define los códigos de estado HTTP (200, 201, 400, 401, 500).
- **Herramientas**: OpenAPI (Swagger), o simplemente interfaces TypeScript compartidas/DTOs.

### 2. Type Safety Compartido

Si el backend cambia un campo de `user.name` a `user.fullName`, el frontend debe saberlo en tiempo de compilación.

- Usa generación de tipos si es posible.
- Si no, mantén los tipos de respuesta (`Interfaces`) en un lugar centralizado del frontend.

### 3. Gestión de Estado del Servidor

El estado del servidor (data de API) NO es igual al estado de UI (modales abiertos).

- **Recomendación**: Usa librerías como **TanStack Query (React Query)** o **SWR**.
- **Beneficios**: Caching, Re-intentos automáticos, deduplicación de requests.
- **Real-Time Integration**: Para aplicaciones web modernas, prefiere **Inertia.js v2** (unión fluida back/front) y **Laravel Reverb** para comunicación bi-direccional eficiente.

### 4. Manejo de Errores Consistente

El frontend no debe adivinar qué pasó.

- Backend: Devuelve `{ "message": "Email inválido", "code": "INVALID_EMAIL" }`.
- Frontend: Mapea códigos a mensajes de UI amigables. No muestres "Error 500" al usuario final sin explicación.

## Formato de Diseño de Integración

Cuando diseñes una feature fullstack:

### 1. Definición del Endpoint

`GET /api/products/:id`

- **Response**: `ProductDTO`

```typescript
interface ProductDTO {
  id: string;
  price: number; // Moneda base
  formattedPrice: string; // Ojo: ¿Formato en back o front? (Consenso: Back si es complejo)
}
```

### 2. Hook de Consumo (React Example)

```typescript
// useProduct.ts
const useProduct = (id: string) => {
  return useQuery({
    queryKey: ["product", id],
    queryFn: () => fetchProduct(id),
    onError: (error) => toast.error(parseError(error)),
  });
};
```

### 3. Adaptadores (Decoupling)

Si la API es legacy o fea, usa un adaptador (mapper) apenas recibas los datos para que tus componentes reciban datos limpios.