Agent skill
tsh-i18n
Internationalization for TSH Clients Console (English/Arabic with RTL). Use when: (1) Adding new text strings that need translation (2) Creating components with user-facing text (3) Working with RTL layout for Arabic (4) Setting up new pages with proper i18n (5) Debugging translation issues (6) Adding metadata translations for SEO
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/tsh-i18n
SKILL.md
TSH Internationalization (i18n)
File Locations
| File | Purpose |
|---|---|
src/messages/en.json |
English translations |
src/messages/ar.json |
Arabic translations |
src/i18n/request.ts |
i18n config |
src/i18n/routing.ts |
Locale routing |
Adding Translations
Step 1: Add to en.json
json
{
"namespace": {
"keyName": "English text",
"greeting": "Hello, {name}!",
"count": "You have {count} items"
}
}
Step 2: Add to ar.json
json
{
"namespace": {
"keyName": "النص العربي",
"greeting": "مرحباً، {name}!",
"count": "لديك {count} عناصر"
}
}
Using Translations
Client Components
typescript
'use client';
import { useTranslations } from 'next-intl';
export function MyComponent() {
const t = useTranslations('namespace');
return (
<div>
<h1>{t('keyName')}</h1>
<p>{t('greeting', { name: 'Ahmed' })}</p>
<p>{t('count', { count: 5 })}</p>
</div>
);
}
Server Components
typescript
import { getTranslations } from 'next-intl/server';
export default async function Page() {
const t = await getTranslations('namespace');
return <h1>{t('keyName')}</h1>;
}
Metadata (SEO)
typescript
import { getTranslations } from 'next-intl/server';
export async function generateMetadata({ params: { locale } }) {
const t = await getTranslations({ locale, namespace: 'pageName' });
return {
title: t('title'),
description: t('description'),
};
}
RTL Layout Patterns
Direction-Aware Spacing (Use These)
html
<!-- Logical properties that flip in RTL -->
<div className="ms-4"> <!-- margin-start -->
<div className="me-4"> <!-- margin-end -->
<div className="ps-4"> <!-- padding-start -->
<div className="pe-4"> <!-- padding-end -->
<div className="text-start"> <!-- text-align: start -->
<div className="text-end"> <!-- text-align: end -->
Flip Elements in RTL
html
<!-- Flip icons -->
<ChevronRight className="h-4 w-4 rtl:rotate-180" />
<!-- Reverse flex -->
<div className="flex rtl:flex-row-reverse">
<!-- Reverse spacing -->
<div className="flex space-x-4 rtl:space-x-reverse">
Get Current Direction
typescript
import { useLocale } from 'next-intl';
function Component() {
const locale = useLocale();
const isRTL = locale === 'ar';
return <div dir={isRTL ? 'rtl' : 'ltr'}>...</div>;
}
Common Translation Namespaces
| Namespace | Purpose |
|---|---|
common |
Shared strings (buttons, actions) |
navigation |
Menu items, nav links |
products |
Product-related text |
orders |
Order-related text |
auth |
Login, authentication |
dashboard |
Dashboard labels |
errors |
Error messages |
Standard Keys
Always include these in new namespaces:
json
{
"namespace": {
"title": "Page Title",
"loading": "Loading...",
"error": "An error occurred",
"empty": "No items found",
"retry": "Try again"
}
}
Products Namespace Reference
json
{
"products": {
"title": "Products",
"search": "Search products",
"inStock": "In Stock",
"outOfStock": "Out of Stock",
"lowStock": "Only {count} left",
"contactForPrice": "Contact for price",
"addToCart": "Add to Cart",
"viewDetails": "View Details"
}
}
Arabic:
json
{
"products": {
"title": "المنتجات",
"search": "البحث عن منتجات",
"inStock": "متوفر",
"outOfStock": "غير متوفر",
"lowStock": "متبقي {count} فقط",
"contactForPrice": "اتصل للسعر",
"addToCart": "أضف إلى السلة",
"viewDetails": "عرض التفاصيل"
}
}
Checklist for New Pages
- Add page namespace to en.json
- Add page namespace to ar.json
- Use
useTranslationsin client components - Use
getTranslationsin server components - Add
generateMetadatafor SEO - Test RTL layout in Arabic
- Use logical properties (ms-, me-, ps-, pe-)
- Flip directional icons with
rtl:rotate-180
Didn't find tool you were looking for?