Quality

Internationalisation

Makes front-end code ready for more than one language and region - lang and dir, right-to-left layout with logical properties, whole messages with ICU plurals, Intl for dates, numbers, prices and sorting, complete locale files. Use when adding a locale or translations, formatting dates or money, building a language switcher, or when asked "translate this" or "support Arabic".

fe-i18nevery web project9 rules83 tokens always loaded, 1010 tokens when used, 1550 tokens in references on demand.

Install

init installs this skill when the project uses every web project. Pick your agent to see where its files land.

npx github:dawidolko/frontend-skills init

Not tested yet with this runner. npx and pnpm dlx are tested; if this one fails, use one of them.

Without --agents, init finds the agents from what the project already has, and asks when it finds none:

How init finds each of the 17 agents

Agent	Found by
Claude Code	`CLAUDE.md` `.claude` `CLAUDE.local.md`
OpenAI Codex	`.codex` `AGENTS.override.md`
Cursor	`.cursor` `.cursorrules`
GitHub Copilot	`.github/copilot-instructions.md` `.github/instructions` `.github/skills` `.github/prompts`
Gemini CLI	`GEMINI.md` `.gemini`
Antigravity CLI	`.agents/rules` `.agent/rules`
Devin / Windsurf	`.devin` `.windsurf` `.windsurfrules`
OpenCode	`opencode.json` `opencode.jsonc` `.opencode`
Cline	`.clinerules` `.cline`
Zed	`.rules` `.zed`
JetBrains Junie	`.junie`
Kiro	`.kiro`
Augment	`.augment` `.augment-guidelines`
Trae	`.trae`
Continue	`.continue`
Amazon Q Developer	`.amazonq`
Aider	`.aider.conf.yml` `CONVENTIONS.md`

Where fe-i18n lands for Claude Code

.claude/skills/fe-i18n/SKILL.mdskill
.claude/skills/fe-i18n/references/i18n.mdskill
.claude/rules/fe-i18n.mdrule file
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.claude/rules/fe-i18n.md

---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.js"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.css"
  - "**/*.scss"
  - "**/locales/**"
  - "**/messages/**"
  - "**/i18n/**"
---

# Internationalisation (frontend-skills)

Makes front-end code ready for more than one language and region - lang and dir, right-to-left layout with logical properties, whole messages with ICU plurals, Intl for dates, numbers, prices and sorting, complete locale files. Use when adding a locale or translations, formatting dates or money, building a language switcher, or when asked "translate this" or "support Arabic".

- `<html lang>` follows the active locale and every `lang` is a valid tag (a11y/html-lang, a11y/lang-valid).
- Right-to-left locales set `dir="rtl"` on `<html>`; user text gets `dir="auto"` (i18n/dir-rtl).
- One message per sentence with placeholders; never join translated fragments (i18n/no-string-concat).
- Plurals use ICU `plural` or `Intl.PluralRules`, never `count === 1 ?` (i18n/plural-rules).
- Dates, numbers and prices go through `Intl` formatters, never hand-built strings (i18n/intl-format).
- Pass the app's locale to every formatter; never rely on the runtime default (i18n/explicit-locale).
- Every locale has the same keys, placeholders and the plural categories its language needs (i18n/same-keys).
- With a right-to-left locale, layout uses logical properties (i18n/logical-properties).
- Keep text out of images, let boxes grow for longer translations, and sort user-visible lists with `Intl.Collator`.
- Use the one i18n library the framework already has; never add a second.

Before larger changes, read the full skill: `.claude/skills/fe-i18n/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-i18n lands for OpenAI Codex

.agents/skills/fe-i18n/SKILL.mdskill
.agents/skills/fe-i18n/references/i18n.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenAI Codex has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-i18n lands for Cursor

.agents/skills/fe-i18n/SKILL.mdskill
.agents/skills/fe-i18n/references/i18n.mdskill
.cursor/rules/fe-i18n.mdcrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.cursor/rules/fe-i18n.mdc

---
description: Makes front-end code ready for more than one language and region - lang and dir, right-to-left layout with logical properties, whole messages with ICU plurals, Intl for dates, numbers, prices and sorting, complete locale files. Use when adding a locale or translations, formatting dates or money, building a language switcher, or when asked "translate this" or "support Arabic".
globs: **/*.html, **/*.jsx, **/*.tsx, **/*.js, **/*.vue, **/*.svelte, **/*.astro, **/*.css, **/*.scss, **/locales/**, **/messages/**, **/i18n/**
alwaysApply: false
---

# Internationalisation (frontend-skills)

- `<html lang>` follows the active locale and every `lang` is a valid tag (a11y/html-lang, a11y/lang-valid).
- Right-to-left locales set `dir="rtl"` on `<html>`; user text gets `dir="auto"` (i18n/dir-rtl).
- One message per sentence with placeholders; never join translated fragments (i18n/no-string-concat).
- Plurals use ICU `plural` or `Intl.PluralRules`, never `count === 1 ?` (i18n/plural-rules).
- Dates, numbers and prices go through `Intl` formatters, never hand-built strings (i18n/intl-format).
- Pass the app's locale to every formatter; never rely on the runtime default (i18n/explicit-locale).
- Every locale has the same keys, placeholders and the plural categories its language needs (i18n/same-keys).
- With a right-to-left locale, layout uses logical properties (i18n/logical-properties).
- Keep text out of images, let boxes grow for longer translations, and sort user-visible lists with `Intl.Collator`.
- Use the one i18n library the framework already has; never add a second.

Before larger changes, read the full skill: `.agents/skills/fe-i18n/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-i18n lands for GitHub Copilot

.agents/skills/fe-i18n/SKILL.mdskill
.agents/skills/fe-i18n/references/i18n.mdskill
.github/instructions/fe-i18n.instructions.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.github/instructions/fe-i18n.instructions.md

---
applyTo: "**/*.html,**/*.jsx,**/*.tsx,**/*.js,**/*.vue,**/*.svelte,**/*.astro,**/*.css,**/*.scss,**/locales/**,**/messages/**,**/i18n/**"
description: "Makes front-end code ready for more than one language and region - lang and dir, right-to-left layout with logical properties, whole messages with ICU plurals, Intl for dates, numbers, prices and sorting, complete locale files. Use when adding a locale or translations, formatting dates or money, building a language switcher, or when asked \"translate this\" or \"support Arabic\"."
---

# Internationalisation (frontend-skills)

- `<html lang>` follows the active locale and every `lang` is a valid tag (a11y/html-lang, a11y/lang-valid).
- Right-to-left locales set `dir="rtl"` on `<html>`; user text gets `dir="auto"` (i18n/dir-rtl).
- One message per sentence with placeholders; never join translated fragments (i18n/no-string-concat).
- Plurals use ICU `plural` or `Intl.PluralRules`, never `count === 1 ?` (i18n/plural-rules).
- Dates, numbers and prices go through `Intl` formatters, never hand-built strings (i18n/intl-format).
- Pass the app's locale to every formatter; never rely on the runtime default (i18n/explicit-locale).
- Every locale has the same keys, placeholders and the plural categories its language needs (i18n/same-keys).
- With a right-to-left locale, layout uses logical properties (i18n/logical-properties).
- Keep text out of images, let boxes grow for longer translations, and sort user-visible lists with `Intl.Collator`.
- Use the one i18n library the framework already has; never add a second.

Before larger changes, read the full skill: `.agents/skills/fe-i18n/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-i18n lands for Gemini CLI

.agents/skills/fe-i18n/SKILL.mdskill
.agents/skills/fe-i18n/references/i18n.mdskill
GEMINI.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Gemini CLI: Gemini CLI was replaced by Antigravity CLI for unpaid tiers on 2026-06-18; choose "antigravity" too if you use it.

Gemini CLI has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

GEMINI.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-i18n lands for Antigravity CLI

.agents/skills/fe-i18n/SKILL.mdskill
.agents/skills/fe-i18n/references/i18n.mdskill
.agents/rules/fe-i18n.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.agents/rules/fe-i18n.md

---
trigger: glob
globs: "**/*.html, **/*.jsx, **/*.tsx, **/*.js, **/*.vue, **/*.svelte, **/*.astro, **/*.css, **/*.scss, **/locales/**, **/messages/**, **/i18n/**"
description: "Makes front-end code ready for more than one language and region - lang and dir, right-to-left layout with logical properties, whole messages with ICU plurals, Intl for dates, numbers, prices and sorting, complete locale files. Use when adding a locale or translations, formatting dates or money, building a language switcher, or when asked \"translate this\" or \"support Arabic\"."
---

# Internationalisation (frontend-skills)

- `<html lang>` follows the active locale and every `lang` is a valid tag (a11y/html-lang, a11y/lang-valid).
- Right-to-left locales set `dir="rtl"` on `<html>`; user text gets `dir="auto"` (i18n/dir-rtl).
- One message per sentence with placeholders; never join translated fragments (i18n/no-string-concat).
- Plurals use ICU `plural` or `Intl.PluralRules`, never `count === 1 ?` (i18n/plural-rules).
- Dates, numbers and prices go through `Intl` formatters, never hand-built strings (i18n/intl-format).
- Pass the app's locale to every formatter; never rely on the runtime default (i18n/explicit-locale).
- Every locale has the same keys, placeholders and the plural categories its language needs (i18n/same-keys).
- With a right-to-left locale, layout uses logical properties (i18n/logical-properties).
- Keep text out of images, let boxes grow for longer translations, and sort user-visible lists with `Intl.Collator`.
- Use the one i18n library the framework already has; never add a second.

Before larger changes, read the full skill: `.agents/skills/fe-i18n/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-i18n lands for Devin / Windsurf

.agents/skills/fe-i18n/SKILL.mdskill
.agents/skills/fe-i18n/references/i18n.mdskill
.devin/rules/fe-i18n.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Devin / Windsurf: Devin CLI also reads .cursor/rules; with Cursor chosen too, the CLI sees both rule files of a skill.

Planned by the installer itself for the example React project in the repository.

.devin/rules/fe-i18n.md

---
trigger: glob
globs: "**/*.html,**/*.jsx,**/*.tsx,**/*.js,**/*.vue,**/*.svelte,**/*.astro,**/*.css,**/*.scss,**/locales/**,**/messages/**,**/i18n/**"
---

# Internationalisation (frontend-skills)

Makes front-end code ready for more than one language and region - lang and dir, right-to-left layout with logical properties, whole messages with ICU plurals, Intl for dates, numbers, prices and sorting, complete locale files. Use when adding a locale or translations, formatting dates or money, building a language switcher, or when asked "translate this" or "support Arabic".

- `<html lang>` follows the active locale and every `lang` is a valid tag (a11y/html-lang, a11y/lang-valid).
- Right-to-left locales set `dir="rtl"` on `<html>`; user text gets `dir="auto"` (i18n/dir-rtl).
- One message per sentence with placeholders; never join translated fragments (i18n/no-string-concat).
- Plurals use ICU `plural` or `Intl.PluralRules`, never `count === 1 ?` (i18n/plural-rules).
- Dates, numbers and prices go through `Intl` formatters, never hand-built strings (i18n/intl-format).
- Pass the app's locale to every formatter; never rely on the runtime default (i18n/explicit-locale).
- Every locale has the same keys, placeholders and the plural categories its language needs (i18n/same-keys).
- With a right-to-left locale, layout uses logical properties (i18n/logical-properties).
- Keep text out of images, let boxes grow for longer translations, and sort user-visible lists with `Intl.Collator`.
- Use the one i18n library the framework already has; never add a second.

Before larger changes, read the full skill: `.agents/skills/fe-i18n/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-i18n lands for OpenCode

.agents/skills/fe-i18n/SKILL.mdskill
.agents/skills/fe-i18n/references/i18n.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenCode has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-i18n lands for Cline

.claude/skills/fe-i18n/SKILL.mdskill
.claude/skills/fe-i18n/references/i18n.mdskill
.clinerules/fe-i18n.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Cline: If .clinerules is a single file rather than a folder, Cline rule files are not written; skills still are.

Planned by the installer itself for the example React project in the repository.

.clinerules/fe-i18n.md

---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.js"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.css"
  - "**/*.scss"
  - "**/locales/**"
  - "**/messages/**"
  - "**/i18n/**"
---

# Internationalisation (frontend-skills)

Makes front-end code ready for more than one language and region - lang and dir, right-to-left layout with logical properties, whole messages with ICU plurals, Intl for dates, numbers, prices and sorting, complete locale files. Use when adding a locale or translations, formatting dates or money, building a language switcher, or when asked "translate this" or "support Arabic".

- `<html lang>` follows the active locale and every `lang` is a valid tag (a11y/html-lang, a11y/lang-valid).
- Right-to-left locales set `dir="rtl"` on `<html>`; user text gets `dir="auto"` (i18n/dir-rtl).
- One message per sentence with placeholders; never join translated fragments (i18n/no-string-concat).
- Plurals use ICU `plural` or `Intl.PluralRules`, never `count === 1 ?` (i18n/plural-rules).
- Dates, numbers and prices go through `Intl` formatters, never hand-built strings (i18n/intl-format).
- Pass the app's locale to every formatter; never rely on the runtime default (i18n/explicit-locale).
- Every locale has the same keys, placeholders and the plural categories its language needs (i18n/same-keys).
- With a right-to-left locale, layout uses logical properties (i18n/logical-properties).
- Keep text out of images, let boxes grow for longer translations, and sort user-visible lists with `Intl.Collator`.
- Use the one i18n library the framework already has; never add a second.

Before larger changes, read the full skill: `.claude/skills/fe-i18n/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-i18n lands for Zed

.agents/skills/fe-i18n/SKILL.mdskill
.agents/skills/fe-i18n/references/i18n.mdskill
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Zed: Zed reads only the first instruction file of its list; the block is placed in that file.

Zed has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CLAUDE.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-i18n lands for JetBrains Junie

.agents/skills/fe-i18n/SKILL.mdskill
.agents/skills/fe-i18n/references/i18n.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

JetBrains Junie: Junie reads .agents/skills only in a trusted project.

JetBrains Junie has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-i18n lands for Kiro

.kiro/skills/fe-i18n/SKILL.mdskill
.kiro/skills/fe-i18n/references/i18n.mdskill
.kiro/steering/fe-i18n.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.kiro/steering/fe-i18n.md

---
inclusion: fileMatch
fileMatchPattern: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.js", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.css", "**/*.scss", "**/locales/**", "**/messages/**", "**/i18n/**"]
---

# Internationalisation (frontend-skills)

Makes front-end code ready for more than one language and region - lang and dir, right-to-left layout with logical properties, whole messages with ICU plurals, Intl for dates, numbers, prices and sorting, complete locale files. Use when adding a locale or translations, formatting dates or money, building a language switcher, or when asked "translate this" or "support Arabic".

- `<html lang>` follows the active locale and every `lang` is a valid tag (a11y/html-lang, a11y/lang-valid).
- Right-to-left locales set `dir="rtl"` on `<html>`; user text gets `dir="auto"` (i18n/dir-rtl).
- One message per sentence with placeholders; never join translated fragments (i18n/no-string-concat).
- Plurals use ICU `plural` or `Intl.PluralRules`, never `count === 1 ?` (i18n/plural-rules).
- Dates, numbers and prices go through `Intl` formatters, never hand-built strings (i18n/intl-format).
- Pass the app's locale to every formatter; never rely on the runtime default (i18n/explicit-locale).
- Every locale has the same keys, placeholders and the plural categories its language needs (i18n/same-keys).
- With a right-to-left locale, layout uses logical properties (i18n/logical-properties).
- Keep text out of images, let boxes grow for longer translations, and sort user-visible lists with `Intl.Collator`.
- Use the one i18n library the framework already has; never add a second.

Before larger changes, read the full skill: `.kiro/skills/fe-i18n/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-i18n lands for Augment

.agents/skills/fe-i18n/SKILL.mdskill
.agents/skills/fe-i18n/references/i18n.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Augment has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-i18n lands for Trae

.trae/skills/fe-i18n/SKILL.mdskill
.trae/skills/fe-i18n/references/i18n.mdskill
.trae/rules/fe-i18n.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Trae: Trae reads AGENTS.md only after it is enabled in its settings.

Planned by the installer itself for the example React project in the repository.

.trae/rules/fe-i18n.md

---
description: "Makes front-end code ready for more than one language and region - lang and dir, right-to-left layout with logical properties, whole messages with ICU plurals, Intl for dates, numbers, prices and sorting, complete locale files. Use when adding a locale or translations, formatting dates or money, building a language switcher, or when asked \"translate this\" or \"support Arabic\"."
globs: **/*.html,**/*.jsx,**/*.tsx,**/*.js,**/*.vue,**/*.svelte,**/*.astro,**/*.css,**/*.scss,**/locales/**,**/messages/**,**/i18n/**
alwaysApply: false
---

# Internationalisation (frontend-skills)

- `<html lang>` follows the active locale and every `lang` is a valid tag (a11y/html-lang, a11y/lang-valid).
- Right-to-left locales set `dir="rtl"` on `<html>`; user text gets `dir="auto"` (i18n/dir-rtl).
- One message per sentence with placeholders; never join translated fragments (i18n/no-string-concat).
- Plurals use ICU `plural` or `Intl.PluralRules`, never `count === 1 ?` (i18n/plural-rules).
- Dates, numbers and prices go through `Intl` formatters, never hand-built strings (i18n/intl-format).
- Pass the app's locale to every formatter; never rely on the runtime default (i18n/explicit-locale).
- Every locale has the same keys, placeholders and the plural categories its language needs (i18n/same-keys).
- With a right-to-left locale, layout uses logical properties (i18n/logical-properties).
- Keep text out of images, let boxes grow for longer translations, and sort user-visible lists with `Intl.Collator`.
- Use the one i18n library the framework already has; never add a second.

Before larger changes, read the full skill: `.trae/skills/fe-i18n/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-i18n lands for Continue

.frontend-skills/skills/fe-i18n/SKILL.mdskill
.frontend-skills/skills/fe-i18n/references/i18n.mdskill
.continue/rules/fe-i18n.mdrule file

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.continue/rules/fe-i18n.md

---
name: "Internationalisation"
description: "Makes front-end code ready for more than one language and region - lang and dir, right-to-left layout with logical properties, whole messages with ICU plurals, Intl for dates, numbers, prices and sorting, complete locale files. Use when adding a locale or translations, formatting dates or money, building a language switcher, or when asked \"translate this\" or \"support Arabic\"."
globs: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.js", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.css", "**/*.scss", "**/locales/**", "**/messages/**", "**/i18n/**"]
alwaysApply: false
---

# Internationalisation (frontend-skills)

- `<html lang>` follows the active locale and every `lang` is a valid tag (a11y/html-lang, a11y/lang-valid).
- Right-to-left locales set `dir="rtl"` on `<html>`; user text gets `dir="auto"` (i18n/dir-rtl).
- One message per sentence with placeholders; never join translated fragments (i18n/no-string-concat).
- Plurals use ICU `plural` or `Intl.PluralRules`, never `count === 1 ?` (i18n/plural-rules).
- Dates, numbers and prices go through `Intl` formatters, never hand-built strings (i18n/intl-format).
- Pass the app's locale to every formatter; never rely on the runtime default (i18n/explicit-locale).
- Every locale has the same keys, placeholders and the plural categories its language needs (i18n/same-keys).
- With a right-to-left locale, layout uses logical properties (i18n/logical-properties).
- Keep text out of images, let boxes grow for longer translations, and sort user-visible lists with `Intl.Collator`.
- Use the one i18n library the framework already has; never add a second.

Before larger changes, read the full skill: `.frontend-skills/skills/fe-i18n/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-i18n lands for Amazon Q Developer

.frontend-skills/skills/fe-i18n/SKILL.mdskill
.frontend-skills/skills/fe-i18n/references/i18n.mdskill
.amazonq/rules/frontend-skills.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Amazon Q Developer: Amazon Q Developer IDE plugins reach end of support on 2027-04-30; AWS points to Kiro.

Amazon Q Developer has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

.amazonq/rules/frontend-skills.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-i18n` (Internationalisation): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.js`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.css`, `**/*.scss`, `**/locales/**`, `**/messages/**`, `**/i18n/**`, first read `.frontend-skills/skills/fe-i18n/SKILL.md`.

The real file

Where fe-i18n lands for Aider

.frontend-skills/skills/fe-i18n/SKILL.mdskill
.frontend-skills/skills/fe-i18n/references/i18n.mdskill
CONVENTIONS.mdinstruction block
.aider.conf.ymlconfig

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Aider has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CONVENTIONS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-i18n` (Internationalisation): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.js`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.css`, `**/*.scss`, `**/locales/**`, `**/messages/**`, `**/i18n/**`, first read `.frontend-skills/skills/fe-i18n/SKILL.md`.

The real file

How to use it

Once installed, the agent loads the skill by itself when a task matches its description. You can also ask for it in your own words, for example:

Phrases from the skill description that make the agent pick it:

translate this
support Arabic

And to check and fix the work:

Use the fe-i18n skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain a11y/html-lang and fix it here.

Rules it teaches

a11y/html-lang
The html element names the language of the page in a non-empty lang attribute.
seriousstaticWCAG 3.1.1
a11y/lang-valid
Every lang value is a valid BCP 47 language tag ("en", "en-GB", "pl"), never "en_US" or a language name.
seriousstaticWCAG 3.1.1, 3.1.2
i18n/dir-rtl
Pages in right-to-left languages (Arabic, Hebrew, Persian, Urdu) set dir="rtl" on html together with lang.
seriousstatic
i18n/no-string-concat
User-facing sentences are one message with placeholders, never joined from translated fragments and values.
moderatestatic
i18n/plural-rules
Plurals use the locale's plural rules (ICU plural or Intl.PluralRules), never count === 1 ? singular : plural.
moderatestatic
i18n/intl-format
Dates, times, numbers and prices are formatted with Intl for the user's locale, never assembled from parts.
moderatestatic
i18n/explicit-locale
Intl formatters and toLocale*String() receive the app's active locale instead of relying on the runtime default.
minorstatic
i18n/same-keys
Every locale file has the same keys and placeholders as the source locale, and the plural forms its language needs.
seriousmanual
i18n/logical-properties
In projects with a right-to-left locale, layout uses logical properties (margin-inline-start, inset-inline-end, text-align start).
moderatemanual

The rule digest

This part is copied into each agent's scoped rule file, so it stands on its own:

<html lang> follows the active locale and every lang is a valid tag (a11y/html-lang, a11y/lang-valid).
Right-to-left locales set dir="rtl" on <html>; user text gets dir="auto" (i18n/dir-rtl).
One message per sentence with placeholders; never join translated fragments (i18n/no-string-concat).
Plurals use ICU plural or Intl.PluralRules, never count === 1 ? (i18n/plural-rules).
Dates, numbers and prices go through Intl formatters, never hand-built strings (i18n/intl-format).
Pass the app's locale to every formatter; never rely on the runtime default (i18n/explicit-locale).
Every locale has the same keys, placeholders and the plural categories its language needs (i18n/same-keys).
With a right-to-left locale, layout uses logical properties (i18n/logical-properties).
Keep text out of images, let boxes grow for longer translations, and sort user-visible lists with Intl.Collator.
Use the one i18n library the framework already has; never add a second.

Steps the agent follows

Find the i18n setup: the profile's i18n entry, a locales/ or messages/ folder, next-intl, @nuxtjs/i18n, vue-i18n, Paraglide, react-intl, i18next, Angular $localize.
Add every new user-visible string as a message key in the source locale, with a translator comment when the context is unclear, then the same key in every other locale.
Format values with the library's formatters or Intl, passing the active locale; keep ISO strings for machines.
For a new locale: add it to the routing config, <html lang dir>, hreflang (fe-seo-metadata), the language switcher (links with hreflang and lang), and check plural categories with Intl.PluralRules.
Test long and right-to-left text: a pseudo-locale that lengthens strings by about 40%, and one RTL locale.

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed finds missing dir on RTL pages, concatenated messages, === 1 plurals, hand-built dates and prices, formatters without a locale and invalid lang values.
By hand: switch to each locale and to an RTL locale; look for raw keys, clipped text, wrong number and date formats, and icons that point the wrong way.

Checked by the audit

The static checks of these rules run in audit; this is a real session on the example project:

Terminal recording: audit lists findings by severity with rule ids and file:line, and fails at serious. — `audit`: counts by severity, each rule with its first location, the exit code.

Reference files

references/i18n.md1550 tokens

SKILL.md on GitHub