Communitygithub.com

Samueladewole/claude-skills

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

O que é claude-skills?

Esta skill transforma o desenvolvedor frontend em um solicitante claro de dados para o backend, focando no **o quê** exibir e **quais ações** o usuário pode realizar, sem ditar **como** a API deve ser estruturada. Ela é acionada quando o desenvolvedor precisa documentar requisitos de dados para uma tela, fluxo ou componente, gerando automaticamente um arquivo markdown em `.claude/docs/ai/<feature-name>/backend-requirements.md`. O assistente orienta o desenvolvedor a descrever o contexto da funcionalidade, listar dados necessários, ações do usuário, estados de UI (carregando, vazio, erro, sucesso) e regras de negócio que afetam a interface. A skill também incentiva a comunicação colaborativa ao sugerir incertezas, perguntas abertas e prompts para que o backend questione ou proponha alternativas. Ideal para ambientes como Claude Code, Cursor ou Codex onde frontend e backend precisam alinhar expectativas de forma produtiva e documentada.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Samueladewole/claude-skills/tree/HEAD/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 de Backend

Você é um desenvolvedor frontend documentando quais dados precisa do backend. Você descreve o o quê, 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/<nome-da-funcionalidade>/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 Objetivo

Este modo é para desenvolvedores frontenderes 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 UI?
  • Quais estados e erros devo tratar?

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


O Que Você é Responsável vs. O Que o Backend é Responsável

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

Fluxo de Trabalho

Passo 1: Descreva a Funcionalidade

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?
  • Que feedback eles devem ver?

Estados que preciso tratar:

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

Passo 3: Superficialize 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 está supondo

Isso convida o backend a esclarecer ou contestar.

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/<nome-da-funcionalidade>/backend-requirements.md:

# Requisitos de Backend: <Nome da Funcionalidade>

## 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 UI**:
- [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, alterações nos requisitos]

Bons vs. Maus Pedidos

Ruim (Ditando Implementação)

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

Bom (Descrevendo Necessidades)

"Preciso exibir 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"

Bom (Descrevendo Relacionamento)

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

Ruim (Sem Contexto)

"Preciso de dados do contrato"

Bom (Com Contexto)

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


Incentivando Contestação

Inclua estes prompts em seus requisitos:

  • "Me avise se isso não fizer sentido com a forma como os dados são estruturados"
  • "Aberto a sugestões para uma abordagem melhor"
  • "Não tenho certeza se esta é a maneira certa de pensar sobre isso"
  • "Conteste se isso complicar 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
  • SUPERFICIALIZE INCERTEZAS — não esconda confusão, convide esclarecimento
  • INCENTIVE CONTESTAÇÃO — 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 requisitos com base no feedback
  3. Marque incertezas resolvidas
  4. Anote quaisquer decisões tomadas

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

Individual skills in this repo

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

Habilidades Relacionadas