一键在 Manus 中运行任何 Skill

internationalization

星标33

分支5

更新时间2026年1月14日 18:55

i18n/l10n implementation for multi-language support. Use for translation setup, RTL support, and locale-aware formatting.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

Sir-chawakorn

Sir-chawakorn/power-ranger-toolkit

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

🌍 Internationalization (i18n) Skill

Setup

Next.js (next-intl)

npm install next-intl

// messages/en.json
{
  "home": {
    "title": "Welcome",
    "greeting": "Hello, {name}!"
  }
}

// messages/th.json
{
  "home": {
    "title": "ยินดีต้อนรับ",
    "greeting": "สวัสดี, {name}!"
  }
}

React (react-i18next)

npm install react-i18next i18next

import { useTranslation } from 'react-i18next';

function Welcome() {
  const { t } = useTranslation();
  return <h1>{t('home.title')}</h1>;
}

Translation Best Practices

Do's ✅

{
  "items_count": "{count, plural, one {# item} other {# items}}",
  "greeting": "Hello, {name}!",
  "date_format": "{date, date, medium}"
}

Don'ts ❌

// Don't concatenate strings
const message = t('hello') + ' ' + name;  // ❌

// Do use interpolation
const message = t('greeting', { name }); // ✅

Number & Date Formatting

// Numbers
new Intl.NumberFormat('th-TH', {
  style: 'currency',
  currency: 'THB'
}).format(1234.56);
// "฿1,234.56"

// Dates
new Intl.DateTimeFormat('th-TH', {
  dateStyle: 'long'
}).format(new Date());
// "15 มกราคม 2569"

// Relative time
new Intl.RelativeTimeFormat('th', { numeric: 'auto' })
  .format(-1, 'day');
// "เมื่อวาน"

RTL Support

/* Use logical properties */
.container {
  /* Instead of margin-left/right */
  margin-inline-start: 1rem;
  margin-inline-end: 2rem;
  
  /* Instead of padding-left/right */
  padding-inline: 1rem;
  
  /* Instead of text-align: left */
  text-align: start;
}

/* RTL-specific styles */
[dir="rtl"] .icon-arrow {
  transform: scaleX(-1);
}

<html lang="ar" dir="rtl">

Locale Detection

// Browser detection
const locale = navigator.language; // "th-TH"

// Accept-Language header
app.use((req, res, next) => {
  const locale = req.acceptsLanguages('th', 'en') || 'en';
  req.locale = locale;
  next();
});

Translation Workflow

1. Extract strings → i18n keys
2. Create base locale (en.json)
3. Send to translators
4. Import translations
5. Test all locales
6. Handle missing translations

Checklist

同仓库更多 Skills

同仓库

accessibility-audit

Sir-chawakorn/power-ranger-toolkit

WCAG compliance checking and accessibility improvements. Use for auditing websites, fixing a11y issues, and implementing inclusive design.

2026-01-1433

android-development

Sir-chawakorn/power-ranger-toolkit

Android development patterns for Kotlin/Java including MediaProjection, Accessibility Service, Socket.IO, and foreground services. Use when working on TitanMirror or other Android projects.

2026-01-1433

api-design

Sir-chawakorn/power-ranger-toolkit

Design RESTful APIs with proper routes, validation, error handling, and documentation. Use when building backend services for PSI Engine or other server applications.

2026-01-1433

browser-automation

Sir-chawakorn/power-ranger-toolkit

Automate browser interactions including form filling, clicking, typing, navigation, and screenshot capture. Use this skill when testing web apps, automating uploads, or validating UI on TikTok, YouTube, or other web platforms.

2026-01-1433

chrome-extension

Sir-chawakorn/power-ranger-toolkit

Build Chrome Extensions with Manifest V3, background service workers, content scripts, and message passing. Use when developing TikTok Uploader extension or any browser extensions.

2026-01-1433

ci-cd-pipeline

Sir-chawakorn/power-ranger-toolkit

Automated CI/CD pipeline setup with GitHub Actions, deployment strategies, and automation workflows. Use for build automation, testing, and deployment.

2026-01-1433

name	internationalization
description	i18n/l10n implementation for multi-language support. Use for translation setup, RTL support, and locale-aware formatting.

🌍 Internationalization (i18n) Skill

Setup

Next.js (next-intl)

npm install next-intl

// messages/en.json
{
  "home": {
    "title": "Welcome",
    "greeting": "Hello, {name}!"
  }
}

// messages/th.json
{
  "home": {
    "title": "ยินดีต้อนรับ",
    "greeting": "สวัสดี, {name}!"
  }
}

React (react-i18next)

npm install react-i18next i18next

import { useTranslation } from 'react-i18next';

function Welcome() {
  const { t } = useTranslation();
  return <h1>{t('home.title')}</h1>;
}

Translation Best Practices

Do's ✅

{
  "items_count": "{count, plural, one {# item} other {# items}}",
  "greeting": "Hello, {name}!",
  "date_format": "{date, date, medium}"
}

Don'ts ❌

// Don't concatenate strings
const message = t('hello') + ' ' + name;  // ❌

// Do use interpolation
const message = t('greeting', { name }); // ✅

Number & Date Formatting

// Numbers
new Intl.NumberFormat('th-TH', {
  style: 'currency',
  currency: 'THB'
}).format(1234.56);
// "฿1,234.56"

// Dates
new Intl.DateTimeFormat('th-TH', {
  dateStyle: 'long'
}).format(new Date());
// "15 มกราคม 2569"

// Relative time
new Intl.RelativeTimeFormat('th', { numeric: 'auto' })
  .format(-1, 'day');
// "เมื่อวาน"

RTL Support

/* Use logical properties */
.container {
  /* Instead of margin-left/right */
  margin-inline-start: 1rem;
  margin-inline-end: 2rem;
  
  /* Instead of padding-left/right */
  padding-inline: 1rem;
  
  /* Instead of text-align: left */
  text-align: start;
}

/* RTL-specific styles */
[dir="rtl"] .icon-arrow {
  transform: scaleX(-1);
}

<html lang="ar" dir="rtl">

Locale Detection

// Browser detection
const locale = navigator.language; // "th-TH"

// Accept-Language header
app.use((req, res, next) => {
  const locale = req.acceptsLanguages('th', 'en') || 'en';
  req.locale = locale;
  next();
});

Translation Workflow

1. Extract strings → i18n keys
2. Create base locale (en.json)
3. Send to translators
4. Import translations
5. Test all locales
6. Handle missing translations