一键在 Manus 中运行任何 Skill

i18n

星标3

分支0

更新时间2026年6月14日 01:51

Internationalization and localization — message catalogs, ICU plurals/interpolation, Intl formatting, locale routing, RTL, locale-aware input validation. Use when adding or fixing translations, multi-locale UI, date/number/currency formatting, language switching, or RTL support. 日本語の依頼例:「多言語対応」「i18n入れて」「翻訳」「ロケール切り替え」「日付/通貨の表示」「RTL対応」「言語切替」。

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

Syo-M

Syo-M/fable-frontend-skills

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Internationalization

No hardcoded user-facing strings

Every user-visible string comes from a message catalog keyed by ID — never a literal in JSX. This is the one rule that, if skipped, makes everything else impossible to retrofit.
Use the framework-idiomatic library: next-intl (Next.js App Router), react-i18next / react-intl (Vite SPA), Astro's i18n routing + a catalog. One per repo (dependency ask-first rule applies).
Keys are semantic and namespaced (checkout.payment.submit), not the English text. Keep catalogs shallow (≤3 levels) and run a missing/orphaned-key check in CI (i18next-parser --fail-on-update, or the library's extractor) — wire it as a gate, don't rely on memory.
Translator-facing context: provide a description for ambiguous keys; never concatenate sentence fragments across keys (word order differs per language).

Plurals, gender, interpolation — ICU MessageFormat

Never build plurals with count === 1 ? 'item' : 'items' — many languages have 3–6 plural categories. Use ICU {count, plural, ...} and let the library + locale data decide.
Interpolate variables through the catalog ({name}), never via template-string concatenation around a translated fragment.
Rich/linked text: use the library's component interpolation (<Trans> / t.rich), not dangerouslySetInnerHTML on a translated string (see frontend-security).

Formatting — always `Intl`, never hand-rolled

Dates/times: Intl.DateTimeFormat with an explicit locale and time zone. Store/transport UTC; render in a deliberately chosen zone; label it when ambiguous (consistent with data-viz).
Numbers/currency/units/lists: Intl.NumberFormat (with style: 'currency' + currency code), Intl.ListFormat, Intl.RelativeTimeFormat. No manual thousands separators, decimal marks, or "3 days ago" strings — these differ per locale.
Currency: format with the data's currency, not the UI locale's; never assume $.

Routing & locale negotiation

Locale in the URL (/ja/... subpath, or domain) so pages are linkable, cacheable, and indexable — not only a cookie/header. Emit hreflang alternates and set <html lang> (and dir) per request.
Negotiate initial locale from the URL → stored preference → Accept-Language, with a sane default; let users switch explicitly and persist it.
SSR/RSC: load only the active locale's catalog on the server and pass it down; don't ship every language's messages to the client (bundle bloat). Code-split catalogs by locale/route.

RTL & layout

Drive direction from data: <html dir="rtl"> for RTL locales; never hardcode LTR assumptions.
Use CSS logical properties (margin-inline, inset-inline-start, text-align: start) — mandated already by css-modules, and the reason it's mandated. Physical left/right breaks RTL.
Mirror directional icons (arrows, chevrons) in RTL; don't mirror logos or media. Test one RTL locale (e.g. ar) as a first-class case, plus a pseudo-locale for length/encoding.

Locale-aware input & validation

Accept locale-formatted input (decimal comma, native digits, local date order) and parse to a canonical form before validating with zod (see frontend-security) — validate the parsed value, store canonical.
Names/addresses/phone: don't assume Western structure (first/last, state/ZIP). Keep fields permissive; avoid regex that rejects valid non-Latin input.
Sorting/search: locale-aware collation (Intl.Collator), not byte order.

Testing

Pseudo-localization (accented + padded strings) in a story/build catches truncation, clipping, and hardcoded strings early (pairs with visual-regression over both LTR and one RTL locale).
Stories cover at least one non-English and one RTL locale for layout-sensitive components (see storybook).

同仓库更多 Skills

同仓库

astro

Syo-M/fable-frontend-skills

Astro conventions — routing and adding pages, islands architecture, client directives, content collections, .astro components. Use when working in an Astro project. 日本語の依頼例:「Astroで〜」「ページを追加/新規作成して」「ルーティング」「アイランド」「コンテンツコレクション」「.astroコンポーネント」。

2026-07-123

nextjs

Syo-M/fable-frontend-skills

Next.js App Router conventions — routing and adding pages, Server/Client Components, data fetching, caching, Server Actions, route handlers, metadata, env vars. Use for any work inside a Next.js app. 日本語の依頼例:「Next.jsで〜」「ページを追加/新規作成して」「ルーティング」「Server Action」「ルートハンドラ」「RSC/サーバーコンポーネント」「キャッシュ」。

2026-07-123

codex-imagegen

Syo-M/fable-frontend-skills

Generate or AI-edit images by delegating to the Codex CLI ($imagegen / gpt-image) — sample banners, hero visuals, demo assets, image-to-image edits. Use whenever a task needs image GENERATION or AI photo editing (Claude Code cannot generate images itself). 日本語の依頼例:「画像を生成して」「サンプル画像を作って」「この写真を加工して」「バナー/ヒーロー画像が必要」。NOT for resizing/compressing existing assets (use `images-media`).

2026-07-073

css-modules

Syo-M/fable-frontend-skills

CSS Modules and styling conventions — design tokens, naming, variants, responsive design, layout, dark mode/theming. Use when styling or visually adjusting components, or editing any *.module.css, tokens, or global styles. For animations/transitions/motion use the `motion` skill instead. 日本語の依頼例:「スタイルを当てて」「見た目を整えて」「デザイン調整」「ダークモード」「レスポンシブ対応」「CSS書いて」。

2026-07-073

governance

Syo-M/fable-frontend-skills

Repository governance — CI merge gates, toolchain pinning, dependency lifecycle and license policy, secrets scanning, change control for rules and sensitive paths, Git/PR conventions, observability, performance budgets, browser support. Use when setting up CI/CD, repo configuration, releases, adding dependencies, or defining team policy. 日本語の依頼例:「CI/CD設定」「リリース手順」「依存ライセンス確認」「秘密情報スキャン」「リポジトリ設定」「ブランチ/PR運用」「パフォーマンスバジェット」。

2026-07-073

motion

Syo-M/fable-frontend-skills

Animation and motion conventions — CSS transitions/keyframes, View Transitions, scroll-driven effects, animation libraries, exit animations, performance. Use when adding, changing, or debugging any animation, transition, or page-transition effect. 日本語の依頼例:「アニメーション付けて」「動きを付けて」「トランジション」「ページ遷移アニメ」「スクロール演出」「ふわっと表示」。

2026-07-073

name

i18n

description

Internationalization

No hardcoded user-facing strings

Every user-visible string comes from a message catalog keyed by ID — never a literal in JSX. This is the one rule that, if skipped, makes everything else impossible to retrofit.
Use the framework-idiomatic library: next-intl (Next.js App Router), react-i18next / react-intl (Vite SPA), Astro's i18n routing + a catalog. One per repo (dependency ask-first rule applies).
Keys are semantic and namespaced (checkout.payment.submit), not the English text. Keep catalogs shallow (≤3 levels) and run a missing/orphaned-key check in CI (i18next-parser --fail-on-update, or the library's extractor) — wire it as a gate, don't rely on memory.
Translator-facing context: provide a description for ambiguous keys; never concatenate sentence fragments across keys (word order differs per language).

Plurals, gender, interpolation — ICU MessageFormat

Never build plurals with count === 1 ? 'item' : 'items' — many languages have 3–6 plural categories. Use ICU {count, plural, ...} and let the library + locale data decide.
Interpolate variables through the catalog ({name}), never via template-string concatenation around a translated fragment.
Rich/linked text: use the library's component interpolation (<Trans> / t.rich), not dangerouslySetInnerHTML on a translated string (see frontend-security).

Formatting — always `Intl`, never hand-rolled

Dates/times: Intl.DateTimeFormat with an explicit locale and time zone. Store/transport UTC; render in a deliberately chosen zone; label it when ambiguous (consistent with data-viz).
Numbers/currency/units/lists: Intl.NumberFormat (with style: 'currency' + currency code), Intl.ListFormat, Intl.RelativeTimeFormat. No manual thousands separators, decimal marks, or "3 days ago" strings — these differ per locale.
Currency: format with the data's currency, not the UI locale's; never assume $.

Routing & locale negotiation

Locale in the URL (/ja/... subpath, or domain) so pages are linkable, cacheable, and indexable — not only a cookie/header. Emit hreflang alternates and set <html lang> (and dir) per request.
Negotiate initial locale from the URL → stored preference → Accept-Language, with a sane default; let users switch explicitly and persist it.
SSR/RSC: load only the active locale's catalog on the server and pass it down; don't ship every language's messages to the client (bundle bloat). Code-split catalogs by locale/route.

RTL & layout

Drive direction from data: <html dir="rtl"> for RTL locales; never hardcode LTR assumptions.
Use CSS logical properties (margin-inline, inset-inline-start, text-align: start) — mandated already by css-modules, and the reason it's mandated. Physical left/right breaks RTL.
Mirror directional icons (arrows, chevrons) in RTL; don't mirror logos or media. Test one RTL locale (e.g. ar) as a first-class case, plus a pseudo-locale for length/encoding.

Locale-aware input & validation

Accept locale-formatted input (decimal comma, native digits, local date order) and parse to a canonical form before validating with zod (see frontend-security) — validate the parsed value, store canonical.
Names/addresses/phone: don't assume Western structure (first/last, state/ZIP). Keep fields permissive; avoid regex that rejects valid non-Latin input.
Sorting/search: locale-aware collation (Intl.Collator), not byte order.

Testing

Pseudo-localization (accented + padded strings) in a story/build catches truncation, clipping, and hardcoded strings early (pairs with visual-regression over both LTR and one RTL locale).
Stories cover at least one non-English and one RTL locale for layout-sensitive components (see storybook).

i18n

Internationalization

No hardcoded user-facing strings

Plurals, gender, interpolation — ICU MessageFormat

Formatting — always Intl, never hand-rolled

Routing & locale negotiation

RTL & layout

Locale-aware input & validation

Testing

同仓库更多 Skills

Internationalization

No hardcoded user-facing strings

Plurals, gender, interpolation — ICU MessageFormat

Formatting — always Intl, never hand-rolled

Routing & locale negotiation

RTL & layout

Locale-aware input & validation

Testing

同仓库更多 Skills

Formatting — always `Intl`, never hand-rolled

Formatting — always `Intl`, never hand-rolled