skills.rest
vultisig
vultisigOFFICIAL
Explore all skills by this author →
Website𝕏@vultisigGitHub

i18n-workflow

Manage React component internationalization with en.ts and Google Translate.

19|21|Updated Jul 22, 2024
Search Tags:#workflow#react#localization#i18n#translations#internationalization
One-click install
npx skills add https://github.com/vultisig/vultisig-windows --skill i18n-workflow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: i18n-workflow
Source: https://github.com/vultisig/vultisig-windows/tree/main/.cursor/skills/i18n-workflow
Command: npx skills add https://github.com/vultisig/vultisig-windows --skill i18n-workflow

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the process of internationalizing React applications, ensuring user-facing text is managed efficiently and consistently across multiple languages.

Core Features & Use Cases

  • Centralized Translations: Manages all user-facing text within a single en.ts file for easy development.
  • Automated Translation Syncing: Automatically translates new keys to other languages using Google Translate during yarn check.
  • Styled Text Support: Allows for partial styling of translated text using the Trans component, preserving formatting across languages.
  • Pluralization: Supports i18next's built-in pluralization for handling different quantities.
  • Use Case: When adding a new feature with user-facing labels and messages, use this Skill to add the English text to en.ts, and let the automated process handle translations for other supported languages.

Quick Start

Add new user-facing text to the en.ts file.

Frequently Asked Questions about i18n-workflow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add new translations for React components without managing multiple locale files?▼

To add translations in React, update only the `en.ts` file with user-facing text. Other locales are automatically translated via Google Translate when you run `yarn check`, eliminating manual multi-file synchronization.

How does the Trans component handle partial text styling during internationalization?▼

The Trans component supports partial text styling by embedding inline tags within translations. This preserves formatting across different languages while maintaining structured localization in React components.

Can I use i18next pluralization with this React internationalization workflow?▼

Yes, this React internationalization workflow supports i18next built-in pluralization. You can handle varying quantities directly within your centralized `en.ts` translation file for user-facing text.

What is the best way to structure translation keys for React internationalization?▼

The recommended approach is using snake_case key naming conventions. This ensures structural consistency across your centralized `en.ts` file and supported locales during the internationalization process.

Does this internationalization workflow require manual translation for every supported language?▼

No, manual translation is not required. You only update `en.ts` during development, and other supported locales are auto-translated via Google Translate during the `yarn check` command execution.

Related Skills

Explore More Software Engineering Skills→
xkl2013xkl2013

i18n

Integrate react-i18next to add locale keys and generate translations.

Community
Intermediate
Nick777-PixelNick777-Pixel

i18n

Manage localized text in React apps using react-i18next and pnpm i18n.

Community
Intermediate
JaveedIshaqJaveedIshaq
1

i18n-translation-guide

Guide react-i18next implementation with Trans, useTranslation, and structured namespaces.

Community
Intermediate
lobehublobehub
81.4k

i18n

Manage react-i18next translations and locale data in React applications.

Official
Intermediate