多言語対応(i18n)

Automate creation and management of English and Japanese translations for server and client components.

Updated Dec 20, 2025
One-click install
npx skills add https://github.com/Takashi-Matsumura/box-frame --skill i18n-takashi-matsumura
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: 多言語対応(i18n)
Source: https://github.com/Takashi-Matsumura/box-frame/tree/main/.claude/skills/i18n
Command: npx skills add https://github.com/Takashi-Matsumura/box-frame --skill i18n-takashi-matsumura

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates the creation and management of translations for server and client components.

Core Features & Use Cases

  • Translation management: Centralized translations for server and client components.
  • Type-safe keys: Structured translation keys to prevent runtime errors.
  • Use Case: When adding a new page, create translations in en/ja and reference them in components.

Quick Start

  • Create a translations.ts with en/ja keys under your module.
  • Implement a get-language helper and wire it into server and client components.
  • Use the translations in components by selecting the current language and accessing the correct keys.

Frequently Asked Questions about 多言語対応(i18n)

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add translations for server and client components in a TypeScript app?

To add translations, create a translations.ts file with en/ja keys under your module, implement a get-language helper, and wire it into server and client components. This approach centralizes translation management for multilingual applications.

What is the best way to prevent runtime errors with i18n translation keys?

The best way to prevent runtime errors is to use type-safe translation keys. Structuring your translations.ts with typed keys ensures that accessing incorrect keys is caught during development rather than at runtime.

Do I need a specific file structure to manage i18n for new pages and components?

Yes, you need a translations.ts file structured with language keys under each module. This file, combined with a get-language helper, establishes a consistent usage pattern for referencing translations in both server and client components.

Can I use this i18n approach for both English and Japanese localization?

Yes, this approach supports English and Japanese localization. You define both en and ja keys within your translations.ts file and select the current language to access the correct keys in your components.

What are the limitations of managing multilingual UI with centralized translations?

This method requires a consistent usage pattern across server and client components, meaning you must maintain a translations.ts file and a get-language helper manually. It currently targets English and Japanese, covering new pages and components with structured keys.