$npx -y skills add PascaleBeier/hitkeep --skill hitkeep-i18nMaintain HitKeep dashboard localization. Use whenever a contributor adds or changes user-visible dashboard text, Transloco keys, locale JSON files, PrimeNG locale behavior, language switching, translated labels, localized layout, date/number/duration formatting, or supported dash
| 1 | # HitKeep i18n |
| 2 | |
| 3 | Treat `AGENTS.md` as policy, the locale files and runtime configuration as language truth, and `hk` as QA truth. Do not copy the supported-language list or validation commands into other instructions. |
| 4 | |
| 5 | HitKeep uses Transloco JSON for UI copy, locale-aware formatting helpers and browser `Intl`, and a synchronization service for PrimeNG labels. Discover the current locale set from `frontend/dashboard/public/i18n` and confirm it against runtime configuration before editing. |
| 6 | |
| 7 | ## Workflow |
| 8 | |
| 9 | 1. Search for the existing feature key before creating a new key. |
| 10 | 2. Put user-visible Angular template text behind `TranslocoPipe`. |
| 11 | 3. Use `TranslocoService` for computed labels in TypeScript. |
| 12 | 4. Add the same key path and value shape to every currently supported locale file. |
| 13 | 5. Keep key names semantic and grouped by feature. |
| 14 | 6. Preserve interpolation variables exactly. Do not translate variable names or change placeholder syntax. |
| 15 | 7. For computed option labels, depend on the active language so labels recompute after language switches. |
| 16 | 8. For dates, numbers, percentages, and durations, prefer the existing locale services or helpers instead of manual string formatting. |
| 17 | 9. Let PrimeNG locale text flow through the existing sync service instead of hardcoding component labels. |
| 18 | 10. Keep labels usable in buttons, tabs, chips, table columns, dialogs, and mobile layouts; visually inspect a long-string locale when layout risk exists. |
| 19 | |
| 20 | Inspect only the surfaces relevant to the change: |
| 21 | |
| 22 | - `frontend/dashboard/src/app/app.config.ts` |
| 23 | - `frontend/dashboard/src/app/transloco-loader.ts` |
| 24 | - `frontend/dashboard/src/app/core/i18n/` |
| 25 | - `frontend/dashboard/scripts/check-i18n-locales.mjs` |
| 26 | - `frontend/dashboard/scripts/sync-i18n-locales.mjs` |
| 27 | |
| 28 | Do not infer a new supported language from an Angular locale helper alone. Change language support only when Transloco configuration, locale files, formatting mappings, tests, and product documentation agree. |
| 29 | |
| 30 | ## Translation Quality |
| 31 | |
| 32 | Translate product UI, not individual English words. |
| 33 | |
| 34 | - Write natural product language with correct punctuation, accents, and grammar. |
| 35 | - Reuse established feature terminology from nearby keys rather than translating English words in isolation. |
| 36 | - Preserve product names and technical identifiers intentionally; do not translate interpolation variables. |
| 37 | - Do not claim native-speaker review unless it happened. |
| 38 | |
| 39 | Keep analytics terminology consistent across all languages. If the repo already uses a term for "site", "team", "event", "goal", "funnel", "share link", "API client", "QR campaign", or "Opportunity", reuse it. |
| 40 | |
| 41 | ## Validate |
| 42 | |
| 43 | Add or update focused tests for language switching, computed labels, locale formatting, or PrimeNG synchronization when behavior changes. Use `$hitkeep-qa` to query and run the current gates matching locale, formatting, unit, and browser risk; do not reproduce their commands here. If a locale synchronization utility changes files, review every resulting change before keeping it. |
| 44 | |
| 45 | ## Output For Reviews |
| 46 | |
| 47 | Report changed key paths, the locale files updated, focused behavior coverage, the `hk` QA profile and stable gate results, and any wording or layout caveats. Keep successful logs out of the report. |