Menu
i18n/l10n implementation for multi-language support. Use for translation setup, RTL support, and locale-aware formatting.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
WCAG compliance checking and accessibility improvements. Use for auditing websites, fixing a11y issues, and implementing inclusive design.
Android development patterns for Kotlin/Java including MediaProjection, Accessibility Service, Socket.IO, and foreground services. Use when working on TitanMirror or other Android projects.
Design RESTful APIs with proper routes, validation, error handling, and documentation. Use when building backend services for PSI Engine or other server applications.
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.
Build Chrome Extensions with Manifest V3, background service workers, content scripts, and message passing. Use when developing TikTok Uploader extension or any browser extensions.
Automated CI/CD pipeline setup with GitHub Actions, deployment strategies, and automation workflows. Use for build automation, testing, and deployment.
| name | internationalization |
| description | i18n/l10n implementation for multi-language support. Use for translation setup, RTL support, and locale-aware formatting. |
npm install next-intl
// messages/en.json
{
"home": {
"title": "Welcome",
"greeting": "Hello, {name}!"
}
}
// messages/th.json
{
"home": {
"title": "ยินดีต้อนรับ",
"greeting": "สวัสดี, {name}!"
}
}
npm install react-i18next i18next
import { useTranslation } from 'react-i18next';
function Welcome() {
const { t } = useTranslation();
return <h1>{t('home.title')}</h1>;
}
{
"items_count": "{count, plural, one {# item} other {# items}}",
"greeting": "Hello, {name}!",
"date_format": "{date, date, medium}"
}
// Don't concatenate strings
const message = t('hello') + ' ' + name; // ❌
// Do use interpolation
const message = t('greeting', { name }); // ✅
// 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');
// "เมื่อวาน"
/* 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">
// 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();
});
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