Community生產力與協作github.com

kikita-labs/kikita-create-angular-app

專為 Claude Code / Codex 設計的代理技能:建立全新的 Angular 專案(最新穩定版),並產生完整的、可自我維護的 .agents/ 文件目錄樹;或為現有專案套用/更新該文件樹。

kikita-create-angular-app 是什麼?

此技能可快速引導 AI 代理(如 Claude Code 或 Codex)建立一個全新 Angular 專案,同時自動產生專屬的 `.agents/` 文件目錄樹,包含 AGENTS.md、程式碼風格指南、架構說明、測試規範等。技能會先偵測目標目錄狀態(空目錄、現有專案但無記錄、或已由本技能建立),然後針對不同情況執行初始化、採用或更新流程。在空目錄初始化時,它會透過一輪問卷收集 CSS 引擎、UI 函式庫、測試框架、SSR、i18n 等決策,並根據答案動態產生或排除對應的文件模組與程式碼樣板。最後再執行完整檢查清單以確保一切就緒。這套文件架構以 AGENTS.md 為強制入口,並將文件依主題分層組織(扁平或子目錄),讓 AI 代理後續能持續維護與擴充。

相容平台✓Claude Code✓Codex CLI~Cursor
npx skills add kikita-labs/kikita-create-angular-app

Installed? Explore more 生產力與協作 skills: steipete/gemini, steipete/gh-issues, steipete/skill-creator · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

kikita-create-angular-app 是做什麼的?

建立全新的 Angular 專案,並產生其 AGENTS.md / .agents/ 文件目錄樹, 使後續在此專案中工作的任何 AI 代理(Claude Code、Codex 等)都能擁有 完整的、可自我維護的真相來源。

0. 模式偵測(務必先執行此步驟)

目標目錄可能處於三種狀態 — 請按此順序檢查:

  1. 存在 .agents/.kikita-scaffold.json → 此專案已被本技能建立或採用。 請遵循 update.md — 不要重新執行問卷,不要重新建立樣板,不要重新執行 adopt.md。 update.md 負責拉取最新樣板、比對記錄提交後的差異,並將變更合併到專案(可能已客製化)的 .agents/ 檔案中。
  2. 空目錄或近乎空的目錄(沒有 package.json、沒有 angular.json,僅可能有使用者剛建立的 .git//README)→ 全新初始化。繼續下方第 1 節,然後執行 plan.md。
  3. 現有專案,無樣板記錄(存在 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。

一次性地向使用者詢問所有問題:

  1. 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 樣板區塊。
  2. UI 函式庫:@kikita-labs/ui、Taiga UI、PrimeNG,或無(建立本地基於權杖的 UI 集合)?
    • 如果選擇了某個函式庫:查詢它是否提供了 ng add 示意圖和/或 MCP 伺服器。優先使用示意圖。如果有 MCP,則安裝它(請參閱 plan.md 步驟 4)。
  3. 測試:無、僅單元測試、僅端對端測試,或兩者都要?使用哪個執行器(Vitest/Jasmine+Karma 在 Angular 新專案中已棄用 — 建議使用 Vitest;端對端測試建議使用 Playwright)?
  4. SSR:此應用程式是否使用伺服器端渲染(Angular SSR / hydration)或僅客戶端?
    • 決定是否產生 .agents/architecture/platform-adapter.md。
  5. i18n:此專案是否需要多語系(@angular/localize 或執行時期 i18n 函式庫)?如果需要,使用哪種方式?
    • 決定是否產生 .agents/i18n.md。
  6. 公開 API 上的 JSDoc:強制要求每個匯出的符號都必須有 JSDoc,或跳過此要求?
    • 決定是否產生 .agents/agent-surface.md(建議預設值:是)。
  7. 專案前綴:用於元件/指令的短 kebab-case 選擇器前綴。
  8. Git 政策:代理是否可以未經每次詢問就提交和推送,還是每次提交/推送都必須確認?
  9. 套件管理工具:npm、pnpm 或 yarn?預設建議:pnpm(更快,透過共享內容可定址儲存節省磁碟空間,依賴解析更嚴格)。僅當使用者要求其他工具時才覆蓋預設值。
  10. 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:命令式、簡短、附有範例,並以複查/驗證檢查清單結尾。

相關技能