Menu
Use when adding multi-language support, translations, locale switching, date/number formatting, or RTL layout. Not for single-language apps unless preparing for i18n later.
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
Use when reviewing or fixing accessibility: keyboard navigation, focus order, labels, color contrast, screen reader support, or ARIA attributes. Not for SEO-only or performance-only audits.
Use when adding product analytics (PostHog, GA4, Plausible), event tracking, funnels, or conversion measurement. Not for server logs only or A/B infra unless events are part of the task.
Use when standardizing API and edge function errors: HTTP status codes, error JSON shape, logging, or mapping Supabase/Stripe errors to client responses. Not for UI toast copy only or form field validation messages.
Use when recording audit trails: who changed what, admin action logs, compliance history, or append-only event tables. Not for product analytics (use analytics-events) or debug console logs only.
Use when scheduling background work: cron jobs, digest emails, cleanup tasks, pg_cron, Supabase scheduled edge functions, or job queues. Not for synchronous user-facing API in the request path.
Use when adding dark mode, theme toggle, system theme support, or fixing hardcoded colors that break in dark mode. Not for design-token migration unrelated to dark mode.
| name | i18n-multi-language |
| description | Use when adding multi-language support, translations, locale switching, date/number formatting, or RTL layout. Not for single-language apps unless preparing for i18n later. |
Use i18next (react-i18next) for strings; Intl for dates, numbers, and currency.
src/
i18n/
index.ts # i18next init
locales/
en/common.json
es/common.json
// src/i18n/index.ts
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import en from "./locales/en/common.json";
import es from "./locales/es/common.json";
i18n.use(initReactI18next).init({
resources: { en: { common: en }, es: { common: es } },
lng: localStorage.getItem("lang") ?? navigator.language.split("-")[0] ?? "en",
fallbackLng: "en",
defaultNS: "common",
interpolation: { escapeValue: false },
});
const { t } = useTranslation();
<h1>{t("dashboard.title")}</h1>
<p>{t("welcome", { name: user.name })}</p>
JSON:
{
"dashboard": { "title": "Dashboard" },
"welcome": "Welcome, {{name}}"
}
{ "items_one": "{{count}} item", "items_other": "{{count}} items" }
t("items", { count });
Intlnew Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date);
new Intl.NumberFormat(locale, { style: "currency", currency: "USD" }).format(amount / 100);
new Intl.RelativeTimeFormat(locale, { numeric: "auto" }).format(-3, "day");
Never concatenate "$" + amount or hand-format dates.
<html lang={locale}> and (if RTL) dir="rtl".ps-4 / pe-4 instead of pl-4 / pr-4).For user-generated multi-language content, store one row per locale or a JSON column keyed by locale code. Do not concat languages into one column.
t().t("welcome") + " " + name) — use interpolation.error slugs.t().Intl for dates / numbers / currency.<html lang> reflects current locale.