skills.rest
Layer-Fi
Layer-FiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

translations

Manages i18next translation keys, locale JSON, and the Crowdin translation pipeline for React components.

10|3|Updated Oct 23, 2023
Search Tags:#react#localization#i18n#i18next#translation keys#crowdin#locale json
One-click install
npx skills add https://github.com/Layer-Fi/layer-react --skill translations-layer-fi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: translations
Source: https://github.com/Layer-Fi/layer-react/tree/main/src/assets/locales
Command: npx skills add https://github.com/Layer-Fi/layer-react --skill translations-layer-fi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires i18next, react-intl, i18next-pseudo, and includes assets (resource) components.

What problem does it solve? It keeps every user-visible string in the component library translatable across en-US and fr-CA without developers hand-editing generated locale JSON files or breaking the Crowdin translation pipeline. ## Core Features & Use Cases - Inline t() defaults with key naming rules: Enforces the namespace:Owner.category.snake_case_key convention so every key traces back to its owning file, with ESLint and CI checks for mismatches. - Automated extraction and Crowdin sync: Keys are collected by the i18n-extract-keys workflow and French translations flow through crowdin-sync with bidirectional last-writer-wins semantics. - Plural, conditional, and formatting helpers: Provides tPlural, tConditional, translationKey, and formatList so plurals and context variants are extraction-safe, while numbers and dates go through useIntlFormatter. - Use Case: When adding a new label to an invoice table, write t('invoices:InvoiceTable.label.due_date', 'Due date') inline, ship the PR without touching locale JSON, and let the pipeline scaffold and translate the key. ## Quick Start Add a new translated string to a React component by calling t() with a properly namespaced key and an inline English default, without editing any locale JSON file.

Frequently Asked Questions about translations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new translated string to a React component with i18next?▼

Call t() with a namespaced key and an inline English default, such as t('invoices:InvoiceTable.label.due_date', 'Due date'). Do not edit the locale JSON files; the extraction workflow collects the key and Crowdin supplies the French translation.

How should i18next translation keys be named?▼

Keys follow the pattern namespace:Owner.category.snake_case_key. The namespace derives from the feature domain folder, the owner names the file using the string, and the category is one of action, label, state, error, validation, empty, placeholder, banner, tooltip, title, disclaimer, or prompt.

Can I edit the locale JSON files directly to fix a translation?▼

No, the locale JSON under src/assets/locales is generated. Write keys and English defaults inline at the call site; the i18n-extract-keys workflow updates en-US and scaffolds fr-CA, while French values come from Crowdin.

How do I handle plurals in i18next translations?▼

Use the tPlural helper with one and other variants instead of ternaries, for example tPlural(t, key, { count, one: '{{count}} invoice', other: '{{count}} invoices' }). For condition-based strings, use tConditional, which maps conditions onto i18next context variants.

Why does the release check fail on translations?▼

The i18n:check-release script fails if a key used in code is missing from en-US or if any en-US key lacks a non-empty fr-CA value. Merge the extraction or Crowdin PR that the release workflow dispatches, then re-run the release preparation.

Should numbers and dates go through t() for localization?▼

No, formatting is separate from translation. Use useIntlFormatter helpers such as formatCurrencyFromCents, formatPercent, and formatDate with a DateFormat enum value, never toLocaleString or custom format strings.

Related Skills

Explore More Software Engineering Skills→
Xza85hrfXza85hrf

i18n

Set up internationalization and extract translatable strings in React, Next.js, Vue, and Angular projects.

Community
Intermediate
TurgunoffTurgunoff

source-command-i18n-check

Validates uz, ru, and en translation bundles for missing or orphan keys via a Flutter test.

Community
Basic
dpearson2699dpearson2699
1.1k

swift-formatstyle

Formats and parses locale-aware numbers, currencies, dates, durations, and URLs with Foundation FormatStyle.

Community
Intermediate
yyong008yyong008

seeksaas-i18n

Manages multilingual app content with Parcel JS type-safe translations and runtime locale detection via URL, cookies, or headers.

Community
Intermediate