skills.rest
HybridTalentComputing
HybridTalentComputingCOMMUNITY
Explore all skills by this author →
GitHub

i18n-translation

Automate five-phase i18n workflows for React, Vue, and Angular codebases.

Updated Jan 5, 2026
Search Tags:#React#translation#i18n#internationalization#Vue#Angular#namespaces
One-click install
npx skills add https://github.com/HybridTalentComputing/ai-coding-skills --skill i18n-translation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: i18n-translation
Source: https://github.com/HybridTalentComputing/ai-coding-skills/tree/main/skills/i18n-translation
Command: npx skills add https://github.com/HybridTalentComputing/ai-coding-skills --skill i18n-translation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a disciplined, AI-guided workflow to implement complete internationalization (i18n) in web applications, ensuring zero hardcoded strings and 100% UI coverage.

Core Features & Use Cases

  • Systematic 5-phase approach (Project Analysis, String Extraction, Translation Infrastructure, Component Migration, Validation)
  • Works with React, Vue, Angular and similar frameworks
  • Guidance on namespace organization, extraction patterns, and quality checklists
  • Auditing and validating translations, including JSON syntax and language switching
  • Use cases: adding i18n to a new project, migrating existing hardcoded UI, auditing translations, or scaling to additional languages

Quick Start

Start by reviewing the workflow and reference guides to plan your i18n implementation.

Frequently Asked Questions about i18n-translation

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

FAQPage Schema
How do I implement internationalization (i18n) in my React, Vue, or Angular application?▼

Internationalization is the process of structuring code to support multiple languages. This Skill provides a disciplined 5-phase workflow—project analysis, string extraction, translation infrastructure setup, component migration, and validation—ensuring 100% UI coverage with zero hardcoded strings across your framework.

What's the best way to extract hardcoded strings from an existing codebase?▼

String extraction is the second phase of a systematic i18n implementation. This Skill guides you through identifying all hardcoded text in components and views, organizing them into namespaces, and preparing them for translation infrastructure setup.

Can I add i18n to an existing project without rewriting all my components?▼

Yes. This Skill outlines a migration approach that systematically replaces hardcoded strings with translation keys across components and views, validates JSON translation files, and ensures language switching works without regressions—scaling incrementally to additional languages.

How do I validate that my translations are complete and correct?▼

Translation validation checks for 100% UI coverage, audits JSON syntax, verifies all hardcoded strings have been extracted, and tests language switching across your application. This final phase ensures no strings were missed and translations render correctly.

Does i18n require namespace organization in my codebase?▼

Namespace organization is a core pattern covered in this Skill's workflow. It structures translations logically by feature or component, improving maintainability, extraction accuracy, and makes scaling to new languages more efficient.

Related Skills

Explore More Software Engineering Skills→
buihuulocbuihuuloc

ue-localization-scanner

Scan Unreal Engine C++ and Blueprint codebases for hardcoded strings and localization issues.

Community
Advanced
diadia0000diadia0000

core-i18n-index

Re-export internationalization functions and type definitions for locale management.

Community
Basic
CrazyDubyaCrazyDubya

internationalization-helper

Extract hardcoded strings and manage translation files across locales.

Community
Intermediate
Xza85hrfXza85hrf

i18n

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

Community
Intermediate