I18n Workflow

---
name: i18n-workflow
description: Automate 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

```tsx
// 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

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