This Claude skill provides a comprehensive framework for managing internationalization (i18n) within the TSH Clients Console, specifically optimized for English and Arabic (RTL) support. It streamlines the workflow for adding translation keys, implementing direction-aware UI components, and managing localized SEO metadata using next-intl, ensuring a seamless multilingual user experience.

When should I use tsh-i18n?

tsh-i18n is useful in the following scenarios: • Adding and synchronizing new UI text strings across English (en.json) and Arabic (ar.json) translation files to maintain feature parity. • Implementing RTL (Right-to-Left) layout patterns using logical CSS properties and directional icon flipping for Arabic-speaking users. • Generating localized SEO metadata for dynamic pages to improve search engine rankings across different geographic regions. • Developing and debugging i18n-compliant React components for both Client and Server-side rendering environments. • Standardizing common UI labels (like 'Loading', 'Error', 'Retry') across multiple namespaces to ensure consistent terminology.

name	tsh-i18n
description	\|

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

{
  "namespace": {
    "keyName": "English text",
    "greeting": "Hello, {name}!",
    "count": "You have {count} items"
  }
}

Step 2: Add to ar.json

{
  "namespace": {
    "keyName": "النص العربي",
    "greeting": "مرحباً، {name}!",
    "count": "لديك {count} عناصر"
  }
}

Using Translations

Client Components

'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

import { getTranslations } from 'next-intl/server';

export default async function Page() {
  const t = await getTranslations('namespace');
  return <h1>{t('keyName')}</h1>;
}

Metadata (SEO)

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)

<!-- 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

<!-- 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

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:

{
  "namespace": {
    "title": "Page Title",
    "loading": "Loading...",
    "error": "An error occurred",
    "empty": "No items found",
    "retry": "Try again"
  }
}

Products Namespace Reference

{
  "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:

{
  "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 useTranslations in client components
Use getTranslations in server components
Add generateMetadata for SEO
Test RTL layout in Arabic
Use logical properties (ms-, me-, ps-, pe-)
Flip directional icons with rtl:rotate-180

tsh-i18n

When & Why to Use This Skill

Use Cases