---

name: i18n-manager description: Manage internationalization for NutriProfile's 7 languages. Use this skill when adding translations, creating new i18n keys, checking translation coverage, or working with RTL support for Arabic. Ensures consistency across FR, EN, DE, ES, PT, ZH, AR. allowed-tools: Read,Write,Edit,Grep,Glob

NutriProfile i18n Manager Skill

You are an internationalization expert for the NutriProfile application. This skill helps you manage translations across 7 languages with proper formatting and consistency.

Supported Languages

File Structure

Copyfrontend/src/i18n/
├── index.ts                    # i18next configuration
└── locales/
    ├── en/
    │   ├── common.json         # Shared translations
    │   ├── auth.json           # Authentication
    │   ├── dashboard.json      # Dashboard
    │   ├── vision.json         # Food analysis
    │   ├── recipes.json        # Recipe generation
    │   ├── tracking.json       # Activity tracking
    │   ├── settings.json       # User settings
    │   ├── onboarding.json     # Onboarding wizard
    │   ├── home.json           # Landing page
    │   ├── pricing.json        # Pricing/subscriptions
    │   ├── terms.json          # Terms of service
    │   ├── privacy.json        # Privacy policy
    │   ├── refund.json         # Refund policy
    │   └── pro.json            # Pro features
    ├── fr/
    │   └── [same structure]
    ├── de/
    ├── es/
    ├── pt/
    ├── zh/
    └── ar/

Namespaces

Usage in Components

Basic Usage

Copyimport { useTranslation } from 'react-i18next'

function MyComponent() {
  const { t } = useTranslation('vision')

  return (
    <div>
      <h1>{t('title')}</h1>
      <p>{t('description')}</p>
    </div>
  )
}

With Parameters

Copy// JSON: "welcome": "Bonjour {{name}} !"
t('welcome', { name: user.name })

// JSON: "count": "{{count}} repas"
t('count', { count: meals.length })

Pluralization

Copy// JSON:
// "item": "{{count}} item"
// "item_plural": "{{count}} items"
t('item', { count: items.length })

Multiple Namespaces

Copyconst { t } = useTranslation(['vision', 'common'])

// Access vision namespace
t('vision:title')

// Access common namespace
t('common:save')

Adding New Translations

Step-by-Step Process

1. Identify the namespace - Choose appropriate namespace for the content

2. Add to English first (en/*.json)

Copy{
  "newFeature": {
    "title": "New Feature",
    "description": "This is a new feature",
    "actions": {
      "start": "Get Started",
      "learn": "Learn More"
    }
  }
}

1. Translate to all 6 other languages

French (fr):

Copy{
  "newFeature": {
    "title": "Nouvelle Fonctionnalité",
    "description": "Ceci est une nouvelle fonctionnalité",
    "actions": {
      "start": "Commencer",
      "learn": "En savoir plus"
    }
  }
}

German (de):

Copy{
  "newFeature": {
    "title": "Neue Funktion",
    "description": "Dies ist eine neue Funktion",
    "actions": {
      "start": "Loslegen",
      "learn": "Mehr erfahren"
    }
  }
}

Spanish (es):

Copy{
  "newFeature": {
    "title": "Nueva Función",
    "description": "Esta es una nueva función",
    "actions": {
      "start": "Comenzar",
      "learn": "Saber más"
    }
  }
}

Portuguese (pt):

Copy{
  "newFeature": {
    "title": "Nova Funcionalidade",
    "description": "Esta é uma nova funcionalidade",
    "actions": {
      "start": "Começar",
      "learn": "Saiba mais"
    }
  }
}

Chinese (zh):

Copy{
  "newFeature": {
    "title": "新功能",
    "description": "这是一个新功能",
    "actions": {
      "start": "开始使用",
      "learn": "了解更多"
    }
  }
}

Arabic (ar):

Copy{
  "newFeature": {
    "title": "ميزة جديدة",
    "description": "هذه ميزة جديدة",
    "actions": {
      "start": "ابدأ",
      "learn": "اعرف المزيد"
    }
  }
}

RTL Support for Arabic

CSS Classes

Copy/* Applied automatically when lang="ar" */
[dir="rtl"] {
  text-align: right;
}

/* Flip icons and directional elements */
[dir="rtl"] .icon-arrow {
  transform: scaleX(-1);
}

Component Considerations

Copy// Use logical properties instead of left/right
className="ms-4"  // margin-start (left in LTR, right in RTL)
className="me-4"  // margin-end (right in LTR, left in RTL)
className="ps-4"  // padding-start
className="pe-4"  // padding-end

// Tailwind RTL variants
className="text-left rtl:text-right"
className="ml-4 rtl:mr-4 rtl:ml-0"

Checking Translation Coverage

Find Missing Keys

Copy# Grep for t() calls without corresponding keys
cd frontend
grep -r "t('" src/ | grep -oP "t\('\K[^']+(?=')" | sort -u > used_keys.txt

Compare Language Files

Copy# Check if all languages have same keys
diff <(jq -S 'keys' locales/en/vision.json) <(jq -S 'keys' locales/fr/vision.json)

Best Practices

DO:

• Use nested objects for organization
• Keep keys semantic and descriptive
• Use parameters for dynamic content
• Maintain consistent key naming across namespaces
• Test with longest language (German often longer)
• Check Arabic RTL layout after changes

DON'T:

• Hardcode ANY user-visible text
• Use translation keys as display text
• Concatenate translated strings
• Assume text length is similar across languages
• Forget to handle pluralization

Common Translation Patterns

Button Actions

Copy{
  "actions": {
    "save": "Save",
    "cancel": "Cancel",
    "delete": "Delete",
    "edit": "Edit",
    "submit": "Submit",
    "confirm": "Confirm"
  }
}

Form Labels

Copy{
  "form": {
    "email": "Email",
    "password": "Password",
    "name": "Name",
    "required": "This field is required"
  }
}

Error Messages

Copy{
  "errors": {
    "generic": "An error occurred",
    "network": "Network error. Please try again.",
    "validation": "Please check your input",
    "unauthorized": "Please log in to continue"
  }
}

Success Messages

Copy{
  "success": {
    "saved": "Changes saved successfully",
    "deleted": "Item deleted",
    "created": "Item created successfully"
  }
}

Quality Checklist

Before committing translations:

• All 7 languages have the new keys
• Keys are in the correct namespace
• Parameters match across all languages
• Pluralization is handled where needed
• Arabic text reads naturally RTL
• No hardcoded text remains in component
• Translations are contextually appropriate