Angular Core

What it does

This skill generates Angular components, services, modules, and pipes based on specifications, adhering to best practices for modern Angular development. It focuses on creating standalone components by default and leverages Signals for state management instead of traditional lifecycle hooks or RxJS where possible. The generated code emphasizes function-based input/output bindings over decorator-based approaches.

When to use it

• You need to quickly generate boilerplate Angular component structures.
• You want to ensure your new components follow modern Angular architectural patterns using Signals.
• You're building a new Angular project and want a consistent code style for your components.
• You are refactoring existing Angular components to use Signals instead of lifecycle hooks.

Key capabilities

• Generates standalone Angular components by default.
• Creates input/output functions using the function-based approach (e.g., readonly user = input.required<User>();).
• Implements state management using Angular Signals for reactivity and derived values.
• Provides examples of how to use effect() for side effects and computed properties for derived data.
• Demonstrates the correct usage of inject() for dependency injection, avoiding constructor-based injection.
• Generates native control flow structures like @if, @for, and @switch.

Example prompts

• "Generate a UserComponent with an input for userId and display the user's name."
• "Create a component that uses Signals to track a count value and its doubled value."
• "Show me how to use inject() to get the HttpClient service in an Angular component."

Tips & gotchas

• The skill enforces standalone components; setting standalone: true is discouraged.
• Traditional lifecycle hooks (e.g., ngOnInit, ngOnChanges) are not supported and should be replaced with Signals and effects.
• Signals are the preferred method for managing component state, use RxJS only when dealing with complex asynchronous operations.