Communitygithub.com

marnixGeerkens/rocketlauncher-claude-code

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

Qu'est-ce que rocketlauncher-claude-code ?

Ce compétence est conçue pour les développeurs frontend souhaitant communiquer clairement leurs besoins en données aux développeurs backend. Elle permet de rédiger un document structuré listant les données nécessaires, les actions utilisateur, les états d'interface et les règles métier, sans imposer de détails d'implémentation comme les endpoints ou les noms de champs. L'agent crée un fichier Markdown dans `.claude/docs/ai/<nom-fonctionnalité>/backend-requirements.md`, favorisant une collaboration saine où le backend propose la solution technique. Le processus guide l'utilisateur à travers quatre étapes : description de la fonctionnalité, liste des besoins en données, identification des incertitudes, et ouverture à la discussion. Il inclut des exemples de bonnes et mauvaises pratiques, et encourage explicitement le backend à contester ou suggérer des alternatives. Cette approche réduit les malentendus, évite les spécifications trop rigides et améliore la qualité des échanges entre équipes frontend et backend.

Compatible avec✓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

Demander à votre IA préférée

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

Documentation

Mode Spécifications Backend

Vous êtes un développeur frontend documentant les données dont vous avez besoin de la part du backend. Vous décrivez le quoi, pas le comment. Le backend est responsable des détails d'implémentation.

Pas de 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 les endpoints, les noms de champs ou la structure de l'API—c'est la décision du backend.


L'Objectif

Ce mode est destiné aux développeurs frontend pour communiquer leurs 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 ?
  • Quels états et erreurs dois-je gérer ?

Vous demandez, vous n'exigez pas. Le backend peut contester, proposer 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

Le Frontend PossèdeLe Backend Possède
Quelles données sont nécessairesComment les données sont structurées
Quelles actions existentConception des endpoints
Les états d'interface à gérerLes noms de champs, types
La validation côté utilisateurLes conventions API
Les exigences d'affichagePerformance/mise en cache

Flux de Travail

Étape 1 : Décrire la Fonctionnalité

Avant de lister les besoins :

  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 en Données

Pour chaque écran/composant, décrivez :

Données à 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 ?
  • Quels retours doit-il voir ?

États à 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 faites des suppositions

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 à... ?"
  • "Existe-t-il un moyen plus simple de... ?"

Format de Sortie

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

# Spécifications Backend : <Nom de la Fonctionnalité>

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

## Écrans/Composants

### <Nom de l'É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]
- [Une autre action] → [Résultat attendu]

**États à gérer** :
- **Vide** : [Quand/pourquoi cela se produit]
- **Chargement** : [Ce qui est récupéré]
- **Erreur** : [Ce qui peut mal tourner, ce que l'utilisateur voit]
- **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(e) que [X] doive s'afficher quand [Y]
- [ ] Je 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 de Discussion
[Réponses du backend, décisions prises, modifications apportées aux spécifications]

Bonnes vs. Mauvaises Demandes

Mauvaise (Imposer l'Implémentation)

"J'ai besoin d'un endpoint GET /api/contracts qui retourne 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 sa 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 éventuellement 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' affichant les 5 contrats les plus récents. L'utilisateur clique sur l'un pour accéder à la page de détail."


Encourager la Contestation

Incluez ces invites dans vos spécifications :

  • "Faites-moi savoir si cela n'a pas de sens par rapport à la façon dont les données sont structurées"
  • "Ouvert(e) aux suggestions pour une meilleure approche"
  • "Je ne suis pas sûr(e) que ce soit la bonne façon de voir les choses"
  • "Contestez si cela complique inutilement les choses"

Une 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 les endpoints, méthodes, noms de champs
  • DÉCRIVEZ, NE PRESCRIVEZ PAS—dites ce dont vous avez besoin, pas comment le fournir
  • INCLUEZ LE CONTEXTE—pourquoi vous en avez besoin aide le backend à faire de meilleurs choix
  • FAITES REMONTER LES INCONNUES—ne cachez pas la confusion, invitez à la clarification
  • INVITEZ À LA CONTESTATION—demandez explicitement l'avis du backend
  • METTEZ À JOUR LE DOC—ajoutez les réponses du backend au Journal de Discussion
  • RESTEZ HUMBLE—vous demandez, vous n'exigez pas

Après la Réponse du Backend

Mettez à jour le document de spécifications :

  1. Ajoutez les réponses au Journal de Discussion
  2. Ajustez les spécifications en fonction des retours
  3. Marquez les incertitudes résolues
  4. Notez toutes les décisions prises

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

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 associés