skills.rest
Abildtoft
AbildtoftCOMMUNITY
Explore all skills by this author →
GitHub

kramme:connect-modernize-legacy-angular-component

Modernizes legacy Angular components in the Connect monorepo to ComponentStore, OnPush, standalone components, and typed forms.

2|2|Updated Jan 15, 2026
Search Tags:#angular#migration#refactor#standalone#on-push#typed-forms#component-store
One-click install
npx skills add https://github.com/Abildtoft/kramme-cc-workflow --skill kramme-connect-modernize-legacy-angular-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kramme:connect-modernize-legacy-angular-component
Source: https://github.com/Abildtoft/kramme-cc-workflow/tree/main/skills/kramme%3Aconnect-modernize-legacy-angular-component
Command: npx skills add https://github.com/Abildtoft/kramme-cc-workflow --skill kramme-connect-modernize-legacy-angular-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps engineers modernize legacy Angular components in the Connect monorepo by outlining a migration path to contemporary patterns and architectures.

Core Features & Use Cases

  • Provides a structured migration approach from legacy components (extending FormComponent/BaseComponent and using @Select) to modern components using NgRx ComponentStore, OnPush change detection, standalone components, and typed FormGroup/FormControl possibilities.
  • Documents recommended patterns, code structure, and common pitfalls to avoid during migration.
  • Offers references and examples to guide teams through the refactor and ensure consistency across the codebase.

Quick Start

Read the migration guidelines, locate a legacy Angular component that extends a base class and uses older state management, and apply the ComponentStore pattern with typed forms and OnPush strategy.

Frequently Asked Questions about kramme:connect-modernize-legacy-angular-component

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

FAQPage Schema
How do I migrate legacy Angular components to standalone and OnPush change detection?▼

You migrate legacy Angular components to standalone and OnPush by removing base class extensions, importing standalone dependencies directly, and setting ChangeDetectionStrategy.OnPush to optimize change detection cycles and enforce component isolation.

What is the best way to replace @Select decorators with NgRx ComponentStore?▼

The best way to replace @Select decorators with NgRx ComponentStore is to inject ComponentStore into your component, define local state slices, and use selectors to expose observable streams, ensuring localized state management instead of global store coupling.

How do I refactor legacy Angular FormComponent to use typed FormGroup?▼

To refactor legacy Angular FormComponent to typed forms, you remove the base class extension and define a strongly-typed FormGroup using FormBuilder, ensuring type safety for form control values and template bindings during the modernization process.

Can I modernize Angular templates and tests when migrating to ComponentStore?▼

Yes, you can modernize Angular templates and tests during ComponentStore migration by replacing legacy template bindings with async pipe usage for observables and updating test setups to mock the ComponentStore state and selectors.

What are the common pitfalls when refactoring legacy Angular components?▼

Common pitfalls when refactoring legacy Angular components include incomplete removal of global state dependencies, improper ComponentStore cleanup causing memory leaks, and failing to update template change detection bindings to support the OnPush strategy.

Related Skills

Explore More Software Engineering Skills→
AratKruglikAratKruglik
9

angular-conventions

Detect Angular project conventions and apply matching bootstrap and pattern guidelines.

Community
Advanced
nguyenthienthanhnguyenthienthanh
24

angular-expert

Optimize Angular 17+ components and state management with signals and RxJS.

Community
Advanced
AbildtoftAbildtoft
2

kramme:connect-migrate-legacy-store-to-ngrx-component-store

Migrate legacy NgRx CustomStore and FeatureStore patterns to NgRx ComponentStore services.

Community
Advanced
matteocervellimatteocervelli
25

architecture-planner

Plan component architecture and module structure for feature implementations.

Community
Advanced