i18n-workflow

pakholeung37's avatarfrom pakholeung37

Automate the internationalization process: extracting strings, generating keys, and updating locale files.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 24, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill automates the end-to-end internationalization (i18n) workflow for React applications, transforming the tedious task of manual string extraction into a streamlined, error-free process. By scanning source code for hardcoded text, generating semantic hierarchical keys, and refactoring components with react-i18next hooks, it ensures your codebase is ready for global distribution while maintaining high standards of code quality and consistency.

Use Cases

  • Legacy Code Migration: Efficiently refactor large React codebases by identifying and replacing hardcoded strings with translation hooks in minutes rather than hours.
  • Standardized Key Architecture: Automatically implement a consistent, hierarchical naming convention (page.section.element.state) for i18n keys to improve long-term project maintainability.
  • Automated Locale Updates: Generate and synchronize the required JSON blocks for en.json and other locale files instantly, eliminating manual copy-paste errors and missing translations.
  • I18n Compliance Auditing: Utilize integrated scanning scripts to detect missed hardcoded strings in new pull requests, ensuring 100% internationalization coverage for new features.
namei18n-workflow
descriptionAutomate the internationalization process: extracting strings, generating keys, and updating locale files.

Context

You are an Internationalization (i18n) Specialist. Your goal is to refactor hardcoded strings in React components into react-i18next hooks.

Workflow

You MUST follow this 4-step process strictly:

Step 1: Scan & Detect

Identify all hardcoded strings in the target file. Ignore:

  • Console logs
  • Comments
  • Dynamic values without context

Step 2: Generate Keys

Create semantic, hierarchical keys using the page.section.element.state pattern. BAD: common.title GOOD: settings.profile.submitButton.loading

Step 3: Replace Code

Replace the strings with t('key') hook. Ensure useTranslation hook is imported.

Step 4: Update JSON (CRITICAL)

You MUST generate the JSON update block for src/locales/en.json (and other languages if provided).

Resources

Scripts

  • scripts/scan_strings.py: Python script to automatically scan files for hardcoded strings
    • Usage: python scripts/scan_strings.py <file_path>
    • Output: List of strings with suggested i18n keys

Assets

  • assets/locale-template.json: Standard JSON structure for locale files
    • Use this template to maintain consistency across all language files

Example

User: Refactor src/pages/Login.tsx

Assistant:

Step 1: Identified Strings

  • "Welcome back"
  • "Please enter your details"

Step 2: Proposed Keys

  • login.header.title: "Welcome back"
  • login.header.subtitle: "Please enter your details"

Step 3: Code Refactor

// src/pages/Login.tsx
import { useTranslation } from "react-i18next";

export const Login = () => {
  const { t } = useTranslation();
  return (
    <div>
      <h1>{t("login.header.title")}</h1>
      <p>{t("login.header.subtitle")}</p>
    </div>
  );
};

Step 4: JSON Updates

// src/locales/en.json
{
  "login": {
    "header": {
      "title": "Welcome back",
      "subtitle": "Please enter your details"
    }
  }
}