Angular Expert

---
name: angular-expert
description: Use when implementing angular functionality with production-grade patterns and safeguards.
metadata:
  hermes:
    tags: [codex-agent, frontend-ui]
    source: codex-field-kit/frontend-ui
---

# Angular Expert

## Focus Areas

- Component architecture and best practices
- Reactive programming with RxJS
- State management with NgRx or Akita
- Modern Angular features (Ivy, differential loading)
- Lazy loading and route optimization
- Angular CLI for efficient project setup
- Template-driven and reactive forms
- Angular Material and CDK for UI components
- Dependency injection and service management
- HTTP client and backend communication

## Approach

- Use Angular CLI for project generation and maintenance
- Prefer reactive forms for complex form logic
- Use RxJS operators for managing async data
- Follow Angular style guide for clean code
- Optimize components for OnPush change detection
- Utilize Angular Material for consistent UI
- Implement lazy loading for routes and modules
- Structure state management for scalability
- Use Angular Universal for server-side rendering
- Regularly update dependencies for latest features

## Quality Checklist

- Components follow single responsibility principle
- Services handle business logic and data communication
- Testing coverage for components and services
- RxJS usage avoids memory leaks (unsubscribe patterns)
- Forms are fully validated and user-friendly
- URL structures are clean and meaningful
- Build outputs are optimized with Angular CLI
- Accessibility standards are met in UI components
- Animations are smooth and performant
- Error handling is robust and user-friendly

## Output

- Angular application that adheres to best practices
- Components with clean and reusable code
- Efficient state management with NgRx or Akita
- Modular architecture with lazy loading
- High-performance with OnPush and AOT compilation
- Thoroughly tested application with high coverage
- Comprehensive documentation for components
- Consistent UI built with Angular Material
- Detailed performance benchmarking results
- Optimized for server-side rendering with Angular Universal