Angular Agent Skills 指南让 Coding Agent 按最新最佳实践编写与搭建 Angular 应用【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angular本篇技术指南围绕当前仓库skills/dev-skills目录中维护的Angular Agent SkillsAgent 技能包展开介绍官方为编码 AgentCoding Agent准备的angular-developer与angular-new-app两套技能的设计目标、元数据格式、目录组织、内置规则与参考知识库结构以及它们在 Gemini CLI、Antigravity 等 agentic 编程工具中的安装、加载与使用方式。读完本文你将掌握如何在 Agent 工作流中接入 Angular 官方技能理解 Agent 生成代码时的“先定版本 → 按规范生成 → ng build 验证”工作范式并了解如何参与技能内容的共建。Angular Agent Skills 是什么根据 skills/dev-skills/README.md 的定义Angular Skills 是一组专为编码 Agent 设计的技能文件目标是帮助 Agent 构建与最新版本 Angular 对齐的应用程序提供架构层面的指导、生成符合惯例的 Angular 代码、并基于现代最佳实践搭建新项目脚手架。它可以服务于以下典型场景生成组件component、服务service、HTTP 通信代码就响应式编程signals、linkedSignal、resource、httpResource、表单、依赖注入、路由、SSR、无障碍ARIA、动画、样式、测试、CLI 工具链等主题给出最佳实践使用 Angular CLI 从零创建一个结构化合理的现代 Angular 应用。技能以 Agent 可读取的结构化指令SKILL.md 按主题拆分的参考文档形式存放在仓库中不依赖额外运行时激活后即可把“该任务需要遵循的约束与参考文档”注入 Agent 的上下文。其设计本质上是把 Angular 团队多年沉淀的工程经验编码成 Agent 能稳定遵循的“操作手册”。技能在仓库中的组织形态从目录结构看技能集中托管在skills/dev-skills/下呈“一个总览 README 两个技能包”的形态skills/dev-skills/README.md技能集合的入口文档说明定位、可用技能清单、使用方式与贡献方式skills/dev-skills/angular-developer/SKILL.md面向“写代码 给架构建议”场景的通用开发技能skills/dev-skills/angular-developer/references/40 篇按主题拆分的参考文档构成 angular-developer 的内置知识库skills/dev-skills/angular-new-app/SKILL.md面向“从零创建新应用”场景的专项技能。每个技能的 SKILL.md 都带有一段 YAML front-matter 元数据这是 Agent 工具识别、索引和按需激活技能的关键。例如 angular-developer 的元数据片段为--- name: angular-developer description: Generates Angular code and provides architectural guidance. Trigger when creating projects, components, services, or HTTP communication, or for best practices on reactivity, forms, dependency injection, routing, SSR, accessibility, animations, styling, testing, naming conventions, or CLI tooling. license: MIT metadata: author: Copyright 2026 Google LLC version: 1.0 ---其中description字段直接充当“何时触发该技能”的判定依据当任务涉及创建项目、组件、服务、HTTP 通信或任何表单、依赖注入、路由、测试等领域的最佳实践问题时技能工具就会据此加载对应指令。angular-new-app 的元数据还额外声明了compatibility: Requires node, npm, and access to the internet即该技能在运行前需要 Node、npm 以及网络连接。内置技能一angular-developer通用代码生成与架构指导angular-developer的技能正文首先定义了三条无条件遵守的底层工作准则见 SKILL.md先分析版本再给建议提供指导前必须分析项目使用的 Angular 版本因为不同版本之间最佳实践与可用特性差异显著若用 Angular CLI 新建项目且用户未指定版本则不要主动指定版本号。按 Style Guide 生成代码遵循 Angular 风格指南与最佳实践保证可维护性与性能组件、服务、指令、管道、路由一律优先用 Angular CLI 脚手架生成以保证一致性。用构建做验收代码生成完成后必须运行ng build确认没有构建错误若有错误先分析错误信息并修复再继续——该步骤被强调“不可跳过”是保证生成代码正确可运行的关键。新建项目时的默认规则与ng new决策流程当用户没有给出额外指南时angular-developer 会按以下默认规则创建新项目除非用户明确指定否则使用最新稳定版 Angular新项目表单优先使用 Signal Forms文档标注在 Angular v22 及更新版本中已稳定详见 references/signal-forms.md。对于“如何执行ng new”技能要求 Agent 严格按三步决策树选择命令第 1 步检查用户是否显式指定版本。若用户要求特定版本例如 Angular 15则跳过本地安装、一律使用npxnpx angular/clirequested_version new project-name第 2 步检查本机是否已有 Angular CLI。若用户未指定版本先运行ng version若命令成功并返回已安装版本则直接使用本地/全局安装ng new project-name第 3 步回退到最新版。若用户未指定版本且ng version失败说明机器上没有 Angular 安装则使用npx拉取最新版npx angular/clilatest new project-name十大主题领域与内置参考库导航angular-developer 的主体是一张“任务 → 参考文档”的映射表把日常编码任务路由到 references 下对应主题的详细指南。以下是完整的领域与导航清单所有文档路径均已换算为仓库根目录相对路径领域触发场景参考文档组件组件解剖结构、元数据、自闭合标签、模板控制流if/for/switchcomponents.md组件输入基于 signal 的 inputs、transform、model inputsinputs.md组件输出基于 signal 的 outputs、自定义事件最佳实践outputs.md宿主元素host bindings 与属性注入host-elements.md命名规范Angular v20 的 “Intent over Role” 命名风格naming-conventions.mdSignals 概览signal/computed、响应式上下文、untrackedsignals-overview.md派生可写状态与源 signal 绑定的 linkedSignallinked-signal.md异步响应式用 resource 将异步数据直接载入 signal 状态resource.md副作用effect、afterRenderEffect 及“何时不该用 effect”effects.mdHTTPprovideHttpClient、HttpClient、拦截器、httpResourcehttp-client.mdSignal 表单新应用优先使用的表单方案signal-forms.md模板驱动表单简单表单场景template-driven-forms.md响应式表单复杂表单场景reactive-forms.mdDI 基础依赖注入概览、服务、inject() 函数di-fundamentals.md服务创建providedIn: root、向组件/服务注入creating-services.mdProvider 定义InjectionToken、useClass/useValue/useFactory 与作用域defining-providers.md注入上下文inject() 合法位置、runInInjectionContext、assertInInjectionContextinjection-context.md层级注入器EnvironmentInjector vs ElementInjector、修饰符、providers vs viewProvidershierarchical-injectors.md管道内置管道导入、自定义管道、纯/非纯管道pipes.mdARIA 组件Accordion/Listbox/Combobox/Menu/Tabs/Toolbar/Tree/Grid 无头无障碍组件angular-aria.md路由定义URL 路径、静态/动态段、通配符、重定向define-routes.md加载策略急切/懒加载与上下文感知加载loading-strategies.md路由出口router-outlet、嵌套与命名出口show-routes-with-outlets.md路由导航RouterLink 声明式与 Router 编程式导航navigate-to-routes.md路由守卫CanActivate、CanMatch 等访问控制route-guards.md数据解析ResolveFn 在路由激活前预取数据data-resolvers.md路由生命周期导航事件时序与调试router-lifecycle.md渲染策略CSR、SSG预渲染、SSR with hydrationrendering-strategies.md路由转场动画View Transitions API 的启用与定制route-animations.mdTailwind CSS在 Angular 项目中集成 Tailwindtailwind-css.md动画推荐原生 CSS 或兼容旧版 DSLangular-animations.md组件样式组件样式与封装最佳实践component-styling.md单元测试Vitest 最佳实践、异步模式、TestBedtesting-fundamentals.md组件 Harness组件交互测试的标准模式component-harnesses.md路由测试RouterTestingHarnessrouter-testing.mdE2E 测试端到端测试的搭建与运行e2e-testing.mdCLI创建应用、生成代码、serve 与 buildcli.md代码现代化用 migrations 自动重构到现代规范migrations.mdMCP ServerAngular CLI MCP 的工具、配置与实验特性mcp.md环境配置构建期与运行期配置策略environment-configuration.md几条值得注意的“技能级”约束示例除导航外references 中还沉淀了大量可直接指导 Agent 生成正确代码的硬性约束。以最常被触发的三类为例表单选型来自 angular-developer 正文与 signal-forms.md新应用在 Angular v22 及以上版本应优先 Signal Forms存量老应用或已有表单则沿用项目当前策略模板驱动/响应式。reference 文档同时提示form()由模型 signal 推导结构、模型字段不允许用null/undefined作为初值、submit()的回调必须是async等易错点。命名规范来自 naming-conventions.md该文档贯彻 Angular v20 引入的 “Intent over Role” 哲学——在新项目中去掉.component.ts/.service.ts/.directive.ts这类“角色后缀”文件名与类名直接反映业务意图如auth-data.ts/AuthData同时强调必须优先尊重存量项目既有约定并在不确定时使用传统后缀作为最安全的默认值数据模型接口仍保留.model.ts后缀。响应式状态来自 signals-overview.mdsignal 读取必须通过调用 getter 完成服务对外暴露状态时应使用asReadonly()阻止外部篡改响应式上下文只在同步代码中生效读取 signal 必须放在await之前否则不会被依赖追踪。这些约束文件的共同特点是把“容易写错、且编译期未必报错”的细节显式化这正是 Agent 技能相对于普通文档的核心价值所在。内置技能二angular-new-app从零搭建现代应用angular-new-app把“用 Angular CLI 新建一个现代应用”的完整流程拆成了固定步骤见 angular-new-app/SKILL.md。它要求 Agent 以 TypeScript、Angular 与可扩展 Web 应用专家自居写出功能正确、可维护、高性能且可访问的代码。第 1 步确认 Angular CLI 是否存在创建应用前必须先确认 CLI 环境*nix系统使用which ngWindows 系统使用where ngPowerShell 下可用gcm ng若未安装需要征求用户同意后用npm install -g angular/cli全局安装。技能在此处特别提示Angular CLI 内置了 MCP server可通过ng mcp暴露get_best_practices等工具获取官方最佳实践属于“进阶增强”能力详见下文。第 2 步执行ng new并加载 AI 配置创建命令的标准形态为npx ng new app-name [list of flags based on the description of the app] --interactivefalse --ai-config[agents, claude, copilot, cursor, gemini, jetbrains, none, windsurf]应用名可以基于用户描述推断也可以询问用户。技能建议--ai-config优先使用agents或按 Agent 所处环境选择最合适的值——例如用户使用 Gemini 就传--ai-configgemini生成后应把该 AI 配置的内容加载进上下文以便后续生成代码与对应 IDE/Agent 的 Angular 最佳实践保持一致。根据用户需求可组合的常用 flags 包括Flag含义--stylescss\|css\|less样式表格式--routing添加路由模块--ssr启用服务端渲染--prefixprefix组件选择器前缀--skip-tests跳过测试文件仅在用户明确要求时使用第 35 步构建验证、按需生成、接入 Tailwind创建完成后技能要求“先做出一些功能再启动应用”并主动询问用户是否启动期间可随时运行npx ng build检查错误并修复而不是把带构建错误的应用交给用户。后续生成代码一律走 Angular CLI 脚手架技能逐个列出对应命令并强调记录 generate 命令返回的文件路径以便准确掌握新文件位置先让 CLI 生成骨架再按业务需求增强npx ng generate component component-name npx ng generate service service-name npx ng generate pipe pipe-name npx ng generate directive directive-name npx ng generate interface interface-name npx ng generate guard guard-name npx ng generate interceptor interceptor-name npx ng generate resolver resolver-name npx ng generate enum enum-name npx ng generate class class-name如需 Tailwind则运行npx ng add tailwindcss之后即可直接在模板中使用 Tailwind 类技能同时提示按 Tailwind v4 的最佳实践操作。与 angular-developer 的配合关系从两个技能的分工可以推断出 Angular 团队的思路angular-new-app解决“项目从 0 到 1”的引导问题CLI 检查、脚手架 flags、AI 配置、生成清单angular-developer则解决“持续开发与维护”时的规范问题版本感知、代码生成、构建验收、主题参考库。两者配合基本覆盖了 Agent 参与 Angular 应用开发生命周期的主要阶段。协同工具Angular CLI 内置的 MCP Serverangular-developer的 tooling 领域与angular-new-app都提到了与技能互补的另一能力——Angular CLI 内置的 Model Context ProtocolMCP服务器可让 Cursor、Gemini CLI、JetBrains AI 等 AI 助手直接调用 CLI 能力。默认注册的工具见 references/mcp.md包括工具用途ai_tutor启动交互式 AI Angular 导师devserver.start/devserver.stop启动/停止开发服务器devserver.wait_for_build返回运行中 dev server 最近一次构建日志get_best_practices获取 Angular 最佳实践指南list_projects读取 angular.json 列出所有应用与库onpush_zoneless_migration分析并给出迁移到 OnPush 变更检测的计划run_target执行配置好的构建目标search_documentation检索官方文档启用方式是在宿主 IDE 中让npx angular/cli mcp作为 MCP 服务器启动。以 Gemini CLI 为例在项目根目录创建.gemini/settings.json{ mcpServers: { angular-cli: { command: npx, args: [-y, angular/cli, mcp] } } }还可向 args 追加--read-only仅注册不修改项目的工具或--local-only仅注册不需要联网的工具等选项。技能文件式指令与 MCP命令式工具由此形成互补前者约束 Agent“怎么写才对”后者让 Agent“能真正执行构建、迁移与调试”。在自己的环境中安装与使用这些技能根据 README 的说明Agent Skills 面向 Gemini CLI、Antigravity 等 agentic 编程工具设计。激活activate技能会加载该任务所需的特定指令与资源——这正是它区别于普通在线文档之处不是让 Agent 去检索海量资料而是把与本任务强相关的规则和参考直接推入上下文。官方建议的使用路径有两条遵循你所用 agentic 工具自身的技能安装说明不同工具对技能目录、命名与加载方式各有约定使用社区工具 skills.sh 一键添加整个技能包例如npx skills add angular-skills-collection-url命令中的angular-skills-collection-url指向 Angular 官方技能集合的分发地址。需要说明的是本仓库即技能的权威维护源所有技能的原始内容都保存在skills/dev-skills/目录内配套基础设施会将其同步输出到对外分发渠道。因此即使不依赖第三方工具你也可以直接打开仓库中的 angular-developer/SKILL.md 与 angular-new-app/SKILL.md 查看技能正文并阅读references/下与当前任务对应的主题文档将其中的约束手动带入 Agent 会话。如何参与技能的共建Angular 官方欢迎社区为技能做贡献贡献路径与仓库本身的开发流程保持了一致更新位置直接在本仓库内修改改动集中在skills/dev-skills/目录技能更新经基础设施自动同步到分发仓库提交规范遵循仓库的 提交消息指南 与 编码规范PR 流程向主仓库提交 Pull Request提出新特性、更新或 bug 修复反馈渠道若遇到 bug 或有改进建议在 issue 跟踪器中提交 issue并提供尽量详细的上下文如触发场景、期望行为与实际行为的差异以便维护者高效定位问题。结合正文开头的准则可以理解其意图技能内容本质上是“可以被持续评审、版本化与审计的工程资产”。把技能维护纳入 Angular 既有仓库与贡献流程意味着每条指导都能像代码一样接受 review、被迁移工具更新并随框架版本演进同步修正——这正是 Agent 技能体系与一次性提示词prompt之间的根本区别。【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angular创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Angular Agent Skills 指南：让 Coding Agent 按最新最佳实践编写与搭建 Angular 应用
Angular Agent Skills 指南让 Coding Agent 按最新最佳实践编写与搭建 Angular 应用【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angular本篇技术指南围绕当前仓库skills/dev-skills目录中维护的Angular Agent SkillsAgent 技能包展开介绍官方为编码 AgentCoding Agent准备的angular-developer与angular-new-app两套技能的设计目标、元数据格式、目录组织、内置规则与参考知识库结构以及它们在 Gemini CLI、Antigravity 等 agentic 编程工具中的安装、加载与使用方式。读完本文你将掌握如何在 Agent 工作流中接入 Angular 官方技能理解 Agent 生成代码时的“先定版本 → 按规范生成 → ng build 验证”工作范式并了解如何参与技能内容的共建。Angular Agent Skills 是什么根据 skills/dev-skills/README.md 的定义Angular Skills 是一组专为编码 Agent 设计的技能文件目标是帮助 Agent 构建与最新版本 Angular 对齐的应用程序提供架构层面的指导、生成符合惯例的 Angular 代码、并基于现代最佳实践搭建新项目脚手架。它可以服务于以下典型场景生成组件component、服务service、HTTP 通信代码就响应式编程signals、linkedSignal、resource、httpResource、表单、依赖注入、路由、SSR、无障碍ARIA、动画、样式、测试、CLI 工具链等主题给出最佳实践使用 Angular CLI 从零创建一个结构化合理的现代 Angular 应用。技能以 Agent 可读取的结构化指令SKILL.md 按主题拆分的参考文档形式存放在仓库中不依赖额外运行时激活后即可把“该任务需要遵循的约束与参考文档”注入 Agent 的上下文。其设计本质上是把 Angular 团队多年沉淀的工程经验编码成 Agent 能稳定遵循的“操作手册”。技能在仓库中的组织形态从目录结构看技能集中托管在skills/dev-skills/下呈“一个总览 README 两个技能包”的形态skills/dev-skills/README.md技能集合的入口文档说明定位、可用技能清单、使用方式与贡献方式skills/dev-skills/angular-developer/SKILL.md面向“写代码 给架构建议”场景的通用开发技能skills/dev-skills/angular-developer/references/40 篇按主题拆分的参考文档构成 angular-developer 的内置知识库skills/dev-skills/angular-new-app/SKILL.md面向“从零创建新应用”场景的专项技能。每个技能的 SKILL.md 都带有一段 YAML front-matter 元数据这是 Agent 工具识别、索引和按需激活技能的关键。例如 angular-developer 的元数据片段为--- name: angular-developer description: Generates Angular code and provides architectural guidance. Trigger when creating projects, components, services, or HTTP communication, or for best practices on reactivity, forms, dependency injection, routing, SSR, accessibility, animations, styling, testing, naming conventions, or CLI tooling. license: MIT metadata: author: Copyright 2026 Google LLC version: 1.0 ---其中description字段直接充当“何时触发该技能”的判定依据当任务涉及创建项目、组件、服务、HTTP 通信或任何表单、依赖注入、路由、测试等领域的最佳实践问题时技能工具就会据此加载对应指令。angular-new-app 的元数据还额外声明了compatibility: Requires node, npm, and access to the internet即该技能在运行前需要 Node、npm 以及网络连接。内置技能一angular-developer通用代码生成与架构指导angular-developer的技能正文首先定义了三条无条件遵守的底层工作准则见 SKILL.md先分析版本再给建议提供指导前必须分析项目使用的 Angular 版本因为不同版本之间最佳实践与可用特性差异显著若用 Angular CLI 新建项目且用户未指定版本则不要主动指定版本号。按 Style Guide 生成代码遵循 Angular 风格指南与最佳实践保证可维护性与性能组件、服务、指令、管道、路由一律优先用 Angular CLI 脚手架生成以保证一致性。用构建做验收代码生成完成后必须运行ng build确认没有构建错误若有错误先分析错误信息并修复再继续——该步骤被强调“不可跳过”是保证生成代码正确可运行的关键。新建项目时的默认规则与ng new决策流程当用户没有给出额外指南时angular-developer 会按以下默认规则创建新项目除非用户明确指定否则使用最新稳定版 Angular新项目表单优先使用 Signal Forms文档标注在 Angular v22 及更新版本中已稳定详见 references/signal-forms.md。对于“如何执行ng new”技能要求 Agent 严格按三步决策树选择命令第 1 步检查用户是否显式指定版本。若用户要求特定版本例如 Angular 15则跳过本地安装、一律使用npxnpx angular/clirequested_version new project-name第 2 步检查本机是否已有 Angular CLI。若用户未指定版本先运行ng version若命令成功并返回已安装版本则直接使用本地/全局安装ng new project-name第 3 步回退到最新版。若用户未指定版本且ng version失败说明机器上没有 Angular 安装则使用npx拉取最新版npx angular/clilatest new project-name十大主题领域与内置参考库导航angular-developer 的主体是一张“任务 → 参考文档”的映射表把日常编码任务路由到 references 下对应主题的详细指南。以下是完整的领域与导航清单所有文档路径均已换算为仓库根目录相对路径领域触发场景参考文档组件组件解剖结构、元数据、自闭合标签、模板控制流if/for/switchcomponents.md组件输入基于 signal 的 inputs、transform、model inputsinputs.md组件输出基于 signal 的 outputs、自定义事件最佳实践outputs.md宿主元素host bindings 与属性注入host-elements.md命名规范Angular v20 的 “Intent over Role” 命名风格naming-conventions.mdSignals 概览signal/computed、响应式上下文、untrackedsignals-overview.md派生可写状态与源 signal 绑定的 linkedSignallinked-signal.md异步响应式用 resource 将异步数据直接载入 signal 状态resource.md副作用effect、afterRenderEffect 及“何时不该用 effect”effects.mdHTTPprovideHttpClient、HttpClient、拦截器、httpResourcehttp-client.mdSignal 表单新应用优先使用的表单方案signal-forms.md模板驱动表单简单表单场景template-driven-forms.md响应式表单复杂表单场景reactive-forms.mdDI 基础依赖注入概览、服务、inject() 函数di-fundamentals.md服务创建providedIn: root、向组件/服务注入creating-services.mdProvider 定义InjectionToken、useClass/useValue/useFactory 与作用域defining-providers.md注入上下文inject() 合法位置、runInInjectionContext、assertInInjectionContextinjection-context.md层级注入器EnvironmentInjector vs ElementInjector、修饰符、providers vs viewProvidershierarchical-injectors.md管道内置管道导入、自定义管道、纯/非纯管道pipes.mdARIA 组件Accordion/Listbox/Combobox/Menu/Tabs/Toolbar/Tree/Grid 无头无障碍组件angular-aria.md路由定义URL 路径、静态/动态段、通配符、重定向define-routes.md加载策略急切/懒加载与上下文感知加载loading-strategies.md路由出口router-outlet、嵌套与命名出口show-routes-with-outlets.md路由导航RouterLink 声明式与 Router 编程式导航navigate-to-routes.md路由守卫CanActivate、CanMatch 等访问控制route-guards.md数据解析ResolveFn 在路由激活前预取数据data-resolvers.md路由生命周期导航事件时序与调试router-lifecycle.md渲染策略CSR、SSG预渲染、SSR with hydrationrendering-strategies.md路由转场动画View Transitions API 的启用与定制route-animations.mdTailwind CSS在 Angular 项目中集成 Tailwindtailwind-css.md动画推荐原生 CSS 或兼容旧版 DSLangular-animations.md组件样式组件样式与封装最佳实践component-styling.md单元测试Vitest 最佳实践、异步模式、TestBedtesting-fundamentals.md组件 Harness组件交互测试的标准模式component-harnesses.md路由测试RouterTestingHarnessrouter-testing.mdE2E 测试端到端测试的搭建与运行e2e-testing.mdCLI创建应用、生成代码、serve 与 buildcli.md代码现代化用 migrations 自动重构到现代规范migrations.mdMCP ServerAngular CLI MCP 的工具、配置与实验特性mcp.md环境配置构建期与运行期配置策略environment-configuration.md几条值得注意的“技能级”约束示例除导航外references 中还沉淀了大量可直接指导 Agent 生成正确代码的硬性约束。以最常被触发的三类为例表单选型来自 angular-developer 正文与 signal-forms.md新应用在 Angular v22 及以上版本应优先 Signal Forms存量老应用或已有表单则沿用项目当前策略模板驱动/响应式。reference 文档同时提示form()由模型 signal 推导结构、模型字段不允许用null/undefined作为初值、submit()的回调必须是async等易错点。命名规范来自 naming-conventions.md该文档贯彻 Angular v20 引入的 “Intent over Role” 哲学——在新项目中去掉.component.ts/.service.ts/.directive.ts这类“角色后缀”文件名与类名直接反映业务意图如auth-data.ts/AuthData同时强调必须优先尊重存量项目既有约定并在不确定时使用传统后缀作为最安全的默认值数据模型接口仍保留.model.ts后缀。响应式状态来自 signals-overview.mdsignal 读取必须通过调用 getter 完成服务对外暴露状态时应使用asReadonly()阻止外部篡改响应式上下文只在同步代码中生效读取 signal 必须放在await之前否则不会被依赖追踪。这些约束文件的共同特点是把“容易写错、且编译期未必报错”的细节显式化这正是 Agent 技能相对于普通文档的核心价值所在。内置技能二angular-new-app从零搭建现代应用angular-new-app把“用 Angular CLI 新建一个现代应用”的完整流程拆成了固定步骤见 angular-new-app/SKILL.md。它要求 Agent 以 TypeScript、Angular 与可扩展 Web 应用专家自居写出功能正确、可维护、高性能且可访问的代码。第 1 步确认 Angular CLI 是否存在创建应用前必须先确认 CLI 环境*nix系统使用which ngWindows 系统使用where ngPowerShell 下可用gcm ng若未安装需要征求用户同意后用npm install -g angular/cli全局安装。技能在此处特别提示Angular CLI 内置了 MCP server可通过ng mcp暴露get_best_practices等工具获取官方最佳实践属于“进阶增强”能力详见下文。第 2 步执行ng new并加载 AI 配置创建命令的标准形态为npx ng new app-name [list of flags based on the description of the app] --interactivefalse --ai-config[agents, claude, copilot, cursor, gemini, jetbrains, none, windsurf]应用名可以基于用户描述推断也可以询问用户。技能建议--ai-config优先使用agents或按 Agent 所处环境选择最合适的值——例如用户使用 Gemini 就传--ai-configgemini生成后应把该 AI 配置的内容加载进上下文以便后续生成代码与对应 IDE/Agent 的 Angular 最佳实践保持一致。根据用户需求可组合的常用 flags 包括Flag含义--stylescss\|css\|less样式表格式--routing添加路由模块--ssr启用服务端渲染--prefixprefix组件选择器前缀--skip-tests跳过测试文件仅在用户明确要求时使用第 35 步构建验证、按需生成、接入 Tailwind创建完成后技能要求“先做出一些功能再启动应用”并主动询问用户是否启动期间可随时运行npx ng build检查错误并修复而不是把带构建错误的应用交给用户。后续生成代码一律走 Angular CLI 脚手架技能逐个列出对应命令并强调记录 generate 命令返回的文件路径以便准确掌握新文件位置先让 CLI 生成骨架再按业务需求增强npx ng generate component component-name npx ng generate service service-name npx ng generate pipe pipe-name npx ng generate directive directive-name npx ng generate interface interface-name npx ng generate guard guard-name npx ng generate interceptor interceptor-name npx ng generate resolver resolver-name npx ng generate enum enum-name npx ng generate class class-name如需 Tailwind则运行npx ng add tailwindcss之后即可直接在模板中使用 Tailwind 类技能同时提示按 Tailwind v4 的最佳实践操作。与 angular-developer 的配合关系从两个技能的分工可以推断出 Angular 团队的思路angular-new-app解决“项目从 0 到 1”的引导问题CLI 检查、脚手架 flags、AI 配置、生成清单angular-developer则解决“持续开发与维护”时的规范问题版本感知、代码生成、构建验收、主题参考库。两者配合基本覆盖了 Agent 参与 Angular 应用开发生命周期的主要阶段。协同工具Angular CLI 内置的 MCP Serverangular-developer的 tooling 领域与angular-new-app都提到了与技能互补的另一能力——Angular CLI 内置的 Model Context ProtocolMCP服务器可让 Cursor、Gemini CLI、JetBrains AI 等 AI 助手直接调用 CLI 能力。默认注册的工具见 references/mcp.md包括工具用途ai_tutor启动交互式 AI Angular 导师devserver.start/devserver.stop启动/停止开发服务器devserver.wait_for_build返回运行中 dev server 最近一次构建日志get_best_practices获取 Angular 最佳实践指南list_projects读取 angular.json 列出所有应用与库onpush_zoneless_migration分析并给出迁移到 OnPush 变更检测的计划run_target执行配置好的构建目标search_documentation检索官方文档启用方式是在宿主 IDE 中让npx angular/cli mcp作为 MCP 服务器启动。以 Gemini CLI 为例在项目根目录创建.gemini/settings.json{ mcpServers: { angular-cli: { command: npx, args: [-y, angular/cli, mcp] } } }还可向 args 追加--read-only仅注册不修改项目的工具或--local-only仅注册不需要联网的工具等选项。技能文件式指令与 MCP命令式工具由此形成互补前者约束 Agent“怎么写才对”后者让 Agent“能真正执行构建、迁移与调试”。在自己的环境中安装与使用这些技能根据 README 的说明Agent Skills 面向 Gemini CLI、Antigravity 等 agentic 编程工具设计。激活activate技能会加载该任务所需的特定指令与资源——这正是它区别于普通在线文档之处不是让 Agent 去检索海量资料而是把与本任务强相关的规则和参考直接推入上下文。官方建议的使用路径有两条遵循你所用 agentic 工具自身的技能安装说明不同工具对技能目录、命名与加载方式各有约定使用社区工具 skills.sh 一键添加整个技能包例如npx skills add angular-skills-collection-url命令中的angular-skills-collection-url指向 Angular 官方技能集合的分发地址。需要说明的是本仓库即技能的权威维护源所有技能的原始内容都保存在skills/dev-skills/目录内配套基础设施会将其同步输出到对外分发渠道。因此即使不依赖第三方工具你也可以直接打开仓库中的 angular-developer/SKILL.md 与 angular-new-app/SKILL.md 查看技能正文并阅读references/下与当前任务对应的主题文档将其中的约束手动带入 Agent 会话。如何参与技能的共建Angular 官方欢迎社区为技能做贡献贡献路径与仓库本身的开发流程保持了一致更新位置直接在本仓库内修改改动集中在skills/dev-skills/目录技能更新经基础设施自动同步到分发仓库提交规范遵循仓库的 提交消息指南 与 编码规范PR 流程向主仓库提交 Pull Request提出新特性、更新或 bug 修复反馈渠道若遇到 bug 或有改进建议在 issue 跟踪器中提交 issue并提供尽量详细的上下文如触发场景、期望行为与实际行为的差异以便维护者高效定位问题。结合正文开头的准则可以理解其意图技能内容本质上是“可以被持续评审、版本化与审计的工程资产”。把技能维护纳入 Angular 既有仓库与贡献流程意味着每条指导都能像代码一样接受 review、被迁移工具更新并随框架版本演进同步修正——这正是 Agent 技能体系与一次性提示词prompt之间的根本区别。【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angular创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
