Claude-skill-registry-data migration-patterns

Query Angular migration patterns and examples. This skill loads the migration documentation and helps with pattern lookup and answering migration questions.

Arguments

• $ARGUMENTS

  - Query keyword or question:

  • table

    - Table migration patterns (CommonTableComponent)

  • form

    - Form patterns (validators, NonNullableFormBuilder)

  • dialog

    - Dialog patterns (config, loading, viewContainerRef)

  • layout

    - Page layout (gl-page-content, content-wrapper)

  • button

    - Button patterns (mat-flat-button, loading states)

  • ddd

    - DDD architecture (domain/features/ui/shell)

  • api

    - API type definitions

  • store

    - SignalStore patterns

  • syntax

    - Angular 20 syntax (@if, @for, inject, signal)

  • validator

    - OneValidators usage

  • error

    - Error handling patterns

  • pitfall

    - Common pitfalls to avoid
  • Or ask any question about migration

Note: For code review/linting, use

/migration-lint

Workflow

Step 1: Load Relevant Documentation

Based on the query, read the appropriate documentation files from

rules/

table

form

dialog

layout

button

ddd

api

store

syntax

validator

error

pitfall

Step 2: Process Query

For keyword queries (table, form, etc.):

• Summarize the key patterns and rules
• Provide code examples
• List common mistakes to avoid

For questions:

• Search through all migration docs
• Provide specific answers with code examples
• Reference the source document

Quick Reference

Table Components (UI Layer)

// Required imports for custom column templates
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';

@Component({
  imports: [
    CommonTableComponent,
    MatSortModule,   // Required for mat-sort-header
    MatTableModule,  // Required for matColumnDef, *matCellDef
  ]
})

Form Validation

import { OneValidators } from '@one-ui/mxsecurity/shared/domain';

// Correct
this.#fb.group({
  name: ['', [OneValidators.required, OneValidators.maxLength(32)]],
  ip: ['', [OneValidators.required, ipv4Validator]]
});

Form Field Tooltip (mxLabelTooltip)

DO NOT use

mat-icon

matTooltip

mxLabelTooltip

mat-label

<!-- WRONG - Don't use mat-icon with info tooltip -->
<div class="form-row">
  <mat-form-field>
    <mat-label>{{ t('field.label') }}</mat-label>
    <mat-select formControlName="field">...</mat-select>
  </mat-form-field>
  <mat-icon class="info-icon" [matTooltip]="t('field.hint')">info</mat-icon>
</div>

<!-- CORRECT - Use mxLabelTooltip -->
<mat-form-field>
  <mat-label mxLabel [mxLabelTooltip]="t('field.hint')">
    {{ t('field.label') }}
  </mat-label>
  <mat-select formControlName="field">...</mat-select>
</mat-form-field>

Required import:

import { MxLabelDirective } from '@moxa/formoxa/mx-label';

@Component({
  imports: [MxLabelDirective]
})

Button Types

<!-- Form submit button -->
<button mat-flat-button color="primary" type="submit">Apply</button>

<!-- Table toolbar button -->
<button mat-stroked-button>Create</button>

Page Layout

<div *transloco="let t" class="gl-page-content">
  <one-ui-breadcrumb />
  <mx-page-title [title]="t('page.title')" />

  <div class="content-wrapper">
    <!-- content here -->
  </div>
</div>

Card Container (IMPORTANT)

DO NOT use

<mat-card>

class="content-wrapper"

<!-- WRONG - Don't use mat-card -->
<mat-card>
  <mat-card-header>...</mat-card-header>
  <mat-card-content>...</mat-card-content>
</mat-card>

<!-- CORRECT - Use content-wrapper -->
<div class="content-wrapper">
  <!-- content here -->
</div>

<!-- If you need mat-card structure, add content-wrapper class -->
<mat-card class="content-wrapper">
  <mat-card-header>...</mat-card-header>
  <mat-card-content>...</mat-card-content>
</mat-card>

The

content-wrapper

• Consistent padding (16px)
• Border radius (8px)
• Surface background color
• Gap between child elements (8px)

Dialog Config

import { mediumDialogConfig } from '@one-ui/mxsecurity/shared/domain';

this.#dialog.open(MyDialog, {
  ...mediumDialogConfig,
  data: dialogData,
  viewContainerRef: this.#viewContainerRef  // Required if dialog uses store
});

Output Format

For keyword queries:

Provide a concise summary with:

1. Key rules (do's and don'ts)
2. Code examples
3. Common mistakes

For questions:

Provide the answer with:

1. Direct answer
2. Code example
3. Source reference (which doc file)