前言¶
在 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
