Skill

compare-i18n-keys

Compare translation keys between legacy Angular translate pipe and new Transloco t() function. Use when migrating i18n keys from old codebase to new codebase, or when the user asks to compare/fix translation keys.

From one-ui-migration
Install
1
Run in your terminal
$
npx claudepluginhub michael0520/milo-claudekit --plugin one-ui-migration
Tool Access

This skill uses the workspace's default tool permissions.

Skill Content

Compare translation keys between legacy Angular translate pipe and new Transloco t() function, then fix the new project.

Arguments

  • $ARGUMENTS - Format: --from <source_path> --to <target_path>
    • --from: Source HTML file in old project
    • --to: Target HTML file in new project

Process

Step 1: Extract Keys from Source (Legacy Angular)

Read the source file and extract translation keys using these patterns:

Pattern 1: Basic translate pipe

{{ 'key' | translate }}

Pattern 2: Translate pipe with parameters

{{ 'key' | translate: { param: value } }}

Pattern 3: Translate in attribute

placeholder="{{ 'key' | translate }}"
label="{{ 'key' | translate }}"
matTooltip="{{ 'key' | translate }}"

Step 2: Extract Keys from Target (Transloco)

Read the target file and extract translation keys using these patterns:

Pattern 1: Basic t() function

{{ t('key') }}
t('key')

Pattern 2: t() in attribute binding

[label]="t('key')"
[placeholder]="t('key')"
[matTooltip]="t('key')"

Step 3: Compare and Generate Report

Create a comparison report with:

CategoryDescription
OKKey matches exactly
DIFFERENTKey exists but different (may be intentional)
MISSINGSource key not found in target
EXTRATarget key not in source (informational)

Step 4: Output Report

# i18n Key Comparison Report

**Source:** {from_path}
**Target:** {to_path}

## Summary

| Category | Count |
|----------|-------|
| Matching Keys | X |
| Different Keys | Y |
| Missing Keys | Z |

**Match Rate: XX%**

## Missing Keys (Need Fix)

| Source Key | Context |
|------------|---------|
| `key.name` | Where it's used |

## Different Keys (Review)

| Source Key | Target Key |
|------------|------------|
| `old.key` | `new.key` |

Step 5: Apply Fixes

If user confirms, fix the target file by replacing incorrect keys with correct ones from source.

Usage

/compare-i18n-keys --from=/path/to/legacy/component.html --to=/path/to/new/component.html
Similar Skills
cache-components

Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.

138.5k
Stats
Parent Repo Stars0
Parent Repo Forks0
Last CommitJan 24, 2026