Angular i18n Refactoring Skill (Namespaced)

Use this skill to systematically refactor Angular components for internationalization (ngx-translate) using a nested JSON structure (Namespaces).

workflow

1. Scan and Extract

• Analyze the user-selected HTML file.
• Determine the Namespace based on the component name (e.g., UserProfileComponent -> USER_PROFILE).
• Identify all hardcoded text nodes and static attributes (specifically placeholder, title, alt, aria-label).
• Generate keys nested under the namespace in UPPER_SNAKE_CASE (e.g., Namespace: USER_PROFILE, Key: SUBMIT_BTN).

2. Template Refactoring (HTML)

• Replace text content with the pipe syntax using dot notation: {{ 'NAMESPACE.KEY' | translate }}.
  • Example: {{ 'USER_PROFILE.SUBMIT_BTN' | translate }}
• Replace attributes with bound syntax: [placeholder]="'NAMESPACE.KEY' | translate".