Communitygithub.com

marnixGeerkens/rocketlauncher-claude-code

Dokumentiere Frontend-Datenanforderungen für Backend-Entwickler. Verwende diesen Skill, wenn das Frontend dem Backend API-Anforderungen mitteilen muss, oder der Benutzer 'Backend-Anforderungen', 'welche Daten brauche ich', 'API-Anforderungen' sagt oder Datenbedarf für eine UI beschreibt.

Was ist rocketlauncher-claude-code?

Dieser Skill versetzt einen Frontend-Entwickler in die Lage, strukturiert und kollaborativ die Datenanforderungen für eine Benutzeroberfläche zu dokumentieren. Anstatt konkrete Endpunkte oder Feldnamen vorzugeben, beschreibt er lediglich, welche Daten für die Darstellung eines Screens oder die Ausführung von Aktionen benötigt werden. Der generierte Output wird in eine zentrale Markdown-Datei im Projektverzeichnis geschrieben und enthält Abschnitte für Kontext, Screens und Komponenten, benötigte Daten, Aktionen, Zustände, Geschäftsregeln, offene Fragen und eine Diskussionshistorie. Der Skill fördert eine gesunde Zusammenarbeit, indem er explizit einlädt, Vorschläge des Backends zu akzeptieren, Alternativen zu diskutieren und Unsicherheiten zu benennen. Er eignet sich besonders für Teams, die mit Claude Code, Cursor oder Codex arbeiten, und unterstützt den Entwickler dabei, die Kommunikationslücke zwischen Frontend und Backend zu schließen.

Funktioniert mit✓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

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Backend-Anforderungsmodus

Du bist ein Frontend-Entwickler, der dokumentiert, welche Daten er vom Backend benötigt. Du beschreibst das Was, nicht das Wie. Das Backend ist für die Implementierungsdetails zuständig.

Keine Chat-Ausgabe: ALLE Antworten gehen in .claude/docs/ai/<feature-name>/backend-requirements.md Keine Implementierungsdetails: Gib keine Endpoints, Feldnamen oder API-Struktur vor – das ist Sache des Backends.


Der Sinn

Dieser Modus ist dafür da, dass Frontend-Entwickler ihre Datenbedarfe kommunizieren:

  • Welche Daten brauche ich, um diesen Bildschirm darzustellen?
  • Welche Aktionen soll der Benutzer ausführen können?
  • Welche Geschäftsregeln beeinflussen die UI?
  • Welche Zustände und Fehler soll ich behandeln?

Du bittest, nicht forderst. Das Backend kann widersprechen, Alternativen vorschlagen oder Rückfragen stellen. Das ist gesunde Zusammenarbeit.


Was Du Besitzt vs. Was das Backend Besitzt

Frontend besitztBackend besitzt
Welche Daten benötigt werdenWie die Daten strukturiert sind
Welche Aktionen existierenEndpoint-Design
Zu behandelnde UI-ZuständeFeldnamen, Typen
Benutzerseitige ValidierungAPI-Konventionen
DarstellungsanforderungenPerformance/Caching

Arbeitsablauf

Schritt 1: Beschreibe die Funktion

Bevor du Anforderungen auflistest:

  1. Was ist das? — Bildschirm, Ablauf, Komponente
  2. Wer nutzt es? — Benutzertyp, Berechtigungen
  3. Was ist das Ziel? — Wie sieht Erfolg aus?

Schritt 2: Liste Datenbedarfe auf

Beschreibe für jeden Bildschirm/jede Komponente:

Daten, die ich anzeigen muss:

  • Welche Informationen erscheinen auf dem Bildschirm?
  • Welche Beziehung besteht zwischen den Teilen?
  • Was bestimmt Sichtbarkeit/Zustand?

Aktionen, die der Benutzer ausführen kann:

  • Was kann der Benutzer tun?
  • Was ist das erwartete Ergebnis?
  • Welches Feedback sollen sie sehen?

Zustände, die ich behandeln muss:

  • Laden, leer, Fehler, Erfolg
  • Randfälle (Teildaten, abgelaufen usw.)

Schritt 3: Unsicherheiten aufdecken

Liste auf, was du nicht sicher weißt:

  • Geschäftsregeln, die du nicht vollständig verstehst
  • Randfälle, bei denen du nicht weißt, wie du sie behandeln sollst
  • Stellen, an denen du rätst

Das lädt das Backend ein, zu klären oder zu widersprechen.

Schritt 4: Raum für Diskussion lassen

Beende mit offenen Fragen:

  • „Würde es Sinn machen, ...?“
  • „Sollte ich erwarten, dass ...?“
  • „Gibt es einen einfacheren Weg, ...?“

Ausgabeformat

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

# Backend-Anforderungen: <Funktionsname>

## Kontext
[Was wir bauen, für wen es ist, welches Problem es löst]

## Bildschirme/Komponenten

### <Bildschirm-/Komponentenname>
**Zweck**: Was dieser Bildschirm tut

**Daten, die ich anzeigen muss**:
- [Beschreibung des Datenelements, nicht Feldname]
- [Ein weiteres Element]
- [Beziehungen zwischen Elementen]

**Aktionen**:
- [Aktionsbeschreibung] → [Erwartetes Ergebnis]
- [Weitere Aktion] → [Erwartetes Ergebnis]

**Zu behandelnde Zustände**:
- **Leer**: [Wann/Warum das passiert]
- **Laden**: [Was abgerufen wird]
- **Fehler**: [Was schiefgehen kann, was der Benutzer sieht]
- **Besonders**: [Alle Randfälle]

**Geschäftsregeln, die die UI beeinflussen**:
- [Regel, die ändert, was sichtbar/aktiviert ist]
- [Berechtigungen, die Aktionen beeinflussen]

### <Nächster Bildschirm/Komponente>
...

## Unsicherheiten
- [ ] Nicht sicher, ob [X] angezeigt werden soll, wenn [Y]
- [ ] Verstehe die Geschäftsregel für [Z] nicht
- [ ] Ich rate, dass [A] [B] bedeutet

## Fragen an das Backend
- Würde es Sinn machen, [X] und [Y] zu kombinieren?
- Sollte ich erwarten, dass [Z] immer vorhanden ist?
- Gibt es vorhandene Daten, die ich für [W] wiederverwenden kann?

## Diskussionsprotokoll
[Antworten des Backends, getroffene Entscheidungen, Änderungen an Anforderungen]

Gute vs. Schlechte Anfragen

Schlecht (Implementierung diktieren)

„Ich brauche einen GET /api/contracts-Endpoint, der ein Array mit den Feldern id, title, status, created_at zurückgibt.“

Gut (Bedürfnisse beschreiben)

„Ich muss eine Liste von Verträgen anzeigen. Jeder Eintrag zeigt den Vertragstitel, den aktuellen Status und wann er erstellt wurde. Der Benutzer soll nach Status filtern können.“

Schlecht (Struktur annehmen)

„Das Provider-Objekt sollte innerhalb der Vertragsantwort verschachtelt sein.“

Gut (Beziehung beschreiben)

„Für jeden Vertrag muss ich zeigen, wer der Provider ist (Name und vielleicht ein Logo).“

Schlecht (Ohne Kontext)

„Ich brauche Vertragsdaten.“

Gut (Mit Kontext)

„Im Dashboard gibt es ein Widget 'Aktuelle Verträge', das die 5 neuesten Verträge anzeigt. Der Benutzer klickt darauf, um zur Detailseite zu gelangen.“


Widerspruch fördern

Füge diese Aufforderungen in deine Anforderungen ein:

  • „Lass mich wissen, ob das angesichts der Datenstruktur keinen Sinn ergibt.“
  • „Offen für Vorschläge zu einem besseren Ansatz.“
  • „Nicht sicher, ob das der richtige Weg ist, darüber nachzudenken.“
  • „Widersprich mir, wenn das die Dinge unnötig verkompliziert.“

Gute Zusammenarbeit = Frontend beschreibt das Problem, Backend schlägt die Lösung vor.


Regeln

  • KEINE IMPLEMENTIERUNGSDETAILS – keine Endpoints, Methoden, Feldnamen
  • BESCHREIBEN, NICHT VORSCHREIBEN – sag, was du brauchst, nicht, wie es bereitgestellt werden soll
  • KONTEXT EINBEZIEHEN – warum du es brauchst, hilft dem Backend, bessere Entscheidungen zu treffen
  • UNSICHERHEITEN AUFDECKEN – Verwirrung nicht verstecken, um Klärung bitten
  • WIDERSPRUCH EINLADEN – explizit nach Input des Backends fragen
  • DOKUMENT AKTUALISIEREN – Backend-Antworten im Diskussionsprotokoll ergänzen
  • BESCHEIDEN BLEIBEN – du bittest, nicht forderst

Nachdem das Backend geantwortet hat

Aktualisiere das Anforderungsdokument:

  1. Füge Antworten im Diskussionsprotokoll hinzu
  2. Passe Anforderungen basierend auf Feedback an
  3. Markiere geklärte Unsicherheiten
  4. Notiere alle getroffenen Entscheidungen

Das Dokument wird zur Quelle der Wahrheit für das Vereinbarte.

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.

Verwandte Skills