← Zurück zum Überblick

Orchestrator & Phasen-Pipeline

Das 7-Phasen-Ausführungsmodell des Skills — vom Bootstrap bis zur Tiefenkarte

01

Die 7 Phasen im Überblick

Der Orchestrator steuert den gesamten Generierungsprozess über sieben sequentielle Phasen. Jede Phase hat klar definierte Eingaben, Ausgaben und Abbruchbedingungen. Keine Phase darf übersprungen werden — der Skill erzwingt die Reihenfolge.

🏗️ Phase 0 Bootstrap
🔍 Phase 1 Analyse
📋 Phase 2 Curriculum
🎨 Phase 3 Foundation
🔨 Phase 4 Build
Phase 5 Polish
🗺️ Phase 6 Tiefenkarte

Designentscheidung: Die Phasen 0–3 laufen strikt sequentiell. Phase 4 enthält parallele Sub-Pipelines pro Zielgruppe. Phasen 5–6 sind Nachbearbeitungsschritte, die auf dem vollständigen Output aller Pipelines operieren.

02

Phase 0–2: Vorbereitung

Die Vorbereitungsphasen laufen strikt sequentiell. Jede Phase muss vollständig abgeschlossen sein, bevor die nächste beginnt. Am Ende von Phase 2 steht das komplette Curriculum für alle Zielgruppen.

Phase 0 — Bootstrap
Quell-Identifikation
Der Skill erkennt automatisch, ob die Eingabe ein lokaler Pfad, eine GitHub-URL oder das aktuelle Arbeitsverzeichnis ist. Bei GitHub wird ein git clone ausgeführt.
HARD BLOCK: Weichen klären
Zwei Fragen müssen beantwortet werden, bevor Phase 1 startet: (1) Zielgruppen-Auswahl, (2) Integrationsmodus. Es gibt keine Standardwerte — der Skill blockiert.
Blocking
Phase 1 — Analyse

Deep Codebase Understanding: Der Skill liest alle relevanten Dateien, verfolgt Datenflüsse und identifiziert die „Hauptcharaktere“ der Software — zentrale Module, API-Endpunkte, Konfigurationsdateien und deren Beziehungen.

// Was Phase 1 erfasst: Sprachen & Frameworks → TypeScript, React, Express, ... Architektur-Pattern → Monolith, Microservices, Event-Driven, ... Datenflüsse → API → Service → Repository → DB Hauptcharaktere → Kernmodule, Einstiegspunkte, Konfiguration Abhängigkeiten → package.json, requirements.txt, go.mod, ...
Phase 2 — Curriculum

Pro Zielgruppe wird ein eigenständiges Curriculum erstellt. Jedes Modul erhält einen Helpfulness Score (HS), der bestimmt, ob eine Vertiefungsseite erstellt wird.

// Helpfulness Score Formel HS(topic, audience) = w1 * relevance(topic, audience.role) + w2 * complexity(topic) + w3 * dependency_count(topic) + w4 * source_depth(topic) // Gewichte (audience-abhängig): Entscheider: w1=0.5, w2=0.1, w3=0.1, w4=0.3 Anwender: w1=0.4, w2=0.2, w3=0.2, w4=0.2 Entwickler: w1=0.2, w2=0.3, w3=0.3, w4=0.2 // Schwellwert: HS ≥ 7 → Vertiefungsseite wird gebaut // Schwellwert: HS ≥ 5 → Thema bleibt im Curriculum, aber ohne eigene Seite // Schwellwert: HS < 5 → Thema wird übersprungen

Helpfulness Score (HS): Jedes Thema wird für jede Zielgruppe einzeln bewertet. Die Formel gewichtet vier Faktoren: Relevanz für die Rolle, Komplexität des Themas, Anzahl der Abhängigkeiten und Quellcode-Tiefe. Entwickler-Themen gewichten Komplexität und Abhängigkeiten stärker, Entscheider-Themen gewichten Relevanz und Quelltiefe stärker. Ab einem Score von 7 wird eine eigene Vertiefungsseite erstellt.

03

Phase 3: Das Design-System

Das CSS/JS-Fundament wird einmalig erstellt und dann in jede HTML-Datei eingebettet. Das Self-Contained-Prinzip: Jede Datei ist vollständig eigenständig — keine externen Stylesheets, keine Bundler, kein Build-Schritt.

🎨
CSS-Variablen
Farbpalette, Typografie, Abstände, Radien, Schatten — alles zentral in :root definiert. Änderungen an einer Stelle wirken global.
:root{}
📱
Responsive
Drei Breakpoints: Desktop (>768px), Tablet (480–768px), Mobile (<480px). Scroll-Snap für Module, flexible Grids für Karten.
@media
Animationen
Intersection-Observer-basierte Einblend-Animationen, staggered children, sanfte Hover-Transitions. Alles GPU-beschleunigt via transform.
IntersectionObserver
// Foundation-Komponenten (Phase 3 Output) CSS Variables --color-* // 18 Farbvariablen --font-* // 3 Font-Stacks (Display, Body, Mono) --text-* // 10 Größenstufen --space-* // 12 Abstandswerte --radius-* // 4 Border-Radien --shadow-* // 3 Schatten --ease-*, --duration-* // Timing Komponentenklassen .module, .module-hero // Sektionen .card, .cards-grid // Karten-Layouts .viz-box, .viz-flow // Visualisierungen .quiz, .quiz-option // Interaktive Quizzes .timeline, .file-tree // Code-Darstellungen .nav-deep, .breadcrumb // Navigation .deep-dive-link // Vertiefungs-Links .sibling-nav // Geschwister-Navigation JavaScript IntersectionObserver // Scroll-Animationen Quiz-Engine // Interaktive Tests Tooltip-System // Begriffserläuterungen Progress-Bar // Scrollfortschritt

Self-Contained Prinzip: Phase 3 erzeugt eine vollständige CSS/JS-Foundation mit 18 Farbvariablen, 3 Font-Stacks, 10 Größenstufen, 12 Abstandswerten und allen Komponentenklassen (Module, Karten, Visualisierungen, Quizzes, Navigation). Dazu kommen vier JavaScript-Systeme: Scroll-Animationen, Quiz-Engine, Tooltips und Progress-Bar. Dieses gesamte Paket wird in den <style>- und <script>-Block jeder einzelnen HTML-Datei kopiert.

Reihenfolge-Constraint: Phase 3 muss vor jeder HTML-Generierung abgeschlossen sein. Der Orchestrator prüft das explizit — wenn die Foundation nicht existiert, wird Phase 4 nicht gestartet.

04

Phase 4: Zielgruppen-Pipelines

Die Kerninnovation des Skills: Jede Zielgruppe erhält eine eigenständige, unabhängige Pipeline. Die Pipelines können parallel laufen (in der Praxis oft sequentiell, da der LLM-Kontext begrenzt ist). Innerhalb einer Pipeline wird Level für Level gebaut.

Pipeline-Übersicht: Zielgruppen × Tiefenstufen

📊 Entscheider
L0
L1
max L1
👤 Anwender
L0
L1
L2
max L2
🔧 Entwickler
L0
L1
L2
L3
max L3
// Pipeline-Ausführungsmodell for each audience in selected_audiences: for level in 0..audience.max_level: for theme in curriculum[audience][level]: if theme.hs_score ≥ threshold[level]: build_page(theme, audience, level, "de") build_page(theme, audience, level, "en") // Innerhalb eines Levels: Themen + Sprachen parallelisierbar // Nächstes Level erst nach Abschluss aller Seiten des aktuellen Levels // Pipeline unabhängig von anderen Pipelines // Wichtig: Pipelines sind voneinander UNABHÄNGIG // Die Entwickler-Pipeline kann L2 bauen, // während die Entscheider-Pipeline noch bei L0 ist.

Pipeline-Logik: Jede Zielgruppe durchläuft ihre Level sequentiell (L0 muss fertig sein, bevor L1 beginnt). Innerhalb eines Levels können Themen und Sprachversionen parallel gebaut werden. Die Pipelines verschiedener Zielgruppen sind vollständig unabhängig — die Entwickler-Pipeline kann bereits bei L2 sein, während die Entscheider-Pipeline noch L0 generiert.

✏️ Kurz getestet

Kann die Entwickler-Pipeline L2 bauen, während die Entscheider-Pipeline noch bei L0 ist?

Ja — die Pipelines sind unabhängig voneinander
Nein — alle Pipelines müssen auf dem gleichen Level sein
Nur wenn die Entscheider-Pipeline weniger Themen hat
Im Detail Phasen-Steuerung im Detail → Interne Zustandsmaschine, Fehlerbehandlung und Abbruchbedingungen der Pipeline
05

Phase 5–6: Abschluss

Die letzten zwei Phasen operieren auf dem gesamten Output aller Pipelines. Phase 5 stellt Konsistenz her, Phase 6 erzeugt den Transparenzbericht.

Phase 5: Polish
Audience-Switch-Links auf allen L0-Seiten einfügen • Alle Cross-Level-Links verifizieren (L0→L1→L2→...) Breadcrumbs auf Konsistenz prüfen • Alle relativen Pfade validieren (../l1/, ../l2/) Sprachversionen gegeneinander prüfen (DE ↔ EN)
🗺️
Phase 6: Tiefenkarte
Was wurde gebaut: Liste aller erzeugten HTML-Dateien Was wurde übersprungen: Themen mit HS < Schwellwert Warum: HS-Scores und Stop-Reasons pro Thema Statistiken: Dateien pro Zielgruppe, Levels, Sprachen • Output: tiefenkarte.html
// Tiefenkarte Output-Struktur tiefenkarte: audiences: - name: "Entwickler" max_level: 3 pages_built: 14 pages_skipped: 3 themes: - name: "Orchestrator" hs_score: 9.2 levels_built: [L0, L1, L2] stop_reason: "max_level_reached" - name: "Error Handling" hs_score: 4.1 levels_built: [] stop_reason: "hs_below_threshold"

Tiefenkarte: Der Transparenzbericht listet für jede Zielgruppe auf, welche Themen auf welchen Levels erstellt wurden, welche übersprungen wurden und warum. Jedes Thema enthält seinen HS-Score und den konkreten Stop-Reason (z.B. „Schwellwert nicht erreicht“ oder „maximale Tiefe erreicht“).

Weitere Vertiefungsseiten für Entwickler