---

name: one-ui-migration description: Migrating Angular 16 to 20 with DDD architecture and SignalStore patterns. Use when converting components, structuring features, or following One-UI migration standards. license: MIT compatibility: Requires Angular 20+ project with @ngrx/signals, @one-ui/shared dependencies allowed-tools: Read, Bash, Edit, Write, Glob, Grep

One-UI Migration Skill

Core Principle: MIGRATE, DON'T INNOVATE — 100% behavior parity with Legacy

Task Router

What tool do I need?

⭐ Enhanced | 🆕 New

What do I need to build?

Reference

⭐ Enhanced | 🆕 New

---

Quick Reference

Essential Transforms

DDD 4-Layer Quick Decision

CopyHTTP/Business logic?  → domain/
Injects Store?        → features/
Pure I/O?             → ui/
Route definitions?    → shell/

Critical Migration Rules (NEW)

Form Validation Error Display:

Copy✅ Basic validators (required, maxLength, range) → Use oneUiFormError directive
❌ Pattern validators → MUST use @if/@else with custom messages
❌ Custom validators → MUST use @if/@else with custom messages

DDD Violations to Avoid (see rules/reference/pitfalls.md):

Copy❌ Violation 0: Page form template in features/ (MOST COMMON!)
❌ Violation 1: UI component injecting Store
❌ Violation 2: Dialog in ui/ layer
❌ Violation 3: Business logic in features/
❌ Violation 4: UI form making HTTP calls

Forbidden Patterns

Copy❌ Add features not in Legacy
❌ "Improve" Legacy behavior
❌ Create new API endpoints
❌ Use `any` type
❌ Use BehaviorSubject
❌ Use constructor injection
❌ Use mat-raised-button (use mat-flat-button)
❌ Use text icons (use svgIcon="icon:xxx")
❌ Add padding to page components
❌ Create new translation keys

---

Activation Triggers

• "migrate this component"
• "convert to standalone"
• "how should I structure this"
• "where should this go"
• "what's the pattern for"
• "check migration rules"

---

Rules Directory Structure

Copyrules/
├── index.md                    # Router entry
├── tools/                      # Tool reference (9 files + 3 subdirs)
│   ├── one-validators.md
│   ├── form-builder.md
│   ├── signal-store.md
│   ├── loading-states.md
│   ├── common-table.md
│   ├── mx-components.md
│   ├── routing.md
│   ├── transloco.md
│   ├── auth.md
│   ├── forms/                  # Form patterns
│   ├── tables/                 # Table patterns
│   └── ui/                     # UI patterns (dialogs, page-layout, buttons)
├── guides/                     # Integration guides (3 files)
│   ├── create-page.md
│   ├── create-dialog.md
│   └── create-table.md
└── reference/                  # Reference (3 files)
    ├── ddd-architecture.md
    ├── angular-20-syntax.md
    └── checklist.md

---

Migration Planning

For complex migrations, use migration-planning skill:

Copy/one-ui-migration:plan {feature-name}

This integrates superpowers:brainstorming and superpowers:writing-plans with tool reference checklists.

See: skills/migration-planning/SKILL.md

---

Post-Migration Validation

Use one-ui-migration-checker agent:

Copy"check migration for libs/mxsecurity/{feature}"