What architectural pattern does it enforce?

It follows a strict 4-layer Domain-Driven Design (DDD) structure: Domain (logic), Features (state/store), UI (pure components), and Shell (routing).

Does this skill add new features during migration?

No, the core principle is 'Migrate, Don't Innovate.' It ensures 100% behavior parity with the legacy application while updating the underlying code structure.

What versions of Angular does this skill support?

This skill is specifically optimized for migrating projects from Angular 16 to Angular 20, focusing on the latest standalone and signal-based features.

Does it support UI component transformation?

Yes, it includes specific rules and guides for converting legacy components to MX components, common tables, dialogs, and standardized page layouts.

How does it handle state management?

It transforms legacy BehaviorSubject and constructor-injection patterns into modern Angular Signals, SignalStore, and the inject() function.

One-UI Angular Migration

Name: One-UI Angular Migration
Author: Michael0520

byMichael0520

デザインツール

Orchestrates the migration of Angular 16 applications to Angular 20 using Domain-Driven Design and SignalStore patterns.

概要

The One-UI Migration skill is a specialized tool designed to assist developers in upgrading legacy Angular 16 projects to Angular 20 while adhering to strict architectural standards. It focuses on converting components to modern standalone syntax, implementing SignalStore for state management, and maintaining 100% behavior parity with original systems. By following a structured Domain-Driven Design (DDD) approach across four layers—Domain, Features, UI, and Shell—it ensures that features are reorganized efficiently without introducing unnecessary innovations or breaking existing functionality.

主な機能

Domain-Driven Design (DDD) architecture enforcement
One-UI component and MX design system integration
0 GitHub stars
Automated Angular 20 syntax transformation (Signals, @if/@for, inject)
SignalStore and state management conversion from BehaviorSubjects
Structured migration planning and validation workflows

ユースケース

Upgrading legacy Angular 16 components to modern standalone Angular 20 syntax
Refactoring monolithic features into a structured 4-layer DDD architecture
Replacing RxJS BehaviorSubject patterns with Angular Signals and SignalStore

概要

主な機能

Domain-Driven Design (DDD) architecture enforcement
One-UI component and MX design system integration
0 GitHub stars
Automated Angular 20 syntax transformation (Signals, @if/@for, inject)
SignalStore and state management conversion from BehaviorSubjects
Structured migration planning and validation workflows

ユースケース

Upgrading legacy Angular 16 components to modern standalone Angular 20 syntax
Refactoring monolithic features into a structured 4-layer DDD architecture
Replacing RxJS BehaviorSubject patterns with Angular Signals and SignalStore