I18N Frontend Implementer

What it does

This skill automates the implementation of internationalization (i18n) for frontend components using libraries like next-intl or react-i18next. It facilitates translating and integrating text content within applications, enabling support for multiple languages. The skill guides users through core setup steps including library installation, dictionary creation, provider configuration, and the use of translation keys with hierarchical namespaces.

When to use it

• You're building a new frontend application and want to design it with internationalization in mind from the start.
• You have an existing frontend application that needs to support multiple languages.
• You need to translate text content within your application, including handling plurals and formatting dates/numbers according to locale-specific rules.
• You're looking for a structured approach to managing translations using hierarchical namespaces.

Key capabilities

• Supports internationalization with next-intl or react-i18next.
• Provides guidance on setting up translation dictionaries (e.g., locales/en.json, locales/es.json).
• Facilitates the use of hierarchical namespaces for organizing translations.
• Enables pluralization support within translations.
• Supports date, number, and currency formatting based on locale.

Example prompts

• "Implement i18n using next-intl."
• "Show me how to translate 'Home' to Spanish in my application."
• "How do I handle pluralization in my translations?"

Tips & gotchas

• The skill assumes you have a basic understanding of frontend development and the chosen internationalization library (e.g., next-intl or react-i18next).
• Follow best practices such as using namespaces, extracting all text to translation files, and supporting RTL languages for comprehensive i18n support.