skills.rest
allenlin90
allenlin90COMMUNITY
Explore all skills by this author →
GitHub

frontend-i18n

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
One-click install
npx skills add https://github.com/allenlin90/eridu-services --skill frontend-i18n
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
mauriciodelriomauriciodelrio
3

vite-project-structure

Create feature-first Vite + React SPA structures with centralized routing and path aliases.

Community
Intermediate
jonathanbelolojonathanbelolo
3

composable-svelte-i18n

Configure type-safe i18n with ICU MessageFormat and locale-aware formatters for Composable Svelte apps.

Community
Advanced
mabdulraufmabdulrauf

i18n

Centralize React app translations with structured keys and react-i18next namespaces.

Community
Intermediate
eKoh951eKoh951

next-intl-app-router

Integrate next-intl locale routing and translations into Next.js App Router.

Community
Advanced