skills.rest
codewizwit
codewizwitCOMMUNITY
Explore all skills by this author →
GitHub

angular-modern

Generate and migrate Angular 16+ code using signals, standalone components, and modern control flow.

1|Updated Oct 11, 2025
Search Tags:#typescript#frontend#angular#migration#signals#standalone components#reactive state
One-click install
npx skills add https://github.com/codewizwit/human-in-the-loop --skill angular-modern-codewizwit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-modern
Source: https://github.com/codewizwit/human-in-the-loop/tree/main/lib/skills/angular-modern
Command: npx skills add https://github.com/codewizwit/human-in-the-loop --skill angular-modern-codewizwit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Angular developers working with version 16+ need consistent guidance on signals, standalone components, and new control flow syntax, while legacy patterns like NgModules, @Input decorators, and RxJS subscriptions still dominate older codebases and documentation. ## Core Features & Use Cases - Signal-Based Component Generation: Create standalone components using signal(), computed(), effect(), and signal-based input()/output() APIs. - Legacy Migration: Convert NgModule-based components, @Input/@Output decorators, structural directives, and RxJS state into modern signal-based equivalents. - State Management & Data Loading: Set up service-level signal state with asReadonly() encapsulation and declarative async loading via the resource() API (Angular 19+). - Use Case: Ask to convert an NgModule-based product list component to standalone with signals, and receive refactored code using input.required(), @for with track expressions, and computed derived values. ## Quick Start Ask the assistant to build an Angular component using signals and modern control flow, or to migrate a legacy component to standalone with signal-based inputs and outputs.

Frequently Asked Questions about angular-modern

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

FAQPage Schema
How do I use Angular signals for component state?▼

Create writable state with signal(initialValue), read it by calling it as a function, and update it with .set() or .update(). Use computed() for derived values and effect() only for side effects like localStorage or DOM updates.

How to migrate @Input and @Output decorators to signal inputs in Angular?▼

Replace @Input() with input() or input.required<T>() and read values by calling them as functions. Replace @Output() with EventEmitter by using output<T>() and calling .emit(value) to notify parent components.

What Angular version is required for signals and the resource API?▼

Signals and standalone components require Angular 16.0.0 or higher with TypeScript 4.9+. Signal inputs need Angular 17.1+, signal outputs need 17.2+, and the resource() API requires Angular 19.0.0 or higher.

Should I use signals or RxJS for Angular state management?▼

Use signals for component and service state instead of BehaviorSubject, and computed() instead of combineLatest or map pipelines. Keep RxJS only for complex async streams like websockets or debounced search, bridging with toSignal() when needed.

When should I avoid using effect() in Angular?▼

Avoid effect() for deriving state or updating other signals, since that creates circular dependencies; use computed() instead. Reserve effect() for side effects like DOM manipulation, localStorage writes, logging, or analytics.

Related Skills

Explore More Software Engineering Skills→
Blotch-Smart-FramesBlotch-Smart-Frames

angular-developer

Generates Angular code and architectural guidance for components, signals, forms, routing, and testing.

Official
Advanced
Blotch-Smart-FramesBlotch-Smart-Frames

angular-testing

Write unit and integration tests for Angular v20+ applications using Vitest or Jasmine.

Official
Intermediate
SylphxAISylphxAI
4

code-quality

Enforces strict TypeScript code quality by reviewing, refactoring, and auditing maintainability.

Official
Intermediate
jikimejikime
5

jikime-migration-angular-to-nextjs

Migrate Angular applications to Next.js 16 App Router architecture.

Community
Advanced