sdk: Skill for Claude Code

Waniwani Translation System

Automatically create and manage translations for pages and components using the Waniwani translation system.

📚 For real-world examples, see examples.md in this directory.

When to Use This Skill

Apply this skill when:

• Creating new pages or components with user-facing text
• Adding translations to existing pages
• Updating translation files
• Internationalizing hardcoded text
• The user mentions "translations", "translate", "i18n", "internationalization", or language support

Translation File Location

CRITICAL: Co-locate @translations.ts with page.tsx by default

src/app/(app)/settings/teams/
├── page.tsx              # The page component
├── @translations.ts      # Translations file (place HERE)
└── loading.tsx

Only use a different location if the user explicitly requests it.

Mandatory Requirements

🚨 ALL pages and components MUST support all 2 languages:

• English (en)
• French (fr)

No exceptions. TypeScript will enforce structural equality across all languages.

Translation File Structure

import { defineTranslations } from "@/lib/translations/types";

export const descriptiveName = defineTranslations({
  en: {
    // Static text - plain strings
    title: "Page Title",

    // Dynamic text - functions with object parameters
    greeting: ({ name }: { name: string }) => `Hello ${name}!`,

    // Nested structure for organization
    actions: {
      save: "Save",
      cancel: "Cancel",
    },
  },
  fr: {
    // Must match "en" structure exactly
    title: "Titre de la page",
    greeting: ({ name }: { name: string }) => `Bonjour ${name} !`,
    actions: {
      save: "Enregistrer",
      cancel: "Annuler",
    },
  },
});

See examples.md for comprehensive real-world examples.

Static vs Dynamic Content

Static text (never changes): Use plain strings

title: "Settings"

Dynamic text (includes variables): Use functions with object parameters

greeting: ({ name }: { name: string }) => `Hello ${name}!`