本文へ移動
cccskills
無料GitHub で公開日本語紹介

i18n

react-i18nextを使うアプリで、翻訳キーや名前空間の追加、補間、翻訳生成の流れを整え、既存文言を変更した際の各言語への反映漏れを防ぐスキルです。

原文原文の説明を見る

Use for user-facing strings and react-i18next locale keys, namespaces, interpolation, translations or bun run i18n.

lobehub/lobehubスター 83,500(GitHub 83,500 + cccskills 0)

実行スコア 未検証

インストール方法を見る

こんなときに便利

  • 画面に新しい翻訳キーを追加したいとき
  • キー名や名前空間の付け方を揃えたいとき
  • 英語の変更を各言語の翻訳に反映したいとき
  • 翻訳ファイルをすぐに生成したいとき

日本語での紹介

できること

react-i18nextを使うアプリで、画面に表示する文言を翻訳用のキーとして追加・管理する手順を案内します。キーはドット区切りのフラット形式にし、機能や文脈、用途が分かる名前を付けます。{{variableName}}形式の補間や、複数の名前空間を使う方法も確認できます。英語を基準にキーを追加し、必要に応じて英語と中国語のプレビューを更新したうえで、ほかの言語は自動翻訳ワークフローに任せる流れを整理します。既存の英語文言を変更した際に、生成済みの翻訳が古いまま残る問題への対処も扱います。

こんなときに便利

新しい画面や機能の文言を追加する開発者、翻訳キーの命名や名前空間の分け方を揃えたいチームに向いています。英語の原文を改めたときに、各言語へ変更を反映する方法を確認したい場合にも役立ちます。

使い方の例

  • 「設定画面に新しい翻訳キーを追加する手順を教えて」
  • 「この画面の文言に合うキー名と名前空間を提案して」
  • 「英語の既存文言を変えたので、翻訳の更新方法を確認して」

注意点

編集対象は原則としてpackages/locales/src/default/です。翻訳生成のbun run i18nは時間がかかり、実行にはOPENAI_API_KEYが必要です。通常、ほかの言語の生成ファイルは日次の自動ワークフローが更新します。

この紹介文は、公開されている SKILL.md をもとに AI(OpenAI Codex)が作成しました。正確な仕様は下の原文を確認してください。

資料チェック

SKILL.md の記述から、注意が要る操作と導入の前提を AI が確認しました。点数は実際に動かした結果(実行検証)だけで付けています。

安全面送信・削除・コマンド実行などの扱いが明示されているか
B一部不足生成言語ファイルの削除・再生成手順がありますが、適用条件は個別判断です。
導入のしやすさ必要なツールや API キーが少ないか、書かれているか
B一部不足`bun run i18n`には`OPENAI_API_KEY`が必要ですが、設定手順はありません。

点数には入れていません。 2026年10月26日 時点で AI(OpenAI Codex)が判定しました。目安なので、入れる前に原文も確認してください。

評価が違うと思ったら、見直しを依頼する

どの項目が、なぜ違うと思うかを書いてください。ログインは不要です。内容を SKILL.md と照らし合わせて評価を作り直し、この欄に反映します。

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

含まれるファイル(1)

  • SKILL.md3.5 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

LobeHub Internationalization Guide

  • Default language: English (en-US)
  • Framework: react-i18next
  • Only edit files in packages/locales/src/default/ - Never hand-write translations in locales/ JSON (except en-US/zh-CN previews); generated locales change only through lobe-i18n, plus the key deletions described in Changing an existing key's English text
  • Leave generated locales to the daily auto-i18n.yml workflow by default; run bun run i18n manually only when they are needed immediately

Key Naming Convention

Flat keys with dot notation (not nested objects):

// ✅ Correct
export default {
  'alert.cloud.action': '立即体验',
  'sync.actions.sync': '立即同步',
  'sync.status.ready': '已连接',
};

// ❌ Avoid nested objects
export default {
  alert: { cloud: { action: '...' } },
};

Patterns: {feature}.{context}.{action|status}

Parameters: Use {{variableName}} syntax

'alert.cloud.desc': '我们提供 {{credit}} 额度积分',

Avoid key conflicts:

// ❌ Conflict
'clientDB.solve': '自助解决',
'clientDB.solve.backup.title': '数据备份',

// ✅ Solution
'clientDB.solve.action': '自助解决',
'clientDB.solve.backup.title': '数据备份',

Workflow

  1. Add keys to packages/locales/src/default/{namespace}.ts
  2. Export new namespace in packages/locales/src/default/index.ts
  3. For dev preview: manually translate locales/zh-CN/{namespace}.json and locales/en-US/{namespace}.json
  4. Leave all other locales to .github/workflows/auto-i18n.yml, which runs daily and opens an automated translation PR
  5. Run bun run i18n manually only when the branch needs those translations immediately; it is slow and requires OPENAI_API_KEY

Changing an existing key's English text

lobe-i18n (both the daily workflow and bun run i18n) only translates keys that are missing from a locale. It never re-translates a key whose English value changed, so editing an existing value leaves every generated locale on the old text indefinitely (e.g. expanded settingsSearch.tabKeywords.* stayed stale in 16 locales for weeks).

When a change alters an existing key's meaning or content (not just a typo), do one of:

  • Rename the key, so it is missing everywhere and gets translated fresh.
  • Re-translate it in the same PR: delete the key from every generated locales/*/{namespace}.json (all except en-US/zh-CN), run bun run i18n, and commit only those keys — the run also fills unrelated missing keys, which belong to the daily workflow PR.
  • If the stale translation is harmless until the daily run, delete the key from the generated locales so they fall back to English and the workflow re-translates it. Do not do this when the localized text is load-bearing (e.g. search keywords users type in their own language).

Usage

import { useTranslation } from 'react-i18next';

const { t } = useTranslation('common');

t('newFeature.title');
t('alert.cloud.desc', { credit: '1000' });

// Multiple namespaces
const { t } = useTranslation(['common', 'chat']);
t('common:save');

Common Namespaces

Most used: common (shared UI), chat (chat features), setting (settings)

Others: auth, changelog, components, discover, editor, electron, error, file, hotkey, knowledgeBase, memory, models, plugin, portal, providers, tool, topic

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

acceptance

無料概要あり

実際の製品を操作して、利用者が確認できる動作証拠を集め、検証計画に沿った受け入れレポートとして公開するスキルです。

  • 変更後の製品動作を実地で検証したいとき
  • 画面キャプチャなどの証拠を集めたいとき
  • 検証計画とレポートを作成したいとき
lobehub/lobehub8.4万2026年10月26日 更新

add-model-provider

無料概要あり

LobeHubにAIモデルプロバイダーを追加し、実行時連携からモデル表示、設定、ブランド表記、文書化、動作確認まで進めるスキルです。

  • 新しいAIモデルプロバイダーを追加したいとき
  • プロバイダーの設定手順や説明文を更新したいとき
  • 既存プロバイダーへのモデル追加要件を見極めたいとき
lobehub/lobehub8.4万2026年10月26日 更新

add-setting-env

無料概要あり

ユーザー設定の初期値をサーバー側の環境変数で切り替えるため、型定義や設定の組み立て、ユーザーストアへの反映、環境変数の例と説明書きを追加する手順です。

  • 設定の初期値を環境変数で変えたいとき
  • 設定項目をサーバー設定に追加したいとき
  • 環境変数の例と説明を更新したいとき
lobehub/lobehub8.4万2026年10月26日 更新

agent-runtime-hooks

無料概要あり

エージェント実行中の各段階をフックで監視し、ツール呼び出しの模擬・制御や人の承認、圧縮、サブエージェント処理に介入する仕組みを扱います。

  • エージェントの実行状況を記録したいとき
  • ツール結果をテスト用に模擬したいとき
  • Webhookでツール実行を許可・拒否したいとき
lobehub/lobehub8.4万2026年10月26日 更新

agent-signal

無料概要あり

イベントを起点にエージェントのバックグラウンド処理を組み立て、ソース・シグナル・アクション・ポリシーの役割分担や非同期連携を実装するためのスキルです。

  • イベント起点の処理を追加したいとき
  • バックグラウンド処理を非同期化したいとき
  • 重複実行を防ぐ仕組みを整えたいとき
lobehub/lobehub8.4万2026年10月26日 更新

agent-testing-bot

無料概要あり

DiscordやSlackなどの実際のチャットアプリでボットにメッセージを送り、応答を画面で確認する受け入れテストを行うスキルです。

  • 実際のDiscordでボット応答を確かめたいとき
  • SlackやTelegramの会話経路をテストしたいとき
  • macOSアプリ上の操作結果を画面で記録したいとき
lobehub/lobehub8.4万2026年10月26日 更新

lobehub のスキルをすべて見る

このスキルの問題を報告する