Agent skill · software engineering · aiskillstore
angular-component
Create modern Angular standalone components following v20+ best practices. Use for building UI components with signal-based inputs/outputs, OnPush change detection, host bindings, content projection, and lifecycle hooks. Triggers on component creation, refactoring class-based inputs to signals, adding host bindings, or implementing accessible interactive components.
Why this skill is useful
Provides specific Angular v20+ component patterns and best practices that the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Angular Component Create standalone components for Angular v20+. Components are standalone by default—do NOT set standalone: true. Component Structure Signal Inputs Signal Outputs Host Bindings Use the host object in @Component—do NOT use @HostBinding or @HostListener decorators. Content Projection Lifecycle Hooks Accessibility Requirements Components MUST: Pass AXE accessibility checks Meet WCAG AA standards Include proper ARIA attributes for interactive elements Support keyboard navigation Maintain visible focus indicators Template Syntax Use native control flow—do NOT use ngIf, ngFor, ngSwitch. Class and Style Bindings Do NOT use ngClass or ngStyle. Use direct bindings: Images Use NgOptimizedImage for static images: For detailed patterns, see references/component-patterns.md.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/angular-component