# Route Page Contract

> Route Page Contract

- Skill: `jjhenao2025/route-page-contract` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jjhenao2025/route-page-contract`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jjhenao2025/route-page-contract/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jjhenao2025 (https://skillmd.com/u/jjhenao2025)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/jjhenao2025/route-page-contract

---


# Route Page Contract

## Objetivo

Evitar pantallas incompletas (por ejemplo: existe page pero no endpoint, o menu apunta a componente inexistente).

## Flujo estandar

1. **Backend**
   - Crear/ajustar controlador.
   - Definir endpoint con validaciones basicas.
   - Definir schema/DTO de respuesta estable.
2. **Frontend**
   - Crear servicio/hook para consumir endpoint.
   - Crear page/componente con estados de carga/error/vacio.
   - Conectar filtros de UI con query params.
3. **Ruteo y menu**
   - Registrar componente en mapper.
   - Agregar ruta/menu en origen de navegacion.
4. **Verificacion**
   - Validar respuesta real del endpoint.
   - Validar que la ruta abra correctamente.
   - Validar lints en archivos tocados.

## Contrato minimo recomendado

- Request con nombres consistentes (`snake_case` backend, mapping claro si frontend usa camelCase).
- Response con campos estables y predecibles.
- Errores con formato uniforme.

## Antipatrones

- Crear UI antes de confirmar payload.
- Duplicar transformaciones en varios componentes.
- Registrar ruta sin mapear el componente.

## Checklist rapido

- [ ] Endpoint y schema creados
- [ ] Servicio frontend implementado
- [ ] Page conectada a servicio
- [ ] Ruta y menu registrados
- [ ] Estados loading/error/empty visibles
- [ ] Lint sin errores