Uses i18next-browser-languagedetector for language auto-detection
Fallback language: en
Type declarations: apps/frontend/src/types/i18next.d.ts
Pattern 2: Translation files
Location: apps/frontend/src/locales/{lang}.json
Current languages:
en (English)
es (Spanish)
Single namespace: translation (default)
Resources are eagerly loaded (not lazy-loaded)
Pattern 3: Key naming convention
Nested dot-notation groups:
common.loading, common.cancel, common.search
common.errors.pageNotFound
common.trackStatus.error
common.dates.todayAt (interpolation)
Use camelCase key names, for example:
downloadAll
clearAll
openInSpotify
Pattern 4: Usage in components
import { useTranslation } from "react-i18next";
const { t } = useTranslation();
// Simple: t("common.loading")
// Interpolation: t("common.dates.todayAt", { time: "14:30" })
// In hook: t("library.empty")
Pattern 5: Adding a new language
Create apps/frontend/src/locales/{new-lang}.json (copy from en.json)
Import it in apps/frontend/src/i18n.ts
Add it to the resources object
Update i18next.d.ts declarations if needed
Pattern 6: Type safety
i18next.d.ts declares CustomTypeOptions based on en.json
This enables autocomplete/type-safe translation key usage
Gotchas
Add new keys to ALL language files to avoid missing translation drift
escapeValue: false is configured (HTML in translations is not escaped)
Language detector runs at init; user preference sync is handled by useLanguageSync
Commands
No specific commands.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: mralexsaavedra-spotiarr-spotiarr-i18n3description: When to Use4---56## When to Use78- Adding or modifying translation strings9- Working with i18n keys in React components/hooks10- Adding a new frontend language11- Updating typed key support for translations1213## Critical Patterns1415### Pattern 1: Setup1617- Config file: `apps/frontend/src/i18n.ts`18- Uses `i18next-browser-languagedetector` for language auto-detection19- Fallback language: `en`20- Type declarations: `apps/frontend/src/types/i18next.d.ts`2122### Pattern 2: Translation files2324- Location: `apps/frontend/src/locales/{lang}.json`25- Current languages:26 - `en` (English)27 - `es` (Spanish)28- Single namespace: `translation` (default)29- Resources are eagerly loaded (not lazy-loaded)3031### Pattern 3: Key naming convention3233- Nested dot-notation groups:34 - `common.loading`, `common.cancel`, `common.search`35 - `common.errors.pageNotFound`36 - `common.trackStatus.error`37 - `common.dates.todayAt` (interpolation)38- Use camelCase key names, for example:39 - `downloadAll`40 - `clearAll`41 - `openInSpotify`4243### Pattern 4: Usage in components4445```tsx46import { useTranslation } from "react-i18next";4748const { t } = useTranslation();49// Simple: t("common.loading")50// Interpolation: t("common.dates.todayAt", { time: "14:30" })51// In hook: t("library.empty")52```5354### Pattern 5: Adding a new language55561. Create `apps/frontend/src/locales/{new-lang}.json` (copy from `en.json`)572. Import it in `apps/frontend/src/i18n.ts`583. Add it to the `resources` object594. Update `i18next.d.ts` declarations if needed6061### Pattern 6: Type safety6263- `i18next.d.ts` declares `CustomTypeOptions` based on `en.json`64- This enables autocomplete/type-safe translation key usage6566### Gotchas6768- Add new keys to ALL language files to avoid missing translation drift69- `escapeValue: false` is configured (HTML in translations is not escaped)70- Language detector runs at init; user preference sync is handled by `useLanguageSync`7172## Commands7374No specific commands.7576---77> Converted and distributed by [TomeVault](https://tomevault.io/claim/mralexsaavedra) — claim your Tome and manage your conversions.78<!-- tomevault:4.0:skill_md:2026-04-16 -->
Run npx skillmds@latest add tomevault-io/mralexsaavedra-spotiarr-spotiarr-i18n in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
When to Use It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.
tomevault-io