Was macht pageforge?
Frontend-Autocode-Workflow – Claude Code Skill + Agent-Pipeline (PRD → Frontend-Code)
Beschreibung
Dieser Skill automatisiert den Prozess der Frontend-Code-Generierung aus einem PRD (Product Requirements Document). Er arbeitet als KI-gesteuerte Pipeline, die strukturierte Anforderungsdokumente in vollständigen, produktionsreifen Frontend-Code umwandelt.
Funktionen
- Automatische Generierung von Komponentenbäumen, Zustandsmanagement, API-Integrationen und Styling
- Nahtlose Integration mit Claude Code, Cursor, Codex und anderen KI-gestützten Entwicklungstools
- Standardisierte Ausgabe für konsistente Codequalität über verschiedene Projekte hinweg
- Schnelle Iteration durch automatische Code-Generierung aus aktualisierten PRDs
Voraussetzungen
- Claude Code (oder kompatible KI-gestützte Entwicklungsumgebung)
- Ein PRD-Dokument im Markdown-Format
- (Optional) Zugriff auf ein Versionskontrollsystem (Git)
Verwendung
- Erstelle ein PRD-Dokument mit detaillierten Spezifikationen für die Frontend-Komponente
- Starte den Skill in Claude Code mit dem Befehl:
pageforge <pfad-zum-prd.md> - Warte auf die automatische Generierung des Frontend-Codes
- Überprüfe und passe den generierten Code nach Bedarf an
Beispiel-PRD-Struktur
# PRD: Dashboard-Komponente
## Ziele
- Erstelle ein responsives Dashboard mit Echtzeit-Datenvisualisierung
- Unterstützung für mehrere Datenquellen
## Anforderungen
- Komponente: `Dashboard`
- Zustand: `dashboardState` mit Lade-, Fehler- und Erfolgszuständen
- API-Integration: `/api/v1/dashboard/data`
- Styling: Tailwind CSS, Dark Mode
Ausgabe
Der Skill generiert automatisch:
- Ein vollständiges Frontend-Komponentenverzeichnis
- Zustandsmanagement-Logik (z.B. mit Zustand, Redux, oder React Context)
- API-Integrationsschicht
- Testdateien (z.B. Jest/Vitest)
- Styling-Konfiguration (Tailwind, CSS Modules, o.ä.)
Lizenz
MIT