Roadmap & Status

Phase 1 — Foundation

Die Basis: saubere Manifeste, Naming-Standard, funktionierender Werkstatt-Export, ausgelagerte Werkstatt-Datei.

• Naming-Standard in CLAUDE.md PascalCase Component-Name, kebab-case Manifest-File und Showcase-URL, fixes Mapping. Mehr-Wort-Namen IMMER mit Bindestrich.
• 53 Manifeste auf Schema v2 useCases als kebab-case-Slugs aus registry/use-cases.json (61 Slugs in 9 Kategorien), editorialRules als Object, relatedComponents PascalCase. 16 Manifeste branche-bereinigt (klima/oepnv/foerder/lade-app raus).
• registry/index.json generiert Component-Index plus invertierter Use-Case-Index. 53 Components, 61 Use-Cases, 0 Orphans. Generator: npm run registry:index.
• cp-werkstatt-export repariert Liefert jetzt komplette Astro-Page mit Layout-Wrapper, Imports, SEO-Description, korrekten relativen Pfaden — nicht mehr nur Code-Snippet.
• werkstatt.astro modular ausgelagert 3980 Zeilen → 1099 Zeilen Astro plus 1427 Zeilen werkstatt.css und 1454 Zeilen werkstatt.client.ts. CLAUDE.md File-Layout-Regel erfüllt.

Phase 2 — AI/CLI-Boost

Sechs neue Werkzeuge, die den Frontend-Workflow um geschaetzt 50% beschleunigen.

• /cp-search Semantische Suche über alle Manifeste. Match-Score-basiert, JSON-Output für AI.
• /cp-list Library-Inventur mit Filter, --json, --by-usecase, --missing-fields.
• /cp-context Single-Bundle-Context für Frontend-Senior — Tokens, Spacing, Components, Patterns, Conventions in einem strukturierten Markdown.
• /cp-screenshot Multi-Viewport-Screenshots über Playwright-MCP. Erkennt Werkstatt-Config-IDs und delegiert ans Skript.
• /cp-page-scaffold Pattern-basierte Page-Generierung (landingpage, produkt-page, service-hub, kampagne, blog-artikel, pillar-page).
• Auto-Validation-Kette in cp-component-builder Manifest-Validator + Index-Refresh + Build-Smoke-Test + A11y-Audit + Light/Dark-Check. Kein manuelles Hin und Her mehr.

Phase 3 — Designer-Handoff

Brücke zwischen Werkstatt und Figma — Lo-Fi-Optik, Pixel-Snapshots, Code-Connect-Foundation.

• Lo-Fi-Toggle in der Werkstatt Vierter Modus neben Layout/Inhalt/Vorschau. CSS-Filter blendet Inhalte aus, zeigt Block-Boxen mit Labels. Kein Datenmodell-Eingriff.
• Image-Export-Skript scripts/werkstatt-screenshot.mjs nutzt Playwright für Multi-Viewport-PNG-Export. Lauft als npm run werkstatt:screenshot <config-id>.
• Figma-Library — 20 Components als Master File HPRDN8xGLi3J3JZWMPuFle. 78 Color-Variables (66 Primitives plus 12 Brand-Aliases) in zwei Modes Light/Dark. 20 Component-Sets mit insgesamt 73 Variants — Button(15), Tag(12), Avatar(5), Progress(6), DisplayHeading(5), PullQuote(5), Alert(4), Card(3), EmptyState(3), LeadParagraph(3), ImageText(2), Accordion(2), Quote/HighlightFrame/Breadcrumbs/JumpTo/Hero/BentoGrid/Footer/Table je 1. Auto-Layout durchgängig, Token-Bindings überall.
• Code-Connect-Setup ausführbar @figma/code-connect installiert. figma/code-connect.config.json mit echtem File-Key. npm run figma:publish und figma:unpublish als Scripts. Button.figma.ts als erste echte Code-Connect-Map (publish noch ausstehend, braucht FIGMA_ACCESS_TOKEN).

Phase 4 — Onboarding & Schulung

Onboarding-Tour mit Hands-on-First-Steps, alle Schulungs-Seiten konsolidiert, branche-neutral, mit Brücken zu den Werkzeugen.

• onboarding.astro umgebaut FE/BE raus, drei Rollen (Redakteur, Designer, Projektmanagement). Pro Rolle 3 Hands-on-First-Steps für die ersten 60 Minuten plus 6 Tour-Steps.
• redakteure.astro Branche-bereinigt Alle 12 Aufgaben — ~30 Stellen ersetzt. Service-Hub statt OePNV, Produkt-Anmeldung statt Förderantrag, Tarife statt Förderhöhen.
• designer.astro Subtitle korrigiert "Klima- und Mobilitäts-Projekte" → "in der Digital-Unit, für alle Kundenprojekte". Plus Hier-übst-du-das-Box.
• projektmanager.astro neutralisiert Sub-Agent hat 18 Beispiel-Titel und problem-Texte umgeschrieben. Briefing-Tabelle entdomaenisiert. Hendrik aus Tagesgeschaeft entfernt.
• zusammenarbeit.astro auf Pflicht-Struktur 7 Routinen alle mit Problem/Lösung/Beispiel/Gegenbeispiel/Wann-NICHT, drei vorgehen-Arrays nachgepflegt. Beispiele neutralisiert.
• layout-lesbarkeit.astro um Regel-Blöcke ergänzt 5 nachschlagbare Regel-Blöcke nach den interaktiven Demos. Demo-Texte branche-neutral.
• typo3-pflege.astro um Pflicht-Struktur ergänzt Problem/Beispiel/Gegenbeispiel/Wann-NICHT pro Section. Handbuch-Charakter (Tabelle, Timeline) bleibt.
• Glossar +10 Einträge Code-Connect, Component-Manifest, Image-Export (Werkstatt), Lo-Fi-Modus, Manifest-Schema-v2, MCP-Server, Naming-Standard, Registry-Index, Use-Case-Slug, Werkstatt-Config.
• Schulung↔Werkzeug-Brücken Pro Schulungs-Seite eine "Hier übst du das"-Box mit konkreten Werkzeug-Links (Werkstatt, Schreib-Lab, Mobile-Studio, Theme-Generator).

Phase 5 — Skeleton & Spec (Implementation steht aus)

Drei Items als bewusste Spec-Stubs — der Code-Pfad ist vorbereitet, Voll-Implementation läuft als eigene Multi-Tages-Projekte.

• /cp-werkstatt-to-figma — Spec One-Way Code → Figma über Figma-MCP. Voraussetzung: Figma-Library mit cp-registry-Components plus Token-Variables. Implementations-Aufwand ~1 Woche.
• /cp-werkstatt-multi-screen — Spec Sitemap-Wrapper über der Werkstatt. Datenmodell der Werkstatt unverändert. Implementations-Aufwand 5-6 Tage.
• mcp-server/ — Skeleton TypeScript-Geruest mit MCP-SDK. Resources für Components, Use-Cases, Patterns, Tokens. Tools für search_components, list_by_use_case. npm install + build im Sub-Verzeichnis steht aus.

Was noch offen ist

Sieben Items, die in eigenen PRs / Sessions erledigt werden — kein Blocker für den aktuellen Stand.

1. Manifest-Renames auf kebab-case

   Warum: CLAUDE.md fordert kebab-case für Mehr-Wort-Manifeste. 16 Files betroffen (bentogrid → bento-grid, displayheading → display-heading, leadparagraph → lead-paragraph etc.). Bricht alle Pfad-Referenzen — daher eigener PR mit Pfad-Updates in cp-add, Validator, Showcase-Routing.

   Aufwand: ~0.5 Tag, eigener PR

2. Visuelles Polish der Figma-Components durch Designer

   Warum: Alle 20 Master sind angelegt, aber agentur-typische Feinheiten fehlen — Hover-States, Focus-Ringe, exakte Spacings, Icon-Set, Typo-Detail. Das macht der Designer manuell. Funktional und token-gebunden ist alles bereits.

   Aufwand: pro Component 15-30 Min, ca. 5-10 Stunden Vollzeit

3. Code-Connect-Maps für 19 weitere Components plus Publish

   Warum: Button.figma.ts existiert. Pro Component eine .figma.ts mit Node-ID + Property-Mapping. Node-IDs der Component-Sets sind in figma/README.md dokumentiert. FIGMA_ACCESS_TOKEN setzen + npm run figma:publish published alle Maps.

   Aufwand: ~10-15 Min pro Component, ca. 4-5 Stunden Vollzeit

4. Spacing- und Type-Skala als Figma-Variables

   Warum: Aktuell nur Color-Variables. Padding/Gap/Radius im Button sind hartkodierte Pixel — sollten als Number-Variables (--spacing-space-*, --radius-*) gebunden sein. Type-Skala (display, heading-1..6, body, lead-md/lg/xl) als Text-Styles.

   Aufwand: 0.5-1 Tag

5. MCP-Server bauen und testen

   Warum: mcp-server/ ist Skeleton. npm install plus npm run build fehlt. Voll-Implementation der search/list/get-Tools sowie Pattern-Resources sind 3-4 Tage Frontend.

   Aufwand: 3-4 Tage

6. cp-werkstatt-to-figma implementieren

   Warum: Spec liegt. Implementation sobald Figma-Library mit Token-Variables existiert.

   Aufwand: ~1 Woche

7. Multi-Screen-Wrapper bauen

   Warum: Spec liegt. Storage-Erweiterung, REST-API, Sitemap-UI mit Drag-Drop, Thumbnail-Pipeline.

   Aufwand: 5-6 Tage

8. Playwright als Dev-Dependency installieren

   Warum: scripts/werkstatt-screenshot.mjs ist geschrieben, aber @playwright/test ist nicht installiert. Für produktive Nutzung: npm install -D @playwright/test plus npx playwright install chromium.

   Aufwand: 5 Min

9. Bento-Kategorie korrigieren

   Warum: bentogrid.json hat category="bento" — der cp-manifest-validator erlaubt nur ui|forms|content|layout|overlay|animation. Auf "content" oder "layout" korrigieren.

   Aufwand: 1 Min

Vor dem Commit prüfen

npm run dev starten, dann diese Pages durchklicken. Falls eine 500/Build-Error wirft, im Refactor-Stack nachschauen.

1. /zusammenspiel/werkstatt Werkstatt-Auslagerung — Lo-Fi-Toggle live testen, Mode-Switch funktional?
2. /onboarding Drei Rollen-Cards rendern, Hands-on-Tour erscheint nach Klick?
3. /components/avatar Showcase mit migriertem Manifest laedt sauber?
4. /schulung/redakteure Hier-übst-du-das-Box sichtbar, neutrale Beispiele in Aufgaben?
5. /schulung/zusammenarbeit Konsolidierte Pflicht-Struktur sichtbar?
6. /system/glossary Suche nach "Naming-Standard", "Lo-Fi-Modus" findet die neuen Einträge?
7. /docs/claude-code Sieben neue Skill-Cards (cp-search, cp-list, cp-context, cp-screenshot, cp-page-scaffold, cp-werkstatt-to-figma, cp-werkstatt-multi-screen) sichtbar?

Plus: node scripts/build-registry-index.mjs bestätigt 53 Components, 0 Orphans.