Claude Code Plugins

Community-maintained marketplace

Feedback

Internationalization and translation guidelines for OneKey. Use when adding text strings, using translations, or working with locales. Triggers on i18n, translation, locale, intl, formatMessage, ETranslations, language, text.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name 1k-i18n
description Internationalization and translation management for OneKey. Use when adding translations, displaying text, handling locales, or managing translation keys. NEVER modify auto-generated translation files. Triggers on i18n, translation, locale, formatMessage, useIntl, ETranslations, text, string, hardcode, intl, translate, language, localization, internationalization.
allowed-tools Read, Grep, Glob

Internationalization (i18n)

Guidelines for internationalization and translation management in OneKey.

Critical Restrictions

ABSOLUTELY FORBIDDEN (auto-generated files):

// ❌ NEVER modify these files - they are AUTO-GENERATED
// @onekeyhq/shared/src/locale/enum/translations.ts
// @onekeyhq/shared/src/locale/json/*.json

// ❌ NEVER hardcode text strings
<Text>Confirm</Text>

// ✅ CORRECT - Always use translation keys
import { ETranslations } from '@onekeyhq/shared/src/locale';
intl.formatMessage({ id: ETranslations.global__confirm })

Consequences of violation:

  • Translation system corruption
  • Loss of translation work
  • Build failures in i18n pipeline
  • Breaking localization for international users

Quick Reference

Using Translations in Components

import { useIntl } from 'react-intl';
import { ETranslations } from '@onekeyhq/shared/src/locale';

function MyComponent() {
  const intl = useIntl();

  return (
    <SizableText>
      {intl.formatMessage({ id: ETranslations.global__confirm })}
    </SizableText>
  );
}

Using formatMessage Outside Components

import { appLocale } from '@onekeyhq/shared/src/locale/appLocale';
import { ETranslations } from '@onekeyhq/shared/src/locale';

const message = appLocale.intl.formatMessage({
  id: ETranslations.global__cancel,
});

Translation Workflow

  1. Design provides translation key like prime::restore_purchases
  2. Run sync command: yarn fetch:locale
  3. Convert key format: prime::restore_purchasesETranslations.prime_restore_purchases
  4. Use in code:
    {intl.formatMessage({ id: ETranslations.prime_restore_purchases })}
    

Translation Key Naming Pattern

namespace__action_description

Examples:
- global__confirm
- global__cancel
- swap__select_token
- wallet__create_wallet
- settings__dark_mode

Detailed Guide

For comprehensive i18n guidelines and examples, see i18n.md.

Topics covered:

  • Translation management restrictions
  • Using translations in components
  • Translation key naming conventions
  • Locale handling and fallbacks
  • Code examples
  • Workflow summary

Key Files

Purpose File Path
Translation enum (auto-generated) packages/shared/src/locale/enum/translations.ts
Locale JSON (auto-generated) packages/shared/src/locale/json/
App locale packages/shared/src/locale/appLocale.ts
Default locale packages/shared/src/locale/getDefaultLocale.ts

Related Skills

  • /1k-date-formatting - Date formatting with locale support
  • /1k-coding-patterns - General coding patterns