frontend-i18n

Name: frontend-i18n
Availability: InStock
Author: allenlin90

Implement type-safe frontend i18n workflows with Paraglide and @eridu/i18n.

1|Updated Jan 2, 2025

Search Tags:#frontend #react #i18n #translations #typesafe #locales #paraglide

Ready to run

npx skills add https://github.com/allenlin90/eridu-services --skill frontend-i18n

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-i18n
Source: https://github.com/allenlin90/eridu-services/tree/main/.agent/skills/frontend-i18n
Command: npx skills add https://github.com/allenlin90/eridu-services --skill frontend-i18n

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often implement i18n in ad-hoc ways, leading to inconsistent translations and brittle UX across apps. This skill provides a standardized, type-safe workflow using Paraglide JS and the shared @eridu/i18n library to unify translation practices.

Core Features & Use Cases

Type-safe translations with Paraglide JS integrated into frontend code.
Centralized message storage under src/i18n/messages and auto-generated code under src/paraglide.
Reuse shared locale definitions from @eridu/i18n for consistency across apps such as erify_creators and erify_studios.
Simple workflow for adding keys, regenerating code, and switching locales.

Quick Start

Use the i18n workflow to add a translation key to src/i18n/messages/en.json and run your dev server to regenerate the Paraglide output under src/paraglide.

Frequently Asked Questions about frontend-i18n

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

FAQPage Schema

How do I implement type-safe translations in a React and Vite project?▼

Type-safe translations in React and Vite are implemented using Paraglide JS to generate code from JSON message files, ensuring locale keys are validated at compile time. This avoids runtime translation errors.

What is the best way to manage frontend locales across multiple React apps?▼

Managing frontend locales across multiple React apps is best handled by centralizing translation messages in a shared library like @eridu/i18n. This enforces consistent locale definitions and unified translation practices.

How do I add a new translation key using Paraglide JS?▼

To add a new translation key using Paraglide JS, insert the key and value into your src/i18n/messages/en.json file. Running your dev server automatically regenerates the Paraglide output under src/paraglide.

Does Paraglide i18n work with shared locale definitions?▼

Yes, Paraglide i18n works with shared locale definitions by leveraging LocaleEnum from a shared library like @eridu/i18n. This ensures consistent runtime locale handling across different frontend applications.

Why should I use Paraglide JS for frontend i18n instead of ad-hoc translation methods?▼

You should use Paraglide JS for frontend i18n to replace ad-hoc translation methods that lead to inconsistent translations and brittle UX. It provides a standardized, type-safe workflow for locale management and code generation.

Where are generated Paraglide translation files stored in a Vite project?▼

Generated Paraglide translation files in a Vite project are stored under the src/paraglide directory. The source translation messages are centralized separately under src/i18n/messages.