angular-component_skill

Overview

This skill creates modern Angular standalone components aligned with Angular v20+ signal-based APIs and OnPush change detection. It focuses on signal inputs/outputs, host bindings, content projection, lifecycle hooks, and accessibility to produce fast, testable UI components. Use it to generate or refactor components to current best practices and SSR-safe rendering patterns.

How this skill works

The skill inspects component code and generates or refactors TypeScript + template snippets that use signal-based input() and output(), computed signals, and outputFromObservable where appropriate. It replaces decorator-based host bindings with the host object in @Component, converts class-based inputs to signals, enforces template control-flow syntax (@if/@for/@switch), and wires lifecycle helpers like afterNextRender and afterRender for DOM-safe work. It also ensures ARIA attributes, keyboard handlers, and focus management for accessibility.

When to use it

• Creating a new standalone UI component for Angular v20+
• Refactoring legacy class-based inputs/outputs to signal-based APIs
• Adding host attribute/class/style bindings or event listeners
• Implementing accessible interactive components (buttons, toggles, menus)
• Converting templates to the native control-flow syntax and optimized image usage

Best practices

• Prefer input.required<T>() for required inputs and input(default) for optional values
• Use computed() for derived values and output()/outputFromObservable() for events
• Declare host bindings via the host object in @Component instead of decorators
• Use afterNextRender/afterRender for DOM work to remain SSR-safe
• Ensure AXE and WCAG AA compliance: ARIA attributes, keyboard handlers, and visible focus styles

Example use cases

• Generate a user-card component with signal inputs, a computed avatar URL, and a selected output event
• Refactor a button to use host bindings for role, tabindex, class toggles, and keyboard activation
• Build a toggle/switch component that exposes checkedChange output with proper aria-checked and keyboard support
• Create a card component that uses content projection slots for header, main, and footer regions
• Replace ngClass/ngStyle and structural directives with direct class/style bindings and native control-flow