Communitygithub.com

Modo de Entrega de API

Crea documentación de transferencia de API para desarrolladores frontend. Úsalo cuando el trabajo backend esté completo y necesite ser documentado para la integración frontend, o cuando el usuario diga 'crear entrega', 'documentar API', 'entrega frontend' o 'documentación de API'.

¿Qué es Modo de Entrega de API?

Este skill (Modo de Entrega de API) está diseñado para desarrolladores backend que completan trabajo de API y necesitan producir documentación de transferencia estructurada para desarrolladores frontend o sus agentes de IA. El objetivo es proporcionar todo el contexto empresarial y técnico para que el frontend pueda construir la integración/UI sin necesidad de hacer preguntas al backend. El skill automatiza la creación de un archivo markdown en `.claude/docs/ai/<nombre-de-funcionalidad>/api-handoff.md`, siguiendo una plantilla completa que incluye contexto empresarial, endpoints, modelos de datos, enumeraciones, reglas de validación, lógica empresarial, notas de integración y escenarios de prueba. Es útil para equipos que buscan agilizar la colaboración backend-frontend, especialmente después de implementar endpoints, DTOs, validaciones y lógica empresarial. La salida es únicamente el bloque markdown de la transferencia, sin discusión ni explicación, y se escribe directamente en el archivo de entrega.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/marnixGeerkens/rocketlauncher-claude-code/tree/HEAD/components/skills/enterprise-communication/backend-to-frontend-handoff-docs

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

¿Qué hace Modo de Entrega de API?

Sin salida de chat: Produce únicamente el documento de entrega. Sin discusión, sin explicación: solo el bloque markdown guardado en el archivo de entrega.

Eres un desarrollador backend completando trabajo de API. Tu tarea es producir un documento de entrega estructurado que brinde a los desarrolladores frontend (o a su IA) todo el contexto empresarial y técnico para construir la integración/UI sin necesidad de hacer preguntas al backend.

Cuándo usarlo: Después de completar el trabajo de API backend (endpoints, DTOs, validación, lógica empresarial), ejecuta este modo para generar la documentación de entrega.

Atajo para API simple: Si la API es sencilla (CRUD, sin lógica empresarial compleja, validación obvia), omite la plantilla completa: solo proporciona el endpoint, el método y un ejemplo de solicitud/respuesta JSON. El frontend puede inferir el resto.

Objetivo

Producir un documento de entrega listo para copiar y pegar con todo el contexto que una IA frontend necesita para construir la UI/integración de manera correcta y segura.

Entradas

  • Código de API completado (endpoints, controladores, servicios, DTOs, validación).
  • Contexto empresarial relacionado de la tarea/historia de usuario.
  • Cualquier restricción, caso extremo o detalle descubierto durante la implementación.

Flujo de trabajo

  1. Recopilar contexto — confirmar nombre de la funcionalidad, endpoints relevantes, DTOs, reglas de autenticación y casos extremos.
  2. Crear/actualizar archivo de entrega — escribir el documento en .claude/docs/ai/<nombre-de-funcionalidad>/api-handoff.md. Incrementar el sufijo de iteración (-v2, -v3, …) si se vuelve a ejecutar después de recibir comentarios.
  3. Pegar plantilla — completar cada sección a continuación con datos concretos. Omitir subsecciones solo cuando realmente no sean aplicables (anotar por qué).
  4. Verificar — asegurarse de que los payloads coincidan con el comportamiento real de la API, los ámbitos de autenticación sean precisos y las enumeraciones/validación reflejen la lógica backend.

Formato de salida

Producir un único bloque markdown estructurado de la siguiente manera. Mantenerlo denso, sin relleno ni repeticiones.


# Entrega de API: [Nombre de la funcionalidad]

## Contexto empresarial
[2-4 oraciones: ¿Qué problema resuelve? ¿Quién lo usa? ¿Por qué es importante? Incluir cualquier término de dominio que el frontend necesite entender.]

## Endpoints

### [MÉTODO] /ruta/al/endpoint
- **Propósito**: [1 línea: qué hace]
- **Autenticación**: [rol/permiso requerido, o "público"]
- **Solicitud**:
  ```json
  {
    "campo": "tipo — descripción, restricciones"
  }
  • Respuesta (éxito):
    {
      "campo": "tipo — descripción"
    }
    
  • Respuesta (error): [códigos HTTP y formatos, ej. 422 error de validación, 404 no encontrado]
  • Notas: [casos extremos, límites de velocidad, paginación, ordenación, cualquier cosa no obvia]

[Repetir para cada endpoint]

Modelos de datos / DTOs

[Enumerar los modelos/DTOs clave que el frontend recibirá o enviará. Incluir tipos de campo, nulabilidad, enumeraciones y significado empresarial.]

// Forma de ejemplo para tipado frontend
interface EjemploDto {
  id: number;
  estado: 'pendiente' | 'aprobado' | 'rechazado';
  creadoEn: string; // ISO 8601
}

Enumeraciones y constantes

[Enumerar cualquier enumeración, código de estado o valor mágico que el frontend necesite conocer. Incluir etiquetas de visualización si corresponde.]

ValorSignificadoEtiqueta de visualización
pendientePendiente de revisiónPendiente

Reglas de validación

[Resumir las reglas de validación clave que el frontend debería reflejar para la UX: campos obligatorios, mínimo/máximo, formatos, reglas condicionales.]

Lógica empresarial y casos extremos

  • [Enumerar cada comportamiento, restricción o detalle no obvio]
  • [Ej.: "El usuario solo puede enviar una vez al día", "Elementos eliminados de forma suave se excluyen por defecto"]

Notas de integración

  • Flujo recomendado: [Ej.: "Obtener lista → seleccionar elemento → enviar formulario → consultar estado"]
  • UI optimista: [seguro o no, por qué]
  • Almacenamiento en caché: [cualquier encabezado de caché, desencadenantes de invalidación]
  • Tiempo real: [eventos websocket, intervalos de sondeo si corresponde]

Escenarios de prueba

[Escenarios clave que el frontend debe manejar: camino feliz, errores, casos extremos. Usar como criterios de aceptación o casos de prueba.]

  1. Camino feliz: [breve descripción]
  2. Error de validación: [qué lo desencadena, respuesta esperada]
  3. No encontrado: [cuándo se devuelve 404]
  4. Permiso denegado: [cuándo se devuelve 403]

Preguntas abiertas / Tareas pendientes

[Cualquier cosa no resuelta, pendiente de decisión del PM, o que necesite entrada del frontend. Si no hay ninguna, omitir la sección.]


---

## Reglas
- **SIN SALIDA DE CHAT** — producir solo el bloque markdown de entrega, nada más.
- Ser preciso: tipos, restricciones, ejemplos — no prosa vaga.
- Incluir payloads de ejemplo reales cuando sea útil.
- Destacar comportamientos no obvios — no asumir que el frontend "sabrá".
- Si el backend hizo concesiones o suposiciones, documentarlas.
- Mantenerlo escaneable: encabezados, tablas, viñetas, bloques de código.
- Sin detalles de implementación backend (rutas de archivo, nombres de clase, servicios internos) a menos que sean directamente relevantes para la integración.
- Si algo está incompleto o por determinar, decirlo explícitamente.

## Después de generar
Escribir el markdown final en el archivo de entrega solamente — no mostrarlo en el chat. (Si la plataforma requiere confirmación, referenciar la ruta del archivo en lugar de pegar el contenido.)

Individual skills in this repo

This repo contains 13 individual skills — each has its own dedicated page.

marnixGeerkens/rocketlauncher-claude-code

When the user wants to optimize, improve, or increase conversions on any marketing page — including homepage, landing pages, pricing pages, feature pages, or blog posts. Also use when the user says "CRO," "conversion rate optimization," "this page isn't converting," "improve conversions," or "why isn't this page working." For signup/registration flows, see signup-flow-cro. For post-signup activation, see onboarding-cro. For forms outside of signup, see form-cro. For popups/modals, see popup-cro.

marnixGeerkens/rocketlauncher-claude-code

Balance visual design with ATS compatibility for creative roles. Use when the user is in design, art, writing, marketing creative, or any visual/creative field and needs a resume that looks distinctive but still parses.

marnixGeerkens/rocketlauncher-claude-code

Transform resume bullets into detailed portfolio case studies with context, action, and outcome. Use when the user mentions portfolio, case study, project write-up, or expanding a resume bullet into a longer narrative.

marnixGeerkens/rocketlauncher-claude-code

Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.

marnixGeerkens/rocketlauncher-claude-code

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

marnixGeerkens/rocketlauncher-claude-code

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

marnixGeerkens/rocketlauncher-claude-code

Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.

marnixGeerkens/rocketlauncher-claude-code

Next.js App Router principles. Server Components, data fetching, routing patterns.

marnixGeerkens/rocketlauncher-claude-code

Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.

marnixGeerkens/rocketlauncher-claude-code

Document frontend data needs for backend developers. Use when frontend needs to communicate API requirements to backend, or user says 'backend requirements', 'what data do I need', 'API requirements', or is describing data needs for a UI.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive Python library for astronomy and astrophysics. This skill should be used when working with astronomical data including celestial coordinates, physical units, FITS files, cosmological calculations, time systems, tables, world coordinate systems (WCS), and astronomical data analysis. Use when tasks involve coordinate transformations, unit conversions, FITS file manipulation, cosmological distance calculations, time scale conversions, or astronomical data processing.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

Skills relacionados