菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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.