i18n-frontend-implementer — скилл для Claude Code
Скилл добавляет i18n-инфраструктуру во фронтенд: переводы, форматирование дат и валют, множественные формы и переключение языка.
npx skills add patricio0312rev/skills --skill i18n-frontend-implementer -a claude-codeЧто делает i18n-frontend-implementer
i18n-frontend-implementer помогает внедрить интернационализацию через next-intl, react-i18next или похожую библиотеку. Он предлагает создать словари вроде locales/en.json и locales/es.json, подключить провайдер и разложить ключи по иерархическим пространствам имён.
Скилл также покрывает форматирование дат, чисел и валют, правила множественного числа и интерфейс переключения языка. В рекомендациях есть извлечение всего текста в переводы, поддержка RTL-языков и ленивая загрузка словарей. Перед работой нужно выбрать библиотеку i18n, потому что конкретный вариант зависит от стека проекта.
Какие задачи решает
- подключить переводы к фронтенд-приложению
- разложить ключи по пространствам имён
- форматировать даты, числа и валюты по локали
- добавить множественные формы для переводов
- сделать переключатель языка
Примеры запросов агенту
- Подключи i18n к этому фронтенду через
next-intlи создай словариlocales/en.jsonиlocales/es.json. - Настрой иерархические ключи переводов, форматирование дат и валют, а также переключатель языка.
- Проверь множественные формы и добавь поддержку RTL-языков в текущем интерфейсе.
Как установить i18n-frontend-implementer
1Через Skills CLI (Vercel)
npx skills add patricio0312rev/skills --skill i18n-frontend-implementer -a claude-code2Вручную: положить файлы
~/.claude/skills/i18n-frontend-implementer/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/i18n-frontend-implementer/
1Через Skills CLI (Vercel)
npx skills add patricio0312rev/skills --skill i18n-frontend-implementer -a codex2Вручную: положить файлы
.agents/skills/i18n-frontend-implementer/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add patricio0312rev/skills --skill i18n-frontend-implementer -a cursor2Вручную: положить файлы
.cursor/skills/i18n-frontend-implementer/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install patricio0312rev/skills i18n-frontend-implementer2Вручную: положить файлы
.github/skills/i18n-frontend-implementer/SKILL.md1Через Skills CLI (Vercel)
npx skills add patricio0312rev/skills --skill i18n-frontend-implementer -a gemini-cli2Командой платформы
gemini skills install https://github.com/patricio0312rev/skills --path frontend/i18n-frontend-implementerВручную: положить файлы
.devin/skills/i18n-frontend-implementer/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add patricio0312rev/skills --skill i18n-frontend-implementer -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о i18n-frontend-implementer
Как установить i18n-frontend-implementer в Claude Code?
Выполните npx skills add patricio0312rev/skills --skill i18n-frontend-implementer -a claude-code, затем проверьте файл ~/.claude/skills/i18n-frontend-implementer/SKILL.md.
Что делает i18n-frontend-implementer?
Скилл помогает добавить переводы, форматирование дат, чисел и валют, правила множественного числа и переключение языка во фронтенд.
Какие библиотеки поддерживает скилл?
В инструкции приведены next-intl, react-i18next и похожие библиотеки для интернационализации.
Исходный текст
SKILL.md · MIT
---
name: i18n-frontend-implementer
description: Adds internationalization (i18n) infrastructure with translation plumbing, scalable key strategy, formatters for dates/numbers/currency, plural rules, and language switching. Use when implementing "internationalization", "translations", "multi-language support", or "i18n".
---
# i18n Frontend Implementer
Implement internationalization with next-intl, react-i18next, or similar libraries.
## Core Setup
**1. Install**: `npm install next-intl` or `react-i18next`
**2. Create dictionaries**: `locales/en.json`, `locales/es.json`
**3. Provider setup**: Wrap app with IntlProvider
**4. Translation keys**: Hierarchical namespace structure
**5. Formatters**: Date, number, currency formatting
**6. Language switcher**: Dropdown or flags UI
## Translation Structure
```json
{
"common": { "nav": { "home": "Home", "about": "About" } },
"auth": { "login": "Sign In", "logout": "Sign Out" },
"errors": { "required": "{field} is required" }
}
```
## Usage Examples
```tsx
const t = useTranslations('common');
<h1>{t('nav.home')}</h1>
// With plurals
t('items', { count: 5 }) // "5 items"
// With formatting
<p>{formatDate(date, { dateStyle: 'long' })}</p>
```
## Best Practices
Use namespaces for organization, extract all text to translations, handle plurals properly, format dates/numbers per locale, provide language switcher, support RTL languages, lazy-load translations.
© patricio0312rev · MIT · patricio0312rev/skills