kikita-create-angular-app 是做什麼的?
建立全新的 Angular 專案,並產生其 AGENTS.md / .agents/ 文件目錄樹,
使後續在此專案中工作的任何 AI 代理(Claude Code、Codex 等)都能擁有
完整的、可自我維護的真相來源。
0. 模式偵測(務必先執行此步驟)
目標目錄可能處於三種狀態 — 請按此順序檢查:
- 存在
.agents/.kikita-scaffold.json→ 此專案已被本技能建立或採用。 請遵循update.md— 不要重新執行問卷,不要重新建立樣板,不要重新執行adopt.md。update.md負責拉取最新樣板、比對記錄提交後的差異,並將變更合併到專案(可能已客製化)的.agents/檔案中。 - 空目錄或近乎空的目錄(沒有
package.json、沒有angular.json,僅可能有使用者剛建立的.git//README)→ 全新初始化。繼續下方第 1 節,然後執行plan.md。 - 現有專案,無樣板記錄(存在
package.json/angular.json,但無.agents/.kikita-scaffold.json)→ 這是別人的(或舊版、本技能之前的)Angular 專案。不要執行plan.md— 它假設目錄為空,會嘗試在真實專案上執行ng new。請改為遵循adopt.md:它會針對實際存在的內容產生.agents/目錄樹,從現有設定推斷問卷答案而非建立新工具,並在修改任何已存在的內容前先詢問。
0.5 前置條件(僅限全新初始化)
- 確認工作目錄為空,或使用者明確表示要在這裡初始化。
- 如果檢查時發現目錄非空,則停止並改為路由到上述案例 3(
adopt.md),而非強行執行初始化流程 — 不要讓使用者只「確認在此初始化沒問題」,因為實際需要的是採用流程。
1. 問卷(在接觸檔案系統前務必先執行)
從這裡開始,逐步遵循 plan.md。不要跳過問卷。不要跳過 MCP 安裝。完成後,在告訴使用者一切都完成之前,請先完整執行 checklist.md。
一次性地向使用者詢問所有問題:
- CSS:原生 CSS(自訂屬性)、SCSS,或 Tailwind CSS?
- Tailwind 是結構上完全不同的分支,而非其他兩者的變體:不使用
@layer {{PREFIX}}.*方案、不手寫:root權杖、不使用 SCSS mixin — 請參閱templates/.agents/code-style/css-architecture.md、component-structure.md和templates/.agents/architecture/folder-structure.md中的CSS=Tailwind樣板區塊。
- Tailwind 是結構上完全不同的分支,而非其他兩者的變體:不使用
- UI 函式庫:
@kikita-labs/ui、Taiga UI、PrimeNG,或無(建立本地基於權杖的 UI 集合)?- 如果選擇了某個函式庫:查詢它是否提供了
ng add示意圖和/或 MCP 伺服器。優先使用示意圖。如果有 MCP,則安裝它(請參閱plan.md步驟 4)。
- 如果選擇了某個函式庫:查詢它是否提供了
- 測試:無、僅單元測試、僅端對端測試,或兩者都要?使用哪個執行器(Vitest/Jasmine+Karma 在 Angular 新專案中已棄用 — 建議使用 Vitest;端對端測試建議使用 Playwright)?
- SSR:此應用程式是否使用伺服器端渲染(Angular SSR / hydration)或僅客戶端?
- 決定是否產生
.agents/architecture/platform-adapter.md。
- 決定是否產生
- i18n:此專案是否需要多語系(
@angular/localize或執行時期 i18n 函式庫)?如果需要,使用哪種方式?- 決定是否產生
.agents/i18n.md。
- 決定是否產生
- 公開 API 上的 JSDoc:強制要求每個匯出的符號都必須有 JSDoc,或跳過此要求?
- 決定是否產生
.agents/agent-surface.md(建議預設值:是)。
- 決定是否產生
- 專案前綴:用於元件/指令的短 kebab-case 選擇器前綴。
- Git 政策:代理是否可以未經每次詢問就提交和推送,還是每次提交/推送都必須確認?
- 套件管理工具:npm、pnpm 或 yarn?預設建議:pnpm(更快,透過共享內容可定址儲存節省磁碟空間,依賴解析更嚴格)。僅當使用者要求其他工具時才覆蓋預設值。
- Git 遠端:使用者是否已有要推送的儲存庫 URL?如果有,請記錄下來 —
git remote add origin <url>會在git init之後立即執行(請參閱plan.md步驟 9)。如果未提供 URL,則跳過此步驟;使用者之後自行設定遠端。
記錄每個答案 — 它們驅動樣板建立以及哪些文件檔案會被產生。 永遠不要默默假設某個預設值;如果使用者跳過某個問題,請再次詢問該問題。 此技能針對單一 Angular 專案,而非 monorepo — 如果使用者想要 monorepo/Nx 工作區,請說明此技能不涵蓋該情況並停止,而非自行即興發揮。
2. 產生
遵循 plan.md。將檔案從 templates/ 複製到目標專案中,包括點檔案(.gitignore、.editorconfig、.prettierrc、.prettierignore、.nvmrc、.vscode/extensions.json)。
問卷答案會發生兩種不同的事情,不要混淆:
- 文字佔位符 — 搜尋並取代所有
{{TOKEN}}為實際值,不留任何殘留:{{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}}。 - 包含閘門 — SSR、i18n、強制 JSDoc、UI 函式庫和 CSS 引擎的答案不會填入佔位符;它們決定是否要複製整個檔案(或其中標記為
<!-- SCAFFOLD -->的區塊)。答案為「否」(或對於 CSS,兩個未被選中的引擎)表示該檔案/區塊會被刪除,而不是填入空字串。受控檔案在保留時仍必須從AGENTS.md/ 相關的 README 連結,而在跳過時則移除其連結。
3. 驗證
在報告成功之前,請完整執行 checklist.md。
關於文件結構的注意事項(閱讀一次,然後嚴格遵循樣板)
CLAUDE.md始終只是一個指向AGENTS.md的單行樁檔案。AGENTS.md是強制入口點:位於專案根目錄,包含簡短的「必讀」清單和不可協商的規則。.agents/README.md是.agents/下所有內容的扁平索引 — 相當於文件樹的桶型index.ts。每個根目錄文件和每個子資料夾的 README 都從它連結。當條件性檔案(i18n、agent-surface、platform-adapter)被新增或跳過時,請保持其同步。- 真正短小且單一的主題保持扁平,放在
.agents/*.md(workflow、git-policy、documentation、mcp、testing-and-quality、agent-surface、refactoring、progress、i18n、accessibility)。 - 會衍生出數個小文件的主題則建立一個附帶自身
README.md中樞的子資料夾:.agents/code-style/、.agents/architecture/、.agents/shared/、.agents/core/、.agents/decisions/。這是有意偏離 kikita-ui/-docs(它們保持完全扁平)的設計,因為此技能的規範要求建立基於元件和關注點的復用文件,這些文件在建立樣板後會持續增長。 .agents/shared/README.md註冊src/app/shared/下的所有內容,並依依賴形狀拆分:shared/ui/(元件/指令/管道,使用 Angular 裝飾器)和shared/utilities/(純函式,零 Angular 匯入 — 由 ESLint 限制匯入規則強制執行)。如果選擇了 SCSS,SCSS mixin 則放在styles/mixins/下,而不是放在shared/下。.agents/core/README.md註冊src/app/core/下的應用層級單例(服務/守衛/攔截器)。兩者都不命名為「components」— 它們涵蓋的範圍都超過元件,因此採用此命名。.agents/decisions/README.md說明何時需要簡短的 ADR(層級方向、狀態所有權、路由策略、公開別名方案)— 始終會產生,起始時沒有 ADR 檔案。AGENTS.md在條件性的「針對結構變更」群組下連結它,而非在始終閱讀的清單中 — 與shared//core/的「針對元件工作」群組模式相同。- 所有追蹤的檔案內容 — 包括 JSDoc — 都僅使用英文。不包含西里爾字母,不包含亂碼。
.agents/中的所有文件都必須像 kikita-ui 中的angular-code-style.md:命令式、簡短、附有範例,並以複查/驗證檢查清單結尾。