skills.rest
nuclia
nucliaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

i18n-patterns

Manage internationalization patterns for Angular and Svelte in the Nuclia monorepo.

56|18|Updated Apr 26, 2022
Search Tags:#angular#localization#translation#svelte#i18n#ngx-translate#babel-edit
One-click install
npx skills add https://github.com/nuclia/frontend --skill i18n-patterns-nuclia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: i18n-patterns
Source: https://github.com/nuclia/frontend/tree/main/.claude/skills/i18n-patterns
Command: npx skills add https://github.com/nuclia/frontend --skill i18n-patterns-nuclia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of managing translations across multiple locales within the Nuclia frontend monorepo, ensuring consistency and efficiency in internationalization efforts.

Core Features & Use Cases

  • Consistent Key Management: Enforces flat dot-notation keys and prevents direct JSON file edits for adding, renaming, or deleting translations.
  • Multi-Framework Support: Covers ngx-translate for Angular, and an independent i18n system for the Svelte-based search-widget.
  • Workflow Guidance: Provides clear instructions for using BabelEdit, the translate pipe, TranslateService, and the specific i18n API for the search-widget.
  • Use Case: When adding a new feature that requires user-facing text in English, Spanish, French, and Catalan, this Skill guides you through the entire process, from key creation to template implementation, ensuring all locales are updated simultaneously and correctly.

Quick Start

Use the i18n-patterns skill to add a new translatable string 'welcome.message' with the value 'Welcome to Nuclia!' to the dashboard application.

Frequently Asked Questions about i18n-patterns

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

FAQPage Schema
How do I add a new translation key in an Angular frontend using ngx-translate?▼

You add a new translation key by creating a flat dot-notation key in BabelEdit, avoiding direct JSON file edits, which ensures consistent synchronization across all locales before applying the translate pipe in Angular templates.

How does internationalization work for Svelte components in a monorepo?▼

Internationalization for Svelte components relies on an independent i18n system separate from Angular's ngx-translate, utilizing a specific translation API to manage keys and interpolate values within the search-widget.

What is the best way to manage multiple locale translations across different frontend libraries?▼

Managing multiple locale translations across libraries is best achieved through BabelEdit workflows enforcing flat JSON key conventions, maintaining consistency across both ngx-translate in Angular and the independent Svelte i18n system.

Can I directly edit locale JSON files to rename or delete translation keys?▼

Directly editing locale JSON files to rename or delete translation keys is not allowed; the enforced workflow requires using BabelEdit for key management to prevent inconsistencies and ensure changes propagate correctly.

When do I need to use BabelEdit for frontend localization?▼

BabelEdit is required for frontend localization whenever adding, renaming, or deleting translation keys, serving as the central workflow tool to manage flat JSON conventions and interpolation syntax across multiple supported locales.

Does the i18n-patterns approach support interpolation syntax across Angular and Svelte?▼

Yes, the approach supports interpolation syntax across both frameworks, providing workflow guidance for the translate pipe and TranslateService in Angular alongside the dedicated i18n API for the Svelte search-widget.

Related Skills

Explore More Software Engineering Skills→
Xza85hrfXza85hrf

i18n

Set up internationalization and extract translatable strings in React, Next.js, Vue, and Angular projects.

Community
Intermediate
Nick777-PixelNick777-Pixel

i18n

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

Community
Intermediate
oguzhan18oguzhan18
6

angular-i18n

Extract messages and configure locales for Angular localized builds.

Community
Intermediate
tddworkstddworks
38

app-localization

Manage .strings localization files for Tuist-based iOS and macOS apps.

Official
Advanced