Agent skill · software engineering · aiskillstore
angular-20-standalone-component
Create Angular 20 standalone components using modern patterns: Signals for state management, input()/output() functions (not decorators), @if/@for/@switch control flow (not *ngIf/*ngFor), inject() dependency injection (not constructor), and OnPush change detection. Use this skill when scaffolding new UI components that need reactive state, form handling, or integration with services following the three-layer architecture.
Why this skill is useful
Adds a complete Angular 20 component template with modern patterns and practices that are not widely documented, enabling the AI to scaffold components effectively.
What it needs
Requires angular installed locally. About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Angular 20 Standalone Component Skill This skill helps create Angular 20 components following modern patterns and project standards. Core Principles Modern Angular 20 Patterns Standalone Components: 100% standalone, zero NgModules Signals: Use signal(), computed(), effect() for state New Syntax: input(), output(), @if, @for, @switch inject(): Function-based dependency injection OnPush: Change detection strategy for performance Architecture Integration Presentation Layer: Components handle UI only Service Integration: Inject services for business logic No Direct Repository: Never inject repositories directly Event-Driven: Use EventBus for cross-module communication Component Template Key Patterns 1. Signal State Management 2. Control Flow Syntax 3. Input/Output Functions 4. Dependency Injection 5. Subscriptions Component Types Smart Component (Container) Presentational Component (Pure) Form Handling Checklist When creating a component: [ ] Standalone component with imports [ ] Uses signal() for state [ ] Uses computed() for derived state [ ] Uses input()/output() functions [ ] Uses @if/@for/@switch syntax [ ] Uses inject() for dependencies [ ] OnPush change detection [ ] No business logic in component [ ] Proper error handling [ ] Loading states [ ] Empty states [ ] TypeScript strict typing References Angular Instructions Signals State Management-signals-state.instructions.md) Architecture Guide-architecture.instructions.md)
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/angular-20-standalone-component