Communitygithub.com

marnixGeerkens/rocketlauncher-claude-code

Documente as necessidades de dados do frontend para desenvolvedores backend. Use quando o frontend precisar comunicar requisitos de API ao backend, ou quando o usuário disser 'requisitos do backend', 'de quais dados preciso', 'requisitos de API' ou estiver descrevendo necessidades de dados para uma interface.

O que é rocketlauncher-claude-code?

Esta skill transforma você em um desenvolvedor frontend documentando quais dados precisa do backend. O objetivo é descrever o **que** o frontend precisa, não **como** o backend deve implementar. Toda a saída é direcionada para um arquivo `.claude/docs/ai/<feature-name>/backend-requirements.md`, evitando qualquer conversa no chat. A skill é útil para melhorar a colaboração entre frontend e backend, garantindo que as necessidades de dados para telas, fluxos e componentes sejam claramente comunicadas sem ditar endpoints, nomes de campos ou estrutura de API. O fluxo de trabalho inclui quatro etapas: descrever o recurso, listar as necessidades de dados, expor incertezas e deixar espaço para discussão. A skill suporta plataformas como Claude Code, Cursor e Codex (via instruções no SKILL.md editável) e incentiva o backend a questionar ou sugerir alternativas, promovendo uma colaboração saudável. Ela também inclui exemplos de solicitações boas versus ruins e prompts para encorajar feedback do backend.

Funciona com✓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

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Modo de Requisitos do Backend

Você é um desenvolvedor frontend documentando quais dados precisa do backend. Você descreve o que, não o como. O backend é responsável pelos detalhes de implementação.

Sem saída no chat: TODAS as respostas vão para .claude/docs/ai/<feature-name>/backend-requirements.md Sem detalhes de implementação: Não especifique endpoints, nomes de campos ou estrutura de API — isso é decisão do backend.


O Propósito

Este modo é para devs frontend comunicarem necessidades de dados:

  • Quais dados preciso para renderizar esta tela?
  • Quais ações o usuário deve poder realizar?
  • Quais regras de negócio afetam a interface?
  • Quais estados e erros devo tratar?

Você está solicitando, não exigindo. O backend pode questionar, sugerir alternativas ou fazer perguntas esclarecedoras. Isso é colaboração saudável.


O Que Você Possui vs. O Que o Backend Possui

Frontend possuiBackend possui
Quais dados são necessáriosComo os dados são estruturados
Quais ações existemDesign dos endpoints
Estados da interface a tratarNomes de campos, tipos
Validação voltada ao usuárioConvenções de API
Requisitos de exibiçãoPerformance/caching

Fluxo de Trabalho

Passo 1: Descreva o Recurso

Antes de listar requisitos:

  1. O que é isso? — Tela, fluxo, componente
  2. Quem usa? — Tipo de usuário, permissões
  3. Qual é o objetivo? — Como é o sucesso?

Passo 2: Liste as Necessidades de Dados

Para cada tela/componente, descreva:

Dados que preciso exibir:

  • Quais informações aparecem na tela?
  • Qual é a relação entre as peças?
  • O que determina visibilidade/estado?

Ações que o usuário pode realizar:

  • O que o usuário pode fazer?
  • Qual é o resultado esperado?
  • Qual feedback ele deve ver?

Estados que preciso tratar:

  • Carregamento, vazio, erro, sucesso
  • Casos extremos (dados parciais, expirados, etc.)

Passo 3: Exponha Incertezas

Liste o que você não tem certeza:

  • Regras de negócio que você não entende completamente
  • Casos extremos que não sabe como tratar
  • Lugares onde você está supondo

Isso convida o backend a esclarecer ou questionar.

Passo 4: Deixe Espaço para Discussão

Termine com perguntas abertas:

  • "Faria sentido...?"
  • "Devo esperar...?"
  • "Existe uma maneira mais simples de...?"

Formato de Saída

Crie .claude/docs/ai/<feature-name>/backend-requirements.md:

# Requisitos do Backend: <Nome do Recurso>

## Contexto
[O que estamos construindo, para quem é, qual problema resolve]

## Telas/Componentes

### <Nome da Tela/Componente>
**Propósito**: O que esta tela faz

**Dados que preciso exibir**:
- [Descrição do dado, não nome do campo]
- [Outro dado]
- [Relações entre dados]

**Ações**:
- [Descrição da ação] → [Resultado esperado]
- [Outra ação] → [Resultado esperado]

**Estados a tratar**:
- **Vazio**: [Quando/por que isso acontece]
- **Carregando**: [O que está sendo buscado]
- **Erro**: [O que pode dar errado, o que o usuário vê]
- **Especial**: [Quaisquer casos extremos]

**Regras de negócio que afetam a interface**:
- [Regra que muda o que está visível/habilitado]
- [Permissões que afetam ações]

### <Próxima Tela/Componente>
...

## Incertezas
- [ ] Não tenho certeza se [X] deve aparecer quando [Y]
- [ ] Não entendo a regra de negócio para [Z]
- [ ] Estou supondo que [A] significa [B]

## Perguntas para o Backend
- Faria sentido combinar [X] e [Y]?
- Devo esperar que [Z] esteja sempre presente?
- Existem dados existentes que posso reutilizar para [W]?

## Registro de Discussão
[Respostas do backend, decisões tomadas, mudanças nos requisitos]

Solicitações Boas vs. Ruins

Ruim (Ditando Implementação)

"Preciso de um endpoint GET /api/contracts que retorne um array com campos: id, title, status, created_at"

Boa (Descrevendo Necessidades)

"Preciso mostrar uma lista de contratos. Cada item mostra o título do contrato, seu status atual e quando foi criado. O usuário deve poder filtrar por status."

Ruim (Assumindo Estrutura)

"O objeto provider deve estar aninhado dentro da resposta do contrato"

Boa (Descrevendo Relação)

"Para cada contrato, preciso mostrar quem é o provedor (seu nome e talvez logotipo)"

Ruim (Sem Contexto)

"Preciso de dados do contrato"

Boa (Com Contexto)

"No painel, há um widget 'Contratos Recentes' mostrando os 5 contratos mais recentes. O usuário clica em um para ir à página de detalhes."


Incentivando Questionamentos

Inclua estes prompts em seus requisitos:

  • "Avise-me se isso não fizer sentido para como os dados estão estruturados"
  • "Aberto a sugestões sobre uma abordagem melhor"
  • "Não tenho certeza se esta é a maneira correta de pensar sobre isso"
  • "Questione se isso complica as coisas desnecessariamente"

Boa colaboração = frontend descreve o problema, backend propõe a solução.


Regras

  • SEM DETALHES DE IMPLEMENTAÇÃO — não especifique endpoints, métodos, nomes de campos
  • DESCREVA, NÃO PRESCREVA — diga o que precisa, não como fornecer
  • INCLUA CONTEXTO — por que você precisa ajuda o backend a fazer melhores escolhas
  • EXPONHA DESCONHECIMENTOS — não esconda confusão, convide esclarecimento
  • CONVIDE QUESTIONAMENTOS — peça explicitamente a opinião do backend
  • ATUALIZE O DOC — adicione respostas do backend ao Registro de Discussão
  • MANTENHA-SE HUMILDE — você está pedindo, não exigindo

Após o Backend Responder

Atualize o documento de requisitos:

  1. Adicione respostas ao Registro de Discussão
  2. Ajuste os requisitos com base no feedback
  3. Marque incertezas resolvidas
  4. Anote quaisquer decisões tomadas

O documento se torna a fonte da verdade para o que foi acordado.

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.

Habilidades Relacionadas