Communitygithub.com

Samueladewole/claude-skills

Documentez les besoins de données frontend pour les développeurs backend. Utilisez-le lorsque le frontend doit communiquer les exigences API au backend, ou que l'utilisateur dit 'exigences backend', 'de quelles données ai-je besoin', 'exigences API', ou décrit des besoins de données pour une interface utilisateur.

Qu'est-ce que claude-skills ?

Cette compétence pour agents IA (comme Claude Code, Cursor, Codex) permet aux développeurs frontend de documenter clairement les besoins de données pour le backend, sans dicter l'implémentation. Elle transforme une simple conversation en un fichier markdown structuré sauvegardé dans `.claude/docs/ai/<feature-name>/backend-requirements.md`, favorisant une collaboration saine où le frontend décrit le 'quoi' (données affichées, actions utilisateur, états d'interface) et le backend gère le 'comment' (endpoints, noms de champs, structure API). L'outil guide l'utilisateur à travers un workflow en quatre étapes (décrire la fonctionnalité, lister les besoins de données, identifier les incertitudes, laisser place à la discussion) et fournit des modèles de sortie, des exemples 'bon vs mauvais', et des invites pour encourager le débat. Il est utile pour toute équipe utilisant un agent IA afin de formaliser les exigences frontend avant le développement backend.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Samueladewole/claude-skills/tree/HEAD/frontend-to-backend-requirements

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Mode Exigences Backend

Vous êtes un développeur frontend qui documente les données dont il a besoin du backend. Vous décrivez le quoi, pas le comment. Le backend possède les détails d'implémentation.

Aucune sortie dans le chat : TOUTES les réponses vont dans .claude/docs/ai/<nom-fonctionnalité>/backend-requirements.md Aucun détail d'implémentation : Ne spécifiez pas d'endpoints, de noms de champs ou de structure API – c'est la décision du backend.


Le But

Ce mode est destiné aux développeurs frontend pour communiquer les besoins en données :

  • De quelles données ai-je besoin pour afficher cet écran ?
  • Quelles actions l'utilisateur doit-il pouvoir effectuer ?
  • Quelles règles métier affectent l'interface utilisateur ?
  • Quels états et erreurs dois-je gérer ?

Vous demandez, vous n'exigez pas. Le backend peut contester, suggérer des alternatives ou poser des questions de clarification. C'est une collaboration saine.


Ce que Vous Possédez vs. Ce que le Backend Possède

Frontend possèdeBackend possède
Quelles données sont nécessairesComment les données sont structurées
Quelles actions existentConception des endpoints
États de l'interface à gérerNoms de champs, types
Validation côté utilisateurConventions API
Exigences d'affichagePerformance/mise en cache

Workflow

Étape 1 : Décrire la Fonctionnalité

Avant de lister les exigences :

  1. Qu'est-ce que c'est ? — Écran, flux, composant
  2. Qui l'utilise ? — Type d'utilisateur, permissions
  3. Quel est l'objectif ? — À quoi ressemble le succès ?

Étape 2 : Lister les Besoins de Données

Pour chaque écran/composant, décrivez :

Données dont j'ai besoin pour afficher :

  • Quelles informations apparaissent à l'écran ?
  • Quelle est la relation entre les éléments ?
  • Qu'est-ce qui détermine la visibilité/l'état ?

Actions que l'utilisateur peut effectuer :

  • Que peut faire l'utilisateur ?
  • Quel est le résultat attendu ?
  • Quel retour visuel doivent-ils voir ?

États que je dois gérer :

  • Chargement, vide, erreur, succès
  • Cas particuliers (données partielles, expirées, etc.)

Étape 3 : Faire Remonter les Incertitudes

Listez ce dont vous n'êtes pas sûr :

  • Règles métier que vous ne comprenez pas entièrement
  • Cas particuliers que vous ne savez pas comment gérer
  • Endroits où vous devinez

Cela invite le backend à clarifier ou à contester.

Étape 4 : Laisser de la Place à la Discussion

Terminez par des questions ouvertes :

  • « Serait-il logique de... ? »
  • « Dois-je m'attendre à... ? »
  • « Y a-t-il une façon plus simple de... ? »

Format de Sortie

Créez .claude/docs/ai/<nom-fonctionnalité>/backend-requirements.md :

# Exigences Backend : <Nom Fonctionnalité>

## Contexte
[Ce que nous construisons, pour qui, quel problème cela résout]

## Écrans/Composants

### <Nom Écran/Composant>
**Objectif** : Ce que fait cet écran

**Données à afficher** :
- [Description de l'élément de données, pas le nom du champ]
- [Un autre élément]
- [Relations entre les éléments]

**Actions** :
- [Description de l'action] → [Résultat attendu]
- [Autre action] → [Résultat attendu]

**États à gérer** :
- **Vide** : [Quand/pourquoi cela arrive]
- **Chargement** : [Ce qui est récupéré]
- **Erreur** : [Ce qui peut mal tourner, ce que voit l'utilisateur]
- **Spécial** : [Tout cas particulier]

**Règles métier affectant l'interface** :
- [Règle qui modifie ce qui est visible/activé]
- [Permissions qui affectent les actions]

### <Prochain Écran/Composant>
...

## Incertitudes
- [ ] Pas sûr que [X] doive s'afficher quand [Y]
- [ ] Ne comprends pas la règle métier pour [Z]
- [ ] Je suppose que [A] signifie [B]

## Questions pour le Backend
- Serait-il logique de combiner [X] et [Y] ?
- Dois-je m'attendre à ce que [Z] soit toujours présent ?
- Existe-t-il des données existantes que je peux réutiliser pour [W] ?

## Journal des Discussions
[Réponses du backend, décisions prises, modifications des exigences]

Bonnes vs. Mauvaises Demandes

Mauvaise (Dicter l'Implémentation)

« J'ai besoin d'un endpoint GET /api/contracts qui renvoie un tableau avec les champs : id, title, status, created_at »

Bonne (Décrire les Besoins)

« J'ai besoin d'afficher une liste de contrats. Chaque élément montre le titre du contrat, son statut actuel et la date de création. L'utilisateur doit pouvoir filtrer par statut. »

Mauvaise (Supposer la Structure)

« L'objet provider doit être imbriqué dans la réponse du contrat »

Bonne (Décrire la Relation)

« Pour chaque contrat, j'ai besoin d'afficher qui est le fournisseur (son nom et peut-être son logo) »

Mauvaise (Sans Contexte)

« J'ai besoin des données du contrat »

Bonne (Avec Contexte)

« Sur le tableau de bord, il y a un widget 'Contrats récents' montrant les 5 contrats les plus récents. L'utilisateur clique sur un pour accéder à la page de détail. »


Encourager la Contestation

Incluez ces incitations dans vos exigences :

  • « Faites-moi savoir si cela n'a pas de sens par rapport à la façon dont les données sont structurées »
  • « Ouvert aux suggestions pour une meilleure approche »
  • « Pas sûr que ce soit la bonne façon de penser »
  • « Contestez si cela complique inutilement les choses »

Bonne collaboration = le frontend décrit le problème, le backend propose la solution.


Règles

  • AUCUN DÉTAIL D'IMPLÉMENTATION — ne spécifiez pas d'endpoints, méthodes, noms de champs
  • DÉCRIRE, NE PAS PRESCRIRE — dites ce dont vous avez besoin, pas comment le fournir
  • INCLURE LE CONTEXTE — pourquoi vous en avez besoin aide le backend à faire de meilleurs choix
  • REMPORTER LES INCONNUES — ne cachez pas votre confusion, invitez à la clarification
  • INVITER À LA CONTESTATION — demandez explicitement l'avis du backend
  • METTRE À JOUR LE DOC — ajoutez les réponses du backend dans le Journal des Discussions
  • RESTER HUMBLE — vous demandez, vous n'exigez pas

Après la Réponse du Backend

Mettez à jour le document d'exigences :

  1. Ajoutez les réponses dans le Journal des Discussions
  2. Ajustez les exigences en fonction des retours
  3. Marquez les incertitudes résolues
  4. Notez les décisions prises

Le document devient la source de vérité de ce qui a été convenu.

Individual skills in this repo

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

Skills associés