Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

internationalization

Sterne33

Forks5

Aktualisiert14. Januar 2026 um 18:55

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

Installation

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

Sir-chawakorn

Sir-chawakorn/power-ranger-toolkit

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

WebentwicklerInformatik- und Mathematikberufe·SOC 15-1254

SKILL.md

readonly

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

Checklist

Mehr aus diesem Repository

gleiches Repository

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