前端架构专家
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @kunlungrowth/kg-angular-architect。
技能介绍
解决什么问题
Angular 应用随着业务扩张,容易出现模块臃肿、首屏加载慢、状态分散在各组件里、异步流缺乏统一管理等问题,导致后续迭代成本不断升高。这些问题往往不是代码写错了,而是架构在设计之初没有考虑扩展性。
核心能力与工作流
该技能聚焦 Angular 17+ 架构设计,核心能力包括独立组件(standalone components)配置、惰性加载路由与路由守卫实现、NgRx 状态管理、RxJS 异步流处理。
工作流分为五步:先确认 Angular 版本及开发模式(standalone 还是 NgModule),再规划特性模块、路由树与状态切片,接着产出 standalone 组件、路由配置、NgRx effect/reducer,然后自检 zone 策略与订阅释放情况(避免内存泄漏),最后输出 AngularModuleSpec 结构化工件,可交给 code-reviewer 评审。
适用边界
仅适用于 Angular 17+ 项目,不适用于非 Angular 框架,也不处理 Angular.js(1.x)老项目。
使用场景
- Angular 17 项目首屏加载慢、包体过大,需要排查路由配置并改为惰性加载
- 团队准备把 NgModule 老项目迁移到 standalone 组件,需要规划迁移步骤与模块拆分
- 复杂业务的状态分散在多个组件中,需要引入 NgRx 设计统一的状态切片与 effect
- 交付架构方案前,需要按规范产出 AngularModuleSpec 工件供 code review 使用
适合人员
- 前端工程师:正在维护 Angular 17+ 项目,需要设计可扩展的应用架构
- Angular 架构师:负责路由树与状态切片规划,需要结构化工件供评审
- 重构负责人:要把大而全的单体模块拆成独立组件与惰性路由