Agent Skills by ALSEL
汎用ソフトウェア開発⭐ リポ 7品質スコア 74/100

setup-tyndale

React、Next.js、またはAstro/Starlightプロジェクトに対して、Tyndale i18nを追加する場合に使用します。既存のコードベースに翻訳機能を統合したり、ユーザーが「翻訳を追加してほしい」「このアプリを多言語対応にしてほしい」「i18nをセットアップしてほしい」「多言語サポートを追加してほしい」と指示した場合に活用できます。

description の原文を見る

Use when adding Tyndale i18n to a React, Next.js, or Astro/Starlight project, integrating translations into an existing codebase, or a user says "add translations", "internationalize this app", "set up i18n", or "add multi-language support"

SKILL.md 本文

Tyndale のセットアップ

概要

Tyndale は React、Next.js、Astro アプリケーション、およびドキュメントサイト向けの AI を活用した i18n です。アプリを1つの言語で記述し、CLI を実行すると翻訳が得られます。キーファイルの管理は不要です。

このスキルは公開されている npm パッケージから Tyndale をインテグレーションします。ローカルクローンの場合は setup-tyndale-local を使用してください。

サポートされているフレームワーク

アプリの翻訳（npx tyndale extract / npx tyndale translate）

  • React
  • Vite + React
  • Next.js
  • Astro コンポーネント（.astro）

ドキュメント翻訳（npx tyndale translate-docs）

  • Starlight
  • Docusaurus
  • VitePress
  • MkDocs
  • Nextra

使用する場合

  • React、Next.js、または Astro アプリに i18n を追加する場合
  • Starlight、Docusaurus、VitePress、MkDocs、または Nextra のドキュメントを翻訳する場合
  • 「多言語対応にする」「翻訳する」「言語サポートを追加する」
  • 新規または既存のプロジェクトで Tyndale をセットアップする場合

以下の場合は対象外： 翻訳出力のデバッグ、Tyndale の内部修正、または Tyndale モノレポの作業。

前提条件

  • Node.js >= 20
  • React、Vite+React、Next.js（>= 14、15/16 を含む）、Astro、またはサポートされているドキュメントフレームワークのプロジェクト
  • AI プロバイダー API キー（Anthropic、OpenAI、または Google）

CLI クイックリファレンス

コマンド用途
npx tyndale initコンフィグをスキャフォルド、フレームワークを検出する
npx tyndale authAI プロバイダーの認証情報を保存する
npx tyndale modelAI モデルを選択/更新する
npx tyndale translate自動的に extract を実行し、AI で翻訳する
npx tyndale translate-docsAstro/Starlight/Docusaurus/VitePress/MkDocs/Nextra を翻訳
npx tyndale validate翻訳をチェック（ファイルは保存しない）（CI 用）

フラグ：--locale <code>、--force、--dry-run、--token-budget <n>、--concurrency <n>。

セットアップステップ

1. パッケージをインストール

# Next.js
npm install tyndale-react tyndale-next
npm install -D tyndale

# React (Vite またはプレーン)
npm install tyndale-react
npm install -D tyndale

# Astro アプリの翻訳
npm install tyndale-react
npm install -D tyndale

# Astro / Starlight ドキュメントのみ
npm install -D tyndale

2. 初期化

init を実行する前に、ユーザーに設定したいロケール、デフォルトロケールについて確認してください。ハーネスから提供されているツールを使用して対話的に質問を行い、その回答をフラグとして非対話的にコマンドを実行できるようにします。

npx tyndale init
# または非対話的に:
npx tyndale init --default-locale en --locales es,fr,ja

tyndale.config.json を生成し、public/_tyndale/ を .gitignore に追加し、Next.js の場合は middleware.ts を作成します。

3. 認証

まず既に認証されているかどうかを確認してください。されていない場合は、ユーザーに auth を実行するよう依頼し、完了したら知らせてもらうことで、セットアップを続行できます。これはマシンごとに 1 回だけの手順で、AI プロバイダーの認証情報を保存します。

npx tyndale auth

マシンごとに 1 回だけです。

4. Next.js のワイリング

Next.js 以外のプロジェクトはスキップしてください。

a. next.config.mjs をラップ：

import { withTyndaleConfig } from "tyndale-next/config";

export default withTyndaleConfig({
  // 既存のコンフィグ
});

withTyndaleConfig は tyndale.config.json を読み込み、ビルド時の環境変数をインジェクトし、プロバイダーコンテキストを共有するように tyndale-react をエイリアスします。

b. middleware.ts を確認（init で作成）：

import { createTyndaleMiddleware } from "tyndale-next/middleware";

export default createTyndaleMiddleware();

export const config = {
  matcher: ["/((?!api|_next|_tyndale|.*\\..*).*)"],
};

c. [locale] 動的セグメントを使用：

app/
  [locale]/
    layout.tsx    ← ここに TyndaleServerProvider を配置
    page.tsx

d. ルートレイアウトにサーバープロバイダーを配置（Next 15+ では params の await が必須）：

// app/[locale]/layout.tsx
import { getDirection, TyndaleServerProvider } from "tyndale-next/server";

export default async function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  return (
    <html lang={locale} dir={getDirection(locale)}>
      <body>
        <TyndaleServerProvider locale={locale}>
          {children}
        </TyndaleServerProvider>
      </body>
    </html>
  );
}

tyndale-next/server からインポートしてください（正式版）。クライアントコンポーネントでは getDirection の代わりに useDirection() を使用してください。

5. Next.js 以外の React のワイリング

import { TyndaleProvider } from "tyndale-react";

<TyndaleProvider
  defaultLocale="en"
  locale="en"
  initialManifest={manifest}
  initialTranslations={translations}
>
  {/* あなたのアプリ */}
</TyndaleProvider>;

TyndaleProvider は defaultLocale、オプションの locale、およびオプションの事前ロード initialManifest / initialTranslations を受け取ります。これらを事前ロードしない場合、自動的に public/_tyndale/ から manifest.json と <locale>.json を取得します。

6. Astro アプリケーション

.astro ページ/コンポーネントを翻訳したい場合は、通常のアプリ翻訳フローを使用します。translate-docs は使用しません。

a. プロジェクトで React コンポーネントをまだレンダリングしていない場合、Astro の React インテグレーションを追加：

npx astro add react

tyndale-react は <T>、<Var>、<Num> などの React コンポーネントをエクスポートするため、Astro はこれらをレンダリングするために React インテグレーションが必要です。公式 Astro ドキュメント：https://docs.astro.build/en/guides/integrations-guide/react/

b. extensions に .astro を保持（init はデフォルトで追加）：

{
  "extensions": [".ts", ".tsx", ".js", ".jsx", ".astro"]
}

c. 翻訳可能な Astro コンテンツをラップ：

---
import { T, Var, Num } from 'tyndale-react';
const userName = 'Ada';
const count = 3;
---

<T>
  <h1>Hello <Var name="user">{userName}</Var></h1>
  <p>You have <Num name="count" value={count} /> items.</p>
</T>

d. アプリを翻訳：

npx tyndale translate

7. Astro / Starlight ドキュメント

ドキュメントコンテンツの場合は translate-docs を使用します。アプリ UI 文字列ではありません。

tyndale.config.json に手動で docs を追加：

{
  "docs": {
    "framework": "starlight",
    "contentDir": "src/content/docs"
  }
}

または Tyndale に検出・記述させる：

npx tyndale translate-docs setup

サポートされているフレームワーク：starlight、docusaurus、vitepress、mkdocs、nextra。その後、npx tyndale translate-docs を実行します。

Astro コンポーネント文字列（ドキュメントではない）の場合は、引き続き translate を使用してください。translate-docs はドキュメントコンテンツのみです。

8. 翻訳可能なコンテンツをラップ

import { T, Var, Num, useTranslation } from "tyndale-react";

<T>
  <h1>Welcome to our app</h1>
  <p>
    Hello <Var name="user">{userName}</Var>, you have <Num value={count} />{" "}
    items.
  </p>
</T>;

function SearchBar() {
  const t = useTranslation();
  return <input placeholder={t("Search products...")} />;
}

コンポーネント： <T>、<Var>、<Num>、<Currency>、<DateTime>、<Plural>。 フック： useTranslation、useLocale、useChangeLocale、useDictionary、useDirection（tyndale-next）。

9. 抽出、翻訳、ビルド

npx tyndale translate    # べき等；extract を自動実行

ビルドにワイヤ：

{
  "scripts": {
    "build": "tyndale translate && next build"
  }
}

10. CI

npx tyndale validate

ファイルを保存せずに、欠落または古い翻訳がある場合は 0 以外で終了します。

コンフィグレーション リファレンス

プロジェクトルートの tyndale.config.json：

{
  "defaultLocale": "en",
  "locales": ["es", "fr", "ja"],
  "source": ["src", "app"],
  "extensions": [".ts", ".tsx", ".js", ".jsx", ".astro"],
  "output": "public/_tyndale",
  "translate": { "tokenBudget": 50000, "concurrency": 8 },
  "localeAliases": { "pt-BR": "pt" },
  "dictionaries": {
    "include": ["src/dictionaries/*.json"],
    "format": "key-value"
  },
  "pi": { "model": "claude-sonnet-4-20250514", "thinkingLevel": "low" },
  "docs": { "framework": "starlight", "contentDir": "src/content/docs" }
}
フィールド型デフォルト備考
defaultLocalestring"en"ソース言語。locales に現れてはいけません。
localesstring[]必須ターゲットロケールのみ。
sourcestring[]["src"]extract でスキャンされるディレクトリ。
include / excludestring[]—ファイルウォーカーの Glob オーバーライド。
extensionsstring[][".ts",".tsx",".js",".jsx",".astro"]
outputstring"public/_tyndale"出力ディレクトリ。
translate.tokenBudgetnumber50000バッチあたりのトークン数。
translate.concurrencynumberauto並列 AI セッション数。
localeAliasesobject{}例：{"pt-BR":"pt"}。
dictionaries.includestring[][]Glob パターン。
dictionaries.formatstring"key-value"
pi.modelstring"claude-sonnet-4-20250514"Anthropic / OpenAI / Google ID。
pi.thinkingLevelstring"low"
docs.frameworkenum—starlight / docusaurus / vitepress / mkdocs / nextra。
docs.contentDirstringauto

batchSize フィールドはありません。古いコンフィグで見かけた場合は、translate.tokenBudget に移行してください。

よくある間違い

間違い修正方法
Next 15/16 レイアウトで params: { locale: string }params: Promise<{ locale: string }> + const { locale } = await params を使用
defaultLocale が locales に含まれているlocales はターゲットのみ — デフォルトを削除
tyndale-next から TyndaleServerProvider をインポートtyndale-next/server からインポート（getDirection も取得）
Next.js で withTyndaleConfig() がないTyndale はビルド時の環境変数が必要 — コンフィグをラップ
[locale] ルートセグメントがないNext.js のロケールルーティングは app/[locale]/ が必須
コンフィグで batchSize を設定廃止 — translate.tokenBudget を使用
translate 前に手動で extract を実行不要；translate が extract を実行
public/_tyndale/ を .gitignore に追加していないinit が実行；その後確認
翻訳不可能なコンテンツを <T> でラップユーザーに表示されるテキストのみをラップ、動的データは除外

npx tyndale model で切り替えるか、pi.model を編集してください。

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者
ogrodev
リポジトリ
ogrodev/tyndale
ライセンス
MIT
最終更新
2026/4/23
GitHubで原本を見る →フィードバックを送る

Source: https://github.com/ogrodev/tyndale / ライセンス: MIT

本サイトは GitHub 上で公開されているオープンソースの SKILL.md ファイルをクロール・インデックス化したものです。 各スキルの著作権は原作者に帰属します。掲載に問題がある場合は info@alsel.co.jp または /takedown フォームよりご連絡ください。
原作者: ogrodev · ogrodev/tyndale · ライセンス: MIT