components

Refactor Angular v21 apps into standalone components with OnPush and signals.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/satish-krishna/sigil --skill components-satish-krishna
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: components
Source: https://github.com/satish-krishna/sigil/tree/main/.claude/skills/components
Command: npx skills add https://github.com/satish-krishna/sigil --skill components-satish-krishna

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Master Angular v21 standalone component architecture provides patterns for component design, dependency injection, smart/dumb component patterns, and OnPush change detection to improve maintainability and performance.

Core Features & Use Cases

  • Standalone component architecture with OnPush change detection and signals-first design.
  • Dependency injection patterns using inject() and clear container/presentational role separation.
  • Testing component interactions and lifecycle management across feature boundaries.

Quick Start

Refactor a feature into Angular v21 standalone components using inject-based DI, OnPush change detection, and signals-driven state.

Frequently Asked Questions about components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I refactor an Angular app into standalone components with OnPush?

To refactor into Angular standalone components, you transition feature modules into standalone components using inject() for dependency injection and ChangeDetectionStrategy.OnPush with signals-driven state for scalable UI architecture.

What is the best way to structure container and presentational components in Angular?

The best way to structure container and presentational components is by establishing clear role separation using dependency injection with inject() and signals-first design to manage state and interactions across feature boundaries.

Does this Angular component architecture require a specific version?

Yes, this component architecture requires Angular v21 to leverage standalone components, signals, and the inject() function for dependency injection, ensuring scalable OnPush change detection across large teams.

How does using signals with OnPush change detection improve Angular performance?

Using signals with OnPush change detection improves Angular performance by adopting a signals-first design that optimizes state management, reduces unnecessary renders, and maintains maintainable component lifecycles.

Can I use inject() for dependency injection across standalone components?

Yes, you can use inject() for dependency injection across standalone components to establish clear container/presentational component separation and manage testing interactions across feature boundaries.

When do I need standalone components instead of NgModules for large teams?

You need standalone components instead of NgModules when building feature-rich UIs for large teams that require scalable architectures, OnPush change detection, and signals-driven state for maintainable component lifecycles.