Menu
Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | i18n-localization |
| description | Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support. |
| allowed-tools | Read, Glob, Grep |
Internationalization (i18n) and Localization (L10n) best practices.
| Term | Meaning |
|---|---|
| i18n | Internationalization - making app translatable |
| L10n | Localization - actual translations |
| Locale | Language + Region (en-US, tr-TR) |
| RTL | Right-to-left languages (Arabic, Hebrew) |
| Project Type | i18n Needed? |
|---|---|
| Public web app | โ Yes |
| SaaS product | โ Yes |
| Internal tool | โ ๏ธ Maybe |
| Single-region app | โ ๏ธ Consider future |
| Personal project | โ Optional |
import { useTranslation } from "react-i18next";
function Welcome() {
const { t } = useTranslation();
return <h1>{t("welcome.title")}</h1>;
}
import { useTranslations } from "next-intl";
export default function Page() {
const t = useTranslations("Home");
return <h1>{t("title")}</h1>;
}
from gettext import gettext as _
print(_("Welcome to our app"))
locales/
โโโ en/
โ โโโ common.json
โ โโโ auth.json
โ โโโ errors.json
โโโ tr/
โ โโโ common.json
โ โโโ auth.json
โ โโโ errors.json
โโโ ar/ # RTL
โโโ ...
| Issue | Solution |
|---|---|
| Missing translation | Fallback to default language |
| Hardcoded strings | Use linter/checker script |
| Date format | Use Intl.DateTimeFormat |
| Number format | Use Intl.NumberFormat |
| Pluralization | Use ICU message format |
/* CSS Logical Properties */
.container {
margin-inline-start: 1rem; /* Not margin-left */
padding-inline-end: 1rem; /* Not padding-right */
}
[dir="rtl"] .icon {
transform: scaleX(-1);
}
Before shipping:
| Script | Purpose | Command |
|---|---|---|
scripts/i18n_checker.py | Detect hardcoded strings & missing translations | python scripts/i18n_checker.py <project_path> |
React and Next.js performance optimization from Vercel Engineering. Use when building React components, optimizing performance, eliminating waterfalls, reducing bundle size, reviewing code for performance issues, or implementing server/client-side optimizations.
Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordinates agents.
Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks.
Design thinking and decision-making for web UI. Use when designing components, layouts, color schemes, typography, or creating aesthetic interfaces. Teaches principles, not fixed values.
Automatic agent selection and intelligent task routing. Analyzes user requests and automatically selects the best specialist agent(s) without requiring explicit user mentions.
Automatic quality control, linting, and static analysis procedures. Use after every code modification to ensure syntax correctness and project standards. Triggers onKeywords: lint, format, check, validate, types, static analysis.