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

0•

デザインツール

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.

主な機能

01Domain-Driven Design (DDD) architecture enforcement

02One-UI component and MX design system integration

030 GitHub stars

04Automated Angular 20 syntax transformation (Signals, @if/@for, inject)

05SignalStore and state management conversion from BehaviorSubjects

06Structured migration planning and validation workflows

ユースケース

01Upgrading legacy Angular 16 components to modern standalone Angular 20 syntax

02Refactoring monolithic features into a structured 4-layer DDD architecture

03Replacing RxJS BehaviorSubject patterns with Angular Signals and SignalStore

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add michael0520/milo-claudekit one-ui-migration

For use in Claude.ai and ChatGPT

Download Skill