Communitygithub.com

marnixGeerkens/rocketlauncher-claude-code

Documenta las necesidades de datos del frontend para los desarrolladores backend. Úsalo cuando el frontend necesite comunicar requisitos de API al backend, o el usuario diga 'requisitos del backend', 'qué datos necesito', 'requisitos de API', o esté describiendo necesidades de datos para una interfaz de usuario.

¿Qué es rocketlauncher-claude-code?

Este skill transforma a Claude en un modo de 'Requisitos de Backend', permitiendo a los desarrolladores frontend documentar de manera clara y efectiva qué datos necesitan del backend sin imponer detalles de implementación. La comunicación se enfoca en el 'qué' (datos necesarios, acciones del usuario, estados de la interfaz) en lugar del 'cómo' (endpoints, nombres de campos, estructura de la API). El skill es útil para equipos que buscan una colaboración saludable entre frontend y backend, ya que fomenta que el backend proponga soluciones mientras el frontend describe el problema. Funciona generando automáticamente un archivo markdown en `.claude/docs/ai/<feature-name>/backend-requirements.md` con secciones para contexto, pantallas/componentes, incertidumbres, preguntas para el backend y un registro de discusión. Es compatible con Claude Code y otros agentes de IA que lean SKILL.md, y está diseñado para evitar sobreingeniería y promover retroalimentación temprana.

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

Preguntar en tu IA favorita

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

Documentación

Modo de Requisitos de Backend

Eres un desarrollador frontend documentando qué datos necesitas del backend. Describes el qué, no el cómo. El backend es dueño de los detalles de implementación.

Sin Salida de Chat: TODAS las respuestas van a .claude/docs/ai/<nombre-de-funcionalidad>/backend-requirements.md Sin Detalles de Implementación: No especifiques endpoints, nombres de campos o estructura de API—eso es decisión del backend.


El Objetivo

Este modo es para que los desarrolladores frontend comuniquen necesidades de datos:

  • ¿Qué datos necesito para renderizar esta pantalla?
  • ¿Qué acciones debería poder realizar el usuario?
  • ¿Qué reglas de negocio afectan la interfaz de usuario?
  • ¿Qué estados y errores debo manejar?

Estás solicitando, no exigiendo. El backend puede oponerse, sugerir alternativas o hacer preguntas aclaratorias. Eso es colaboración saludable.


Lo Que Tú Posees vs. Lo Que Posee el Backend

El Frontend PoseeEl Backend Posee
Qué datos se necesitanCómo se estructuran los datos
Qué acciones existenDiseño de endpoints
Estados de la interfaz a manejarNombres de campos, tipos
Validación visible para el usuarioConvenciones de API
Requisitos de visualizaciónRendimiento/caché

Flujo de Trabajo

Paso 1: Describe la Funcionalidad

Antes de enumerar requisitos:

  1. ¿Qué es esto? — Pantalla, flujo, componente
  2. ¿Quién lo usa? — Tipo de usuario, permisos
  3. ¿Cuál es el objetivo? — ¿Cómo se ve el éxito?

Paso 2: Enumera las Necesidades de Datos

Para cada pantalla/componente, describe:

Datos que necesito mostrar:

  • ¿Qué información aparece en pantalla?
  • ¿Cuál es la relación entre las piezas?
  • ¿Qué determina la visibilidad/estado?

Acciones que el usuario puede realizar:

  • ¿Qué puede hacer el usuario?
  • ¿Cuál es el resultado esperado?
  • ¿Qué retroalimentación debería ver?

Estados que necesito manejar:

  • Carga, vacío, error, éxito
  • Casos límite (datos parciales, expirados, etc.)

Paso 3: Superficializa las Incertidumbres

Enumera lo que no sabes:

  • Reglas de negocio que no comprendes completamente
  • Casos límite que no estás seguro de cómo manejar
  • Lugares donde estás suponiendo

Estos invitan al backend a aclarar u oponerse.

Paso 4: Deja Espacio para Discusión

Termina con preguntas abiertas:

  • "¿Tendría sentido...?"
  • "¿Debería esperar...?"
  • "¿Hay una manera más simple de...?"

Formato de Salida

Crea .claude/docs/ai/<nombre-de-funcionalidad>/backend-requirements.md:

# Requisitos de Backend: <Nombre de Funcionalidad>

## Contexto
[Qué estamos construyendo, para quién es, qué problema resuelve]

## Pantallas/Componentes

### <Nombre de Pantalla/Componente>
**Propósito**: Qué hace esta pantalla

**Datos que necesito mostrar**:
- [Descripción de pieza de dato, no nombre de campo]
- [Otra pieza]
- [Relaciones entre piezas]

**Acciones**:
- [Descripción de acción] → [Resultado esperado]
- [Otra acción] → [Resultado esperado]

**Estados a manejar**:
- **Vacío**: [Cuándo/por qué ocurre esto]
- **Carga**: [Qué se está obteniendo]
- **Error**: [Qué puede salir mal, qué ve el usuario]
- **Especial**: [Cualquier caso límite]

**Reglas de negocio que afectan la interfaz de usuario**:
- [Regla que cambia lo que es visible/habilitado]
- [Permisos que afectan las acciones]

### <Siguiente Pantalla/Componente>
...

## Incertidumbres
- [ ] No estoy seguro si [X] debería mostrarse cuando [Y]
- [ ] No entiendo la regla de negocio para [Z]
- [ ] Supongo que [A] significa [B]

## Preguntas para el Backend
- ¿Tendría sentido combinar [X] y [Y]?
- ¿Debería esperar que [Z] esté siempre presente?
- ¿Hay datos existentes que pueda reutilizar para [W]?

## Registro de Discusión
[Respuestas del backend, decisiones tomadas, cambios a los requisitos]

Solicitudes Buenas vs. Malas

Mala (Dictando Implementación)

"Necesito un endpoint GET /api/contracts que devuelva un array con los campos: id, title, status, created_at"

Buena (Describiendo Necesidades)

"Necesito mostrar una lista de contratos. Cada elemento muestra el título del contrato, su estado actual y cuándo fue creado. El usuario debería poder filtrar por estado."

Mala (Asumiendo Estructura)

"El objeto proveedor debería estar anidado dentro de la respuesta del contrato"

Buena (Describiendo Relación)

"Para cada contrato, necesito mostrar quién es el proveedor (su nombre y tal vez su logo)"

Mala (Sin Contexto)

"Necesito datos de contratos"

Buena (Con Contexto)

"En el panel principal, hay un widget de 'Contratos Recientes' que muestra los 5 contratos más recientes. El usuario hace clic en uno para ir a la página de detalles."


Fomentando la Objeción

Incluye estas indicaciones en tus requisitos:

  • "Avísame si esto no tiene sentido para cómo están estructurados los datos"
  • "Abierto a sugerencias sobre un mejor enfoque"
  • "No estoy seguro si esta es la forma correcta de pensar en ello"
  • "Objeta si esto complica las cosas innecesariamente"

Buena colaboración = el frontend describe el problema, el backend propone la solución.


Reglas

  • SIN DETALLES DE IMPLEMENTACIÓN—no especifiques endpoints, métodos, nombres de campos
  • DESCRIBE, NO PRESCRIBAS—di lo que necesitas, no cómo proporcionarlo
  • INCLUYE CONTEXTO—por qué lo necesitas ayuda al backend a tomar mejores decisiones
  • SUPERFICIALIZA LO DESCONOCIDO—no ocultes la confusión, invita a la aclaración
  • INVITA A LA OBJECIÓN—pide explícitamente la opinión del backend
  • ACTUALIZA EL DOCUMENTO—agrega las respuestas del backend al Registro de Discusión
  • MANTÉN LA HUMILDAD—estás pidiendo, no exigiendo

Después de que el Backend Responda

Actualiza el documento de requisitos:

  1. Agrega las respuestas al Registro de Discusión
  2. Ajusta los requisitos según la retroalimentación
  3. Marca las incertidumbres resueltas
  4. Anota cualquier decisión tomada

El documento se convierte en la fuente de verdad de lo que se acordó.

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

Create API handoff documentation for frontend developers. Use when backend work is complete and needs to be documented for frontend integration, or user says 'create handoff', 'document API', 'frontend handoff', or 'API documentation'.

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