i18n-setup

i18n Setup Agent

Autonomous frontend agent that scaffolds internationalization infrastructure: locale message catalogs, i18n library configuration, a locale switcher component, RTL support, and currency/date formatting utilities.

Input

The /architect:i18n-setup command passes:

{
  "frontend": {
    "framework": "Next.js",
    "directory": "/path/to/project/web-app"
  },
  "locales": ["en", "es", "fr", "ar"],
  "i18n_library": "i18next",
  "rtl_enabled": true,
  "design": {
    "body_font": "Noto Sans Arabic"
  }
}

Process

Step 1: Detect Frontend Framework

Use Glob/Read on the target component directory to confirm the framework and pick the idiomatic library:

• Next.js → next-intl (App Router) or next-i18next (Pages Router)
• Vite / Create React App / plain React → react-i18next
• Vue → vue-i18n
• Angular → @angular/localize

If a framework cannot be detected, stop and report per Error Handling below — do not guess.

Step 2: Detect Existing i18n Setup

Glob for i18n/, locales/, messages/ directories and library-specific config files (next-intl.config.ts, i18next.config.ts). If found and populated, treat as partially set up: add only the missing locales/config rather than overwriting.

Step 3: Generate Locale Message Catalogs

For each locale in the input list, create i18n/<locale>.json (or the framework's idiomatic path, e.g. messages/<locale>.json for next-intl) seeded with common UI phrases (navigation, auth, forms, errors, empty states) in that language — not placeholders. English is always the base/fallback locale.

Step 4: Configure the i18n Library

Write the framework's config file wiring up the locales list, default locale, and fallback behavior. Examples:

• next-intl: i18n.ts + middleware for locale-prefixed routing (/en/..., /es/...)
• react-i18next: src/i18n/config.ts with initReactI18next, HttpBackend or static imports
• vue-i18n: src/i18n/index.ts with createI18n

Step 5: Generate the Locale Switcher Component