前言¶
在 Cursor、Gemini CLI 等工具裏讓 Agent 寫 Angular，常見問題不是「能不能生成 TypeScript」，而是生成結果是否跟當前 Angular 版本一致、是否沿用 Signals、httpResource、Signal Forms 等新 API，以及腳手架命令是否用對了本地 CLI 還是 npx。泛泛的「寫個組件」提示很難覆蓋這些細節。
下面介紹 Angular 團隊在 angular/skills 倉庫維護的 angular-developer Skill：把官方風格指南、分主題參考文檔和可執行的 CLI 規則寫進 Agent 指令，在創建項目、組件、服務、HTTP、表單、路由等場景下提供對齊 angular.dev 的實踐。
這是什麼¶
angular-developer 是一個 Agent Skill（SKILL.md 格式），description 寫明：生成 Angular 代碼並提供架構指導；在創建項目、組件、服務或 HTTP 通信，以及需要響應式（signals、linkedSignal、resource、httpResource）、查詢與內容投影、表單、依賴注入、路由、服務端與混合渲染（SSR、預渲染、水合）、無障礙（ARIA）、動畫、樣式（組件樣式、Tailwind CSS）、測試、命名約定或 CLI 工具等最佳實踐時觸發。
元數據（資料中可見）：
- 名稱：
angular-developer - 許可：MIT
- 維護方：
metadata.author爲 Copyright 2026 Google LLC - 版本：
1.0 - 源碼目錄：https://github.com/angular/skills/tree/main/angular-developer
同一倉庫還提供 angular-new-app（專注用 CLI 新建應用與項目結構）；本文以 angular-developer 爲主。倉庫 README 說明：Skill 內容在 angular/angular 的 skills/dev-skills/ 中維護，並同步到該基礎設施倉庫；問題反饋可走 angular/angular Issues。該系列也被 VoltAgent/awesome-agent-skills 收錄在 Angular 官方 Skills 分類下。
核心功能¶
Skill 正文以 Angular Developer Guidelines 爲總綱，並鏈到 references/ 下分主題 Markdown。以下能力均來自已抓取的正文，不展開截斷未出現的章節細節。
全局執行約定¶
- 先判斷項目 Angular 版本，再給建議；大版本之間 API 與最佳實踐差異明顯。用 CLI 新建項目時，若用戶未指定版本，不要擅自寫死版本號。
- 生成代碼遵循 Angular 風格指南；腳手架優先用 Angular CLI（組件、服務、指令、管道、路由等），保證結構一致。
- 生成代碼後必須執行
ng build，根據報錯修復，不得跳過——Skill 將其視爲保證可編譯的關鍵步驟。
新建項目（ng new）¶
無用戶額外約束時，默認使用最新穩定版 Angular；新項目表單管理優先 Signal Forms（資料註明在 Angular v22 及更新版本中穩定，詳見 references/signal-forms.md）。
ng new 的執行順序寫得很死，Agent 需按步驟選命令：
Step 1：用戶指定版本
- 使用
npx，不依賴本機已裝 CLI：
npx @angular/cli@<requested_version> new <project-name>
Step 2：未指定版本，且本機已有 CLI
- 先執行
ng version；成功則直接用本機/全局安裝：
ng new <project-name>
Step 3：未指定版本，且 ng version 失敗
- 用
npx拉取最新 CLI：
npx @angular/cli@latest new <project-name>
組件與模板¶
按任務查閱參考文檔，包括但不限於：
- 基礎：組件結構、元數據、自關閉標籤、模板控制流（
@if、@for、@switch）→references/components.md - 輸入/輸出：Signal inputs、transforms、model inputs；Signal outputs →
inputs.md、outputs.md - Host、命名（Angular v20+「Intent over Role」）、查詢與
<ng-content>投影、@defer可延遲視圖 → 對應references/*.md
更深內容可指向 https://angular.dev/guide/components。
響應式與數據¶
以 Signals 爲主軸：signal / computed、響應式上下文、untracked；linkedSignal、resource 異步數據、effect 與 afterRenderEffect 及何時不宜用 effect——各見 references/ 下專題文件。
HTTP¶
使用 Angular HTTP API：provideHttpClient、HttpClient、攔截器、httpResource → references/http-client.md。
表單¶
新項目在 v22+ 上優先 Signal Forms；存量或舊項目則匹配現有策略（模板驅動或響應式表單），並引用 signal-forms.md、template-driven-forms.md、reactive-forms.md。
依賴注入¶
從 DI 基礎、inject()、服務與 providedIn: 'root'，到 InjectionToken、useClass/useValue/useFactory、注入上下文、層級注入器與修飾符——分文件在 references/di-*.md 等。
其他已列主題¶
資料中還明確指向：Pipes、Angular Aria（Accordion、Listbox、Combobox 等無頭可訪問組件）、Routing（路由定義等，正文在截斷處繼續）。description additionally 覆蓋 SSR/預渲染/水合、動畫、樣式與測試、CLI 等觸發場景。
安裝與啓用¶
官方倉庫 README 說明：Agent Skills 面向 Gemini CLI、Antigravity 等 Agent 工具；具體啓用方式以各工具文檔爲準，也可藉助社區工具 skills.sh。
社區安裝入口（倉庫給出的統一命令）：
npx skills add https://github.com/angular/skills
該命令會添加整個 angular/skills 倉庫（包含 angular-developer 與 angular-new-app）。若你使用 Cursor、Codex CLI、Claude Code 等，請對照各自文檔將 Skill 目錄或 SKILL.md 配置到 Agent 可讀路徑；官方 README 未單獨列出 Cursor 專用配置項，此處不臆造路徑。
文檔鏈接（官方列舉）：
- Gemini CLI Skills：https://geminicli.com/docs/cli/skills/
- Antigravity Skills：https://antigravity.google/docs/skills
典型用法¶
用法本質是：在對話中提出 Angular 開發任務，由 Agent 加載本 Skill 後按指南與 references/ 生成代碼並自檢。
- 新建應用：說明項目名與是否鎖定 Angular 版本；Agent 應按上文三步選擇
ng new或npx @angular/cli@... new，並在 v22+ 新項目中傾向 Signal Forms。 - 加功能模塊：例如「爲列表頁加可延遲加載塊」→ 查閱
deferrable-views.md；「用httpResource拉 API」→http-client.md。 - 收尾驗證：生成或修改代碼後，Skill 要求運行：
ng build
有錯誤則解析構建輸出並修復後再繼續。
你無需在提示裏粘貼整份風格指南；Skill 的 description 已定義較寬的觸發面，覆蓋組件、服務、HTTP、路由、SSR、ARIA、測試等關鍵詞場景。
適用場景與注意¶
適合誰
- 日常用 Agent 寫或改 Angular 的開發者，希望輸出貼近官方文檔與當前大版本能力（Signals、新控制流、Signal Forms 等）。
- 需要統一「先版本、再 CLI、再
ng build」流程的團隊，減少 Agent 跳過編譯檢查的情況。
限制與注意
- Skill 是指導與引用索引，深度細節在
references/*.md和 angular.dev；Agent 是否每次都正確打開對應 reference，取決於工具對 Skill 資源的加載能力。 - 版本敏感：務必讓 Agent 先識別倉庫裏的 Angular 版本；用戶指定舊版時必須走
npx @angular/cli@<version>，避免與全局 CLI 不一致。 - 貢獻與缺陷：功能變更應在 angular/angular 的
skills/dev-skills/提交；本倉庫爲同步出口，Issue 走 Angular 文檔模板。 - 同倉庫的 angular-new-app 更聚焦「從零建應用」；若任務純腳手架，可一併安裝後按場景選用。
結尾¶
angular-developer 把 Angular 團隊的開發約定、分主題參考和 ng new / ng build 等硬規則寫進 Agent Skill，適合作爲在 Agent 工具裏做 Angular 開發的默認上下文。安裝可從 npx skills add https://github.com/angular/skills 入手，再按你所用 IDE 或 CLI 的 Skills 文檔掛載。
官方地址：https://github.com/angular/skills/tree/main/angular-developer
