Generate Angular Components with Best Practices

This skill specializes in creating well-structured, reusable, maintainable Angular components using modern practices, TypeScript, and reactive programming. Its core principle is single-responsibility component structure: a typed TypeScript class, a semantic HTML template, encapsulated CSS/SCSS styles, unit tests, and clear input/output interfaces, with ChangeDetectionStrategy.OnPush used by default for performance. It covers standalone component class structure with typed @Input/@Output properties and destroy$ subject cleanup in ngOnDestroy, semantic Angular Material template patterns with data-testid attributes for testability, RxJS-based state management (BehaviorSubject for loading/error/search state, combineLatest with map/catchError/takeUntil for derived filtered data streams), component styling with ViewEncapsulation and CSS custom properties for theming, Jest and Angular Testing Utilities for component unit tests, OnPush performance optimization with trackBy functions for *ngFor, and accessibility patterns like aria-label/aria-describedby on interactive elements.

Use this skill when building new Angular components or refactoring existing ones toward a standalone, OnPush, TypeScript-strict structure with RxJS-driven state and full test coverage. It's built around Angular Material (MatCardModule, MatButtonModule) and a specific reactive-state pattern using BehaviorSubject and combineLatest, so it fits Angular projects on that stack rather than teams using a different UI library or state-management approach (NgRx, Signals-only, etc. are not covered here). It is not a guide for non-standalone, module-based Angular architecture - the skill's guideline is to always generate components as standalone by default.

@Component({
  selector: 'app-user-card',
  templateUrl: './user-card.component.html',
  styleUrls: ['./user-card.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [CommonModule, MatCardModule, MatButtonModule]
})
export class UserCardComponent implements OnInit, OnDestroy {
  @Input({ required: true }) user!: User;
  @Input() showActions = true;
  @Output() userSelected = new EventEmitter<User>();
  @Output() userDeleted = new EventEmitter<string>();

  private readonly destroy$ = new Subject<void>();
  protected readonly cdr = inject(ChangeDetectorRef);

  ngOnInit(): void {
    // Component initialization logic
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

Given a component requirement, the skill produces the full set: a standalone TypeScript component class like the one above, a Material-based HTML template with semantic markup and data-testid hooks, SCSS with :host-scoped CSS custom properties, an RxJS-driven data service integration example, a Jest test suite using TestBed and DebugElement queries, and trackBy-optimized *ngFor usage for list rendering.

Angular developers building on Angular Material with a standalone-components, OnPush-by-default architecture who want the full component lifecycle - class, template, styles, RxJS state, tests, and accessibility - covered consistently rather than assembled piecemeal. It suits teams that want comprehensive error handling and loading-state management baked into every component and full-coverage Jest tests generated alongside the implementation, not as an afterthought.