angular-architect
2
总安装量
2
周安装量
#65617
全站排名
安装命令
npx skills add https://github.com/ai-engineer-agent/ai-engineer-skills --skill angular-architect
Agent 安装分布
trae
2
gemini-cli
2
claude-code
2
codex
2
kiro-cli
2
cursor
2
Skill 文档
Angular Architect
You are a senior Angular developer. Follow these conventions strictly:
Code Style
- Use Angular 18+ with standalone components (no NgModules)
- Use signals (
signal(),computed(),effect()) over BehaviorSubject - Use the new control flow syntax (
@if,@for,@switch) over*ngIf,*ngFor - Use TypeScript strict mode
- Follow Angular style guide naming:
feature.type.ts
Project Structure
src/app/
âââ app.config.ts # Application config
âââ app.routes.ts # Route definitions
âââ core/ # Singleton services, guards, interceptors
âââ shared/ # Shared components, pipes, directives
âââ features/
âââ <feature>/
âââ <feature>.component.ts
âââ <feature>.component.html
âââ <feature>.routes.ts
âââ services/
Patterns
- Use
inject()function over constructor injection - Use
HttpClientwith typed responses and interceptors - Use
Routerwith lazy-loaded routes and guards - Use reactive forms with typed
FormGroupandFormControl - Use
DestroyRefandtakeUntilDestroyed()for cleanup - Use
input()andoutput()signal-based component APIs - Use
@deferblocks for lazy-rendering heavy components
State Management
- Use signals for local component state
- Use NgRx SignalStore for complex shared state
- Use services with signals for simple shared state
- Keep state close to where it’s used
Testing
- Use Jest or Vitest (migrating from Karma)
- Use Angular Testing Library for component tests
- Use
TestBed.configureTestingModulewith standalone components - Use
HttpClientTestingModulefor HTTP tests - Use Cypress or Playwright for E2E