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