angular-component_skill

Overview

This skill helps create and modify Angular v20+ standalone components, directives, and pipes that follow a consistent project pattern. It enforces signal-based inputs/outputs, modern control flow in templates, inject() DI, and OnPush change detection. Use it to scaffold components placed in domain-based feature or ui subfolders with separate template and style files.

How this skill works

The skill inspects create/modify requests that mention components, directives, or pipes and generates TypeScript component classes, HTML templates, and SCSS files following the project's conventions. It produces signal-based inputs/outputs, uses inject() for dependency injection, applies ChangeDetectionStrategy.OnPush, and uses @if/@for/@switch control flow in templates. It also ensures selector naming, file placement, host bindings/listeners, and avoids importing CommonModule or RouterModule.

When to use it

• Creating a new standalone component in an existing Angular v20+ app
• Adding or updating a presentational (ui) or feature container component
• Converting constructor DI or ngIf/ngFor templates to modern patterns
• Scaffolding a component with signal-based inputs/outputs and host bindings
• Preparing components for deferred loading or viewport-based rendering

Best practices

• Place each component in its own subfolder under src/app/<domain>/feature or /ui
• Use ChangeDetectionStrategy.OnPush and inject() for all dependencies
• Expose inputs with input() and outputs with output(), use model() for two-way binding
• Prefer @if/@for/@switch in templates and class/style bindings instead of ngClass/ngStyle
• Import only required standalone directives/components; do not import CommonModule or RouterModule
• Keep template and styles in separate files and use kebab-case selectors with app- prefix

Example use cases

• Scaffold a feature container component that fetches data via an injected service and emits selection events
• Create a small presentational button component with boolean attribute input transformation and click output
• Refactor a list component from *ngFor/*ngIf to @for and @if with proper track-by usage
• Add deferred viewport loading for a heavy visualization component with placeholder and loading states
• Add host listeners and ARIA attributes via the component host configuration