kikita-labs/kikita-create-angular-app

Was macht kikita-create-angular-app?

Erstellt ein neues Angular-Projekt und generiert dessen AGENTS.md- / .agents/-Dokumentationsbaum, sodass jeder KI-Agent (Claude Code, Codex, usw.), der anschließend im Projekt arbeitet, eine vollständige, selbstwartende Quelle der Wahrheit hat.

0. Moduserkennung (immer zuerst durchführen)

Drei mögliche Zustände für das Zielverzeichnis – in dieser Reihenfolge prüfen:

1. .agents/.kikita-scaffold.json vorhanden → Dieses Projekt wurde bereits von dieser Fähigkeit eingerichtet oder übernommen. Befolge update.md – führe den Fragebogen nicht erneut aus, führe kein erneutes Scaffolding durch, führe adopt.md nicht erneut aus. update.md behandelt das Abrufen der neuesten Vorlage, das Vergleichen seit dem aufgezeichneten Commit und das Zusammenführen von Änderungen in die (möglicherweise angepassten) .agents/-Dateien des Projekts.
2. Leeres oder fast leeres Verzeichnis (keine package.json, keine angular.json, nichts außer vielleicht einem .git//README, das der Benutzer gerade erstellt hat) → Frische Initialisierung. Fahre mit Abschnitt 1 unten fort, dann mit plan.md.
3. Bestehendes Projekt ohne Scaffold-Eintrag (package.json/angular.json vorhanden, keine .agents/.kikita-scaffold.json) → Dies ist ein Angular-Projekt von jemand anderem (oder ein älteres, vor dieser Fähigkeit erstelltes). Führe nicht plan.md aus – es nimmt ein leeres Verzeichnis an und wird versuchen, ng new über ein echtes Projekt auszuführen. Befolge stattdessen adopt.md: Es generiert den .agents/-Baum basierend auf dem, was tatsächlich vorhanden ist, leitet Antworten auf den Fragebogen aus der bestehenden Konfiguration ab und fragt nach, bevor es etwas ändert, das bereits existiert.

0.5 Voraussetzungen (nur bei frischer Initialisierung)

• Stelle sicher, dass das Arbeitsverzeichnis leer ist oder der Benutzer explizit hier initialisieren möchte.
• Wenn sich das Verzeichnis bei der Überprüfung als nicht leer herausstellt, brich ab und leite zu Fall 3 oben (adopt.md) um, anstatt den Initialisierungspfad zu erzwingen – bitte den Benutzer nicht, einfach zu „bestätigen, dass die Initialisierung hier in Ordnung ist“, wenn eigentlich der Adopt-Flow benötigt wird.

1. Fragebogen (immer vor dem Berühren des Dateisystems fragen)

Befolge plan.md Schritt für Schritt ab hier. Überspringe den Fragebogen nicht. Überspringe die MCP- Installation nicht. Wenn fertig, führe checklist.md vollständig aus, bevor du dem Benutzer mitteilst, dass es abgeschlossen ist.

Stelle dem Benutzer eine Runde, alles auf einmal:

1. CSS: natives CSS (Custom Properties), SCSS oder Tailwind CSS?
   • Tailwind ist strukturell ein anderer Zweig, nicht eine Variante der anderen beiden: kein @layer {{PREFIX}}.*-Schema, keine handgeschriebenen :root-Token, keine SCSS-Mixins – siehe die CSS=Tailwind Scaffold-Blöcke in templates/.agents/code-style/css-architecture.md, component-structure.md und templates/.agents/architecture/folder-structure.md.
2. UI-Bibliothek: @kikita-labs/ui, Taiga UI, PrimeNG oder keine (baue ein lokales token-basiertes UI-Set auf)?
   • Wenn eine Bibliothek gewählt wird: Prüfe, ob sie ein ng add-Schematic und/oder einen MCP- Server liefert. Bevorzuge das Schematic. Wenn es einen MCP hat, installiere ihn (siehe plan.md Schritt 4).
3. Tests: keine, nur Unit, nur e2e oder beides? Welcher Runner (Vitest/Jasmine+Karma ist bei neuem Angular veraltet – bevorzuge Vitest; Playwright für e2e)?
4. SSR: Wird diese App servergerendert (Angular SSR / Hydration) oder nur clientseitig?
   • Bestimmt, ob .agents/architecture/platform-adapter.md generiert wird.
5. i18n: Benötigt dieses Projekt mehrere Locales (@angular/localize oder eine Runtime-i18n- Bibliothek)? Wenn ja, welcher Ansatz?
   • Bestimmt, ob .agents/i18n.md generiert wird.
6. JSDoc bei öffentlicher API: Erzwinge obligatorisches JSDoc für jedes exportierte Symbol oder überspringe es?
   • Bestimmt, ob .agents/agent-surface.md generiert wird (empfohlener Standard: ja).
7. Projekt-Präfix: Kurzes Kebab-Case-Selektorpräfix für Komponenten/Direktiven.
8. Git-Richtlinie: Darf der Agent ohne Nachfrage committen und pushen, oder muss jeder Commit/Push bestätigt werden?
9. Paketmanager: npm, pnpm oder yarn? Standardempfehlung: pnpm (schneller, platzsparend durch einen gemeinsam genutzten Content-Addressable Store, strengere Abhängigkeitsauflösung). Überschreibe den Standard nur, wenn der Benutzer etwas anderes verlangt.
10. Git-Remote: Hat der Benutzer bereits eine Repository-URL, in die er pushen möchte? Wenn ja, notiere sie – git remote add origin <url> wird direkt nach git init ausgeführt (siehe plan.md Schritt 9). Wenn keine URL angegeben wird, überspringe dies; der Benutzer richtet das Remote später selbst ein.

Notiere jede Antwort – sie bestimmen sowohl das Scaffolding als auch, welche Dokumentdateien generiert werden. Nimm niemals stillschweigend einen Standard an; wenn der Benutzer eine Frage überspringt, frage für diese noch einmal nach. Diese Fähigkeit zielt auf ein einzelnes Angular-Projekt ab, nicht auf ein Monorepo - wenn der Benutzer ein Monorepo/Nx-Workspace möchte, sage, dass diese Fähigkeit das nicht abdeckt, und brich ab, anstatt improvisieren.

2. Generieren

Befolge plan.md. Kopiere Dateien aus templates/ in das Zielprojekt, einschließlich der Punktdateien (.gitignore, .editorconfig, .prettierrc, .prettierignore, .nvmrc, .vscode/extensions.json).

Zwei verschiedene Dinge passieren mit den Fragebogenantworten, vermische sie nicht:

• Text-Platzhalter – Ersetze jeden {{TOKEN}} durch den tatsächlichen Wert, lasse keinen zurück: {{PREFIX}}, {{PROJECT_NAME}}, {{CSS}}, {{CSS_EXT}}, {{UI_LIB}}, {{UI_LIB_MCP_NAME}}, {{UI_LIB_MCP_PURPOSE}}, {{TESTS}}, {{GIT_POLICY}}, {{PACKAGE_MANAGER}}, {{NODE_VERSION}}, {{I18N_APPROACH}}, {{DATE}}.
• Aufnahme-Tore – Antworten zu SSR, i18n, obligatorischem JSDoc, UI-Bibliothek und CSS-Engine füllen keinen Platzhalter; sie entscheiden, ob eine gesamte Datei (oder ein mit <!-- SCAFFOLD --> markierter Block innerhalb einer Datei) überhaupt kopiert wird. Eine „Nein“-Antwort (oder bei CSS die beiden nicht gewählten Engines) bedeutet, dass die Datei/der Block gelöscht wird, nicht mit einem leeren String gefüllt. Getorierte Dateien müssen dennoch von AGENTS.md / dem relevanten README verlinkt werden, wenn sie behalten werden, und ihre Links entfernt werden, wenn sie übersprungen werden.

3. Verifizieren

Führe checklist.md vollständig aus, bevor du den Erfolg meldest.

Anmerkungen zur Dokumentationsstruktur (einmal lesen, dann die Vorlagen wörtlich befolgen)

• CLAUDE.md ist immer ein einzeiliger Stub, der auf AGENTS.md verweist.
• AGENTS.md ist der obligatorische Einstiegspunkt: eine kurze „Muss gelesen werden“-Liste plus unverhandelbare Regeln, im Projektstamm.
• .agents/README.md ist ein flacher Index von allem unter .agents/ – das barrel index.ts- Äquivalent für den Dokumentationsbaum. Jedes Root-Dokument und jedes Unterordner-README wird daraus verlinkt. Halte es synchron, sobald eine bedingte Datei (i18n, agent-surface, platform-adapter) hinzugefügt oder übersprungen wird.
• Themen, die wirklich ein kurzes Dokument sind, bleiben flach in .agents/*.md (workflow, git-policy, documentation, mcp, testing-and-quality, agent-surface, refactoring, progress, i18n, accessibility).
• Themen, die sich in mehrere kleine Dokumente aufteilen, erhalten einen Unterordner mit eigenem README.md-Hub: .agents/code-style/, .agents/architecture/, .agents/shared/, .agents/core/, .agents/decisions/. Dies ist eine bewusste Abweichung von kikita-ui/-docs (die vollständig flach blieben), da die Spezifikation dieser Fähigkeit pro-Komponenten- und pro-Belang-Wiederverwendungsdokumente vorsieht, die nach dem Scaffolding weiter wachsen werden.
• .agents/shared/README.md registriert alles unter src/app/shared/, aufgeteilt nach Abhängigkeitsform: shared/ui/ (Komponente/Direktive/Pipe, Angular-dekoriert) und shared/utilities/ (reine Funktionen, ohne Angular-Importe – erzwungen durch eine ESLint- restricted-import-Regel). SCSS-Mixins, falls SCSS gewählt wurde, liegen in styles/mixins/, nicht unter shared/. .agents/core/README.md registriert app-weite Singletons (Services/Guards/Interceptors) unter src/app/core/. Keines heißt „components“ – beide decken mehr als nur Komponenten ab, daher die Namensgebung.
• .agents/decisions/README.md erklärt, wann ein kurzer ADR erforderlich ist (Schichtenrichtung, Zustandseigentum, Routing-Strategie, öffentliches Alias-Schema) – wird immer generiert, beginnt ohne ADR-Dateien. AGENTS.md verlinkt es unter einer bedingten Gruppe „für strukturelle Änderungen“, nicht in der immer-zu-lesenden Liste – gleiches Muster wie die shared//core/-Gruppe „für Komponentenarbeit“.
• Der gesamte verfolgte Dateiinhalt – einschließlich JSDoc – ist nur auf Englisch. Kein Kyrillisch, kein Mojibake.
• Alle Dokumente in .agents/ müssen wie angular-code-style.md in kikita-ui gelesen werden: imperativ, kurz, mit Beispielen untermauert, endend mit einer Überprüfungs-/Verifikations-Checkliste.