---
name: i18n-key-extraction
description: Extract hardcoded UI strings into Transloco/next-intl keys, kept in sync across en + th. Use on UI text.
---

# Skill: i18n Key Extraction

## When to use

Any user-facing string that's currently hardcoded, or a new string being added.

## Steps

1. Find hardcoded strings in templates/components (and toast/error messages).
2. Add a key under a sensible namespace: `<feature>.<element>.<purpose>` (e.g. `dashboard.cards.summary.title`).
3. Add the key to BOTH `en.json` and `th.json` (Angular) / `messages/{en,th}.json` (Next).
4. Reference via `transloco` (`t('key')`) or `useTranslations` (Next).

## Gotchas

- Every key in `en` MUST exist in `th` and vice-versa — mismatches are bugs (Phase 8 adds a CI check).
- Interpolation: Transloco uses `{{name}}`, next-intl uses `{name}` — don't mix.
- Don't translate proper nouns / code identifiers.
- Pluralization: use the framework's ICU support, not string concatenation.
- Thai has no spaces between words — don't assume word boundaries for truncation.

## Validation

No hardcoded UI strings remain; `en`/`th` key parity; interpolation correct; Thai reviewed.
