Agent skill

I18n Date Patterns

by yonatangross in yonatangross/orchestkit

Implements internationalization (i18n) in React applications.

MITAuto-check passedFrontend & Design

Install I18n Date Patterns

skills CLI
$ npx skills add yonatangross/orchestkit --skill i18n-date-patterns -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install yonatangross/orchestkit i18n-date-patterns --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/yonatangross/orchestkit.git skills-src && mkdir -p .claude/skills && cp -r skills-src/src/skills/i18n-date-patterns .claude/skills/i18n-date-patterns && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
i18n-date-patterns
GitHub stars
290
Token cost
~2.6k tokens
SKILL.md length
716 words
Files
11 (incl. references)
Skills in repo
108
Repo updated
First seen
Licence
MIT

At a glance

Implements internationalization (i18n) in React applications.

  • Works in 5 steps: useTranslation Hook (All UI Strings) → useFormatting Hook (Locale-Aware Data) → Date Formatting → …
  • Building multilingual UIs
  • SKILL.md covers Overview, Core Patterns, Upstream coverage (do not… and Translation File Structure, plus 7 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

I18n Date Patterns is an agent skill from yonatangross/orchestkit. Implements internationalization (i18n) in React applications. Covers user-facing strings, date/time handling, locale-aware formatting, ICU MessageFormat, and RTL support. Use when building multilingual UIs or formatting dates/currency.

Its SKILL.md is about 2.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 14 other files, including reference files (for example `checklists/i18n-checklist.md`, `examples/component-i18n-example.md` and `references/formatting-utilities.md`). Compatibility notes: Claude Code 2.1.277+.

It sits in Frontend & Design, covering Internationalization. It works with React. The repository describes itself as: The Complete AI Development Toolkit for Claude Code. 106 skills, 36 agents, 171 hooks. Install ork for stable (v9.x), or ork-alpha for the v10 line, which ships daily. The licence is MIT.

When your agent uses it

  • Building multilingual UIs
  • Formatting dates/currency

Example prompts

  • “Use the i18n-date-patterns skill to implement internationalization (i18n) in React applications”
  • “/i18n-date-patterns”

Requirements

  • Compatibility (from SKILL.md): Claude Code 2.1.277+.
  • Pre-approved tools (allowed-tools): Read, Glob, Grep, WebFetch, WebSearch

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. useTranslation Hook (All UI Strings)
  2. useFormatting Hook (Locale-Aware Data)
  3. Date Formatting
  4. ICU MessageFormat (Complex Plurals)
  5. Trans Component (Rich Text)

What it can do on your machine

Read from SKILL.md and the folder at commit 02bbf9a. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Glob
    • Grep
    • WebFetch
    • WebSearch

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript and json).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • unicode-org.github.io
    • developer.mozilla.org
    • formatjs.github.io
    • cldr.unicode.org
    • react.i18next.com
    • github.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Claude Code 2.1.277+.

    From compatibility in the SKILL.md frontmatter.

Context cost

I18n Date Patterns loads about 2.6k tokens when it runs, and up to ~4.8k if it reads all its reference files. Until then it costs about 64 tokens; SKILL.md has 716 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~64
When it runs · the whole SKILL.md, loaded when a task matches
~2.6k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~4.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from yonatangross/orchestkit at commit 02bbf9a, republished under its MIT licence (© yonatangross). 716 words, ~2,596 tokens.

Download SKILL.mdSave it as .claude/skills/i18n-date-patterns/SKILL.md (or your agent's skills folder). This skill also uses 10 other files; get the full folder from GitHub.
name
i18n-date-patterns
description
Implements internationalization (i18n) in React applications. Covers user-facing strings, date/time handling, locale-aware formatting, ICU MessageFormat, and RTL support. Use when building multilingual UIs or formatting dates/currency.
allowed-tools
Read, Glob, Grep, WebFetch, WebSearch
compatibility
Claude Code 2.1.277+.
license
MIT
context
inherit
user-invocable
false
disable-model-invocation
true
effort
low
model
haiku
metadata.category
document-asset-creation
metadata.version
1.2.0
metadata.author
Yonatan Gross
metadata.complexity
low

i18n and Localization Patterns

Overview

This skill provides comprehensive guidance for implementing internationalization in React applications. It ensures ALL user-facing strings, date displays, currency, lists, and time calculations are locale-aware.

When to use this skill:

  • Adding ANY user-facing text to components
  • Formatting dates, times, currency, lists, or ordinals
  • Implementing complex pluralization
  • Embedding React components in translated text
  • Supporting RTL languages (Hebrew, Arabic)

Bundled Resources (load with Read("<path>")):

  • references/formatting-utilities.md - useFormatting hook API reference
  • references/ork-delta.md - House decisions and working config that upstream docs do not carry
  • checklists/i18n-checklist.md - Implementation and review checklist
  • examples/component-i18n-example.md - Complete component example

Canonical Reference: See docs/i18n-standards.md for the full i18n standards document.


Core Patterns

1. useTranslation Hook (All UI Strings)

Every visible string MUST use the translation function:

tsx
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation(['patients', 'common']);
  
  return (
    <div>
      <h1>{t('patients:title')}</h1>
      <button>{t('common:actions.save')}</button>
    </div>
  );
}
2. useFormatting Hook (Locale-Aware Data)

All locale-sensitive formatting MUST use the centralized hook:

tsx
import { useFormatting } from '@/hooks';

function PriceDisplay({ amount, items }) {
  const { formatILS, formatList, formatOrdinal } = useFormatting();
  
  return (
    <div>
      <p>Price: {formatILS(amount)}</p>        {/* ₪1,500.00 */}
      <p>Items: {formatList(items)}</p>        {/* "a, b, and c" */}
      <p>Position: {formatOrdinal(3)}</p>      {/* "3rd" */}
    </div>
  );
}

Load Read("references/formatting-utilities.md") for the complete API.

3. Date Formatting

All dates MUST use the centralized @/lib/dates library:

tsx
import { formatDate, formatDateShort, calculateWaitTime } from '@/lib/dates';

const date = formatDate(appointment.date);    // "Jan 6, 2026"
const waitTime = calculateWaitTime('09:30');  // "15 min"
4. ICU MessageFormat (Complex Plurals)

Use ICU syntax in translation files for pluralization:

json
{
  "patients": "{count, plural, =0 {No patients} one {# patient} other {# patients}}"
}
tsx
t('patients', { count: 5 })  // → "5 patients"

House rules for plurals live in rules/i18n-icu-plurals.md. For the full ICU grammar see the upstream table below.

5. Trans Component (Rich Text)

For embedded React components in translated text:

tsx
import { Trans } from 'react-i18next';

<Trans
  i18nKey="richText.welcome"
  values={{ name: userName }}
  components={{ strong: <strong /> }}
/>

House rules for <Trans> live in rules/i18n-trans-component.md; the plural-plus-rich-text ordering constraint lives in references/ork-delta.md. For the full component API see the upstream table below.


Upstream coverage (do not restate)

These topics are owned by first-party docs. Read them there instead of re-deriving them here.

TopicFirst-party sourceHouse subset kept here
ICU plural, select, selectordinal, offset and nested message grammarhttps://formatjs.github.io/docs/core-concepts/icu-syntax/ and https://unicode-org.github.io/icu/userguide/format_parse/messages/rules/i18n-icu-plurals.md keeps the house subset in full: no ternary pluralization, the mandatory other arm, =0 for zero states, Hebrew dual and Arabic categories
Which plural categories a given locale actually hashttps://cldr.unicode.org/index/cldr-spec/plural-rulesnone, read upstream
ICU number skeletons inside a message (::currency/ILS)https://unicode-org.github.io/icu/userguide/format_parse/numbers/skeletons.htmlreferences/ork-delta.md keeps only the ILS skeleton decision
In-message date and time forms ({date, date, medium}) and offset: pluralshttps://unicode-org.github.io/icu/userguide/format_parse/messages/nothing; fetch it upstream
<Trans> API: named vs indexed tags, self-closing tags, TransProps typinghttps://react.i18next.com/latest/trans-componentrules/i18n-trans-component.md keeps the house subset in full: never split a sentence across t() calls, never dangerouslySetInnerHTML, prefer named tags over indexed
Wiring the ICU parser into i18nexthttps://github.com/i18next/i18next-icureferences/ork-delta.md keeps the decision and why suffix keys are not enough
Intl.ListFormat primitive behind useFormattinghttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormatreferences/formatting-utilities.md keeps the house hook API
Intl.NumberFormat primitive behind useFormattinghttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormatreferences/formatting-utilities.md keeps the house hook API

Translation File Structure

frontend/src/i18n/locales/
├── en/
│   ├── common.json      # Shared: actions, status, time
│   ├── patients.json    # Patient-related strings
│   ├── dashboard.json   # Dashboard strings
│   ├── owner.json       # Owner portal strings
│   └── invoices.json    # Invoice strings
└── he/
    └── (same structure)

Anti-Patterns (FORBIDDEN)

typescript
// ❌ NEVER hardcode strings
<h1>מטופלים</h1>                    // Use t('patients:title')
<button>Save</button>               // Use t('common:actions.save')

// ❌ NEVER use .join() for lists
items.join(', ')                    // Use formatList(items)

// ❌ NEVER hardcode currency
"₪" + price                         // Use formatILS(price)

// ❌ NEVER use new Date() for formatting
new Date().toLocaleDateString()     // Use formatDate() from @/lib/dates

// ❌ NEVER use inline plural logic
count === 1 ? 'item' : 'items'      // Use ICU MessageFormat

// ❌ NEVER leave console.log in production
console.log('debug')                // Remove before commit

// ❌ NEVER use dangerouslySetInnerHTML for i18n
dangerouslySetInnerHTML             // Use <Trans> component

Quick Reference

NeedSolution
UI textt('namespace:key') from useTranslation
CurrencyformatILS(amount) from useFormatting
ListsformatList(items) from useFormatting
OrdinalsformatOrdinal(n) from useFormatting
DatesformatDate(date) from @/lib/dates
PluralsICU MessageFormat in translation files
Rich text<Trans> component
RTL checkisRTL from useFormatting

Show full SKILL.md (279 more words)Show less

Checklist

Load Read("checklists/i18n-checklist.md") for complete implementation and review checklists.


Integration with Agents

Frontend UI Developer
  • Uses all i18n patterns for components
  • References this skill for formatting
  • Ensures no hardcoded strings
Code Quality Reviewer
  • Checks for anti-patterns (.join(), console.log, etc.)
  • Validates translation key coverage
  • Ensures RTL compatibility

Skill Version: 1.2.0 Last Updated: 2026-01-06 Maintained by: Yonatan Gross

  • ork:testing-e2e - E2E testing patterns including accessibility testing for i18n
  • ork:react-server-components-framework - Server-side locale detection and RSC i18n patterns
  • ork:accessibility - RTL-aware focus management for bidirectional UI navigation

Key Decisions

DecisionChoiceRationale
Translation Libraryreact-i18nextReact-native hooks, namespace support, ICU format
Date LibrarydayjsLightweight, locale plugins, immutable API
Message FormatICU MessageFormatIndustry standard, complex plural/select support
Locale StoragePer-namespace JSONCode-splitting, lazy loading per feature
RTL DetectionCSS logical propertiesNative browser support, no JS overhead

Capability Details

translation-hooks

Keywords: useTranslation, t(), i18n hook, translation hook Solves:

  • Translate UI strings with useTranslation
  • Implement namespaced translations
  • Handle missing translation keys
formatting-hooks

Keywords: useFormatting, formatCurrency, formatList, formatOrdinal Solves:

  • Format currency values with locale
  • Format lists with proper separators
  • Handle ordinal numbers across locales
icu-messageformat

Keywords: ICU, MessageFormat, plural, pluralization Solves:

  • Apply the house Hebrew plural-category decision (see references/ork-delta.md)
  • ICU select, gender forms and nested message grammar are routed upstream (see Upstream coverage)
  • Build complex message patterns
date-time-formatting

Keywords: date format, time format, dayjs, locale date, calendar Solves:

  • Format dates with dayjs and locale
  • Handle timezone-aware formatting
  • Build calendar components with i18n
rtl-support

Keywords: RTL, right-to-left, hebrew, arabic, direction Solves:

  • Support RTL languages like Hebrew
  • Handle bidirectional text
  • Configure RTL-aware layouts
trans-component

Keywords: Trans, rich text, embedded JSX, interpolation Solves:

  • Embed React components in translations
  • Handle rich text formatting
  • Implement safe HTML in translations

© yonatangross, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 10 other files (references) in src/skills/i18n-date-patterns of yonatangross/orchestkit.

  • SKILL.md
  • checklists/i18n-checklist.md
  • examples/component-i18n-example.md
  • references/formatting-utilities.md
  • references/ork-delta.md
  • rules/_sections.md
  • rules/_template.md
  • rules/i18n-formatting-antipatterns.md
  • rules/i18n-icu-plurals.md
  • rules/i18n-trans-component.md
  • test-cases.json

Open the folder on GitHubat commit 02bbf9a

Compare with similar skills

I18n Date Patterns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

I18n Date Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
I18n Date Patterns this skillyonatangross/orchestkit290—~2.6kAutomated safety check: PassMIT
Taro UI Guidejd-opensource/taro-ui4.7k—~1.3kAutomated safety check: PassMIT
Frontend I18nlangflow-ai/langflow155k—~1kAutomated safety check: PassMIT
Localization Toolkitzebbern/claude-code-guide4.7k1 repos~1.3kAutomated safety check: PassMIT
Readme I18nY80/bmm3442 repos~1.9kAutomated safety check: PassMIT
Building With Lobe UIlobehub/lobe-ui2.2k—~2kAutomated safety check: PassMIT

Similar skills

  • Taro UI Guide

    jd-opensource/taro-ui

    Guides installing, configuring, styling and using taro-ui (At* components) in Taro apps for WeChat, Alipay, H5 and React Native.

    4.7k GitHub stars~1.3k tokensUpdated 14 days ago
    Frontend & DesignAuto-check passed
  • Frontend I18n

    langflow-ai/langflow

    Add, change, or review user-facing text in the Langflow frontend using the i18n system (i18next / react-i18next).

    155k GitHub stars~1k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Localization Toolkit

    zebbern/claude-code-guide

    This skill should be used when setting up, auditing, or enforcing internationalization/localization in UI codebases (React/TS, i18next or similar, JSON locales), including installing/configuring the…

    4.7k GitHub starsUsed in 1 repo~1.3k tokens
    Frontend & DesignAuto-check passed
  • A skill your agent uses when the user wants to translate a repository README, make a repo multilingual, localize docs, add a language switcher, internationalize the README, or update localized…

    344 GitHub starsUsed in 2 repos~1.9k tokens
    Frontend & DesignAuto-check passed
  • Building With Lobe UI

    lobehub/lobe-ui

    Build UI with the LobeHub design ecosystem — @lobehub/ui (plus its base-ui, chat, mobile, awesome, brand, mdx, i18n namespaces), @lobehub/icons, @lobehub/charts, @lobehub/fluent-emoji and…

    2.2k GitHub stars~2k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Frontend Build Timing Audit

    openops-cloud/openops

    Detects and diagnoses chunk-evaluation timing bugs in the Vite/rolldown production build of react-ui (works-in-dev / broken-in-build i18n regressions, missing UI labels, module-scope t()…

    1.1k GitHub stars~2.3k tokensUpdated today
    Frontend & DesignAuto-check passed

More from yonatangross/orchestkit

All 108 skills in this repo
  • API Design

    yonatangross/orchestkit

    API contract design for REST and GraphQL, covering resource shape, URL and header versioning with deprecation windows, RFC 9457 Problem Details error handling, and OpenAPI specs.

    290 GitHub stars~2.9k tokensUpdated today
    Auto-check passed
  • Architecture Decision Record

    yonatangross/orchestkit

    ADR templates in the Nygard format with context, decision, consequences, and alternatives.

    290 GitHub stars~2k tokensUpdated today
    Auto-check passed
  • Audit Full

    yonatangross/orchestkit

    Single-pass codebase analysis leveraging a 1M-token context window for comprehensive security scanning, architecture review, and dependency auditing.

    290 GitHub stars~3.5k tokensUpdated today
    Auto-check: notes
  • Code Review Playbook

    yonatangross/orchestkit

    Structured review processes, conventional comments, language-specific checklists, and feedback templates.

    290 GitHub stars~2.2k tokensUpdated today
    Auto-check passed
  • Create PR

    yonatangross/orchestkit

    Creates GitHub pull requests with pre-flight validation, conventional title formatting, and structured summary generation.

    290 GitHub stars~4.5k tokensUpdated today
    Auto-check: notes
  • Explore

    yonatangross/orchestkit

    Multi-angle codebase exploration spawning 3-5 parallel agents for code structure, data flow, architecture patterns, and health assessment.

    290 GitHub stars~3.9k tokensUpdated today
    Auto-check: notes

Works with

Questions about I18n Date Patterns

What does I18n Date Patterns do?

Implements internationalization (i18n) in React applications. I18n Date Patterns is an agent skill from yonatangross/orchestkit. Implements internationalization (i18n) in React applications.

When should I use I18n Date Patterns?

I18n Date Patterns fits situations like: building multilingual UIs; formatting dates/currency.

How do I install I18n Date Patterns in Claude Code?

Run `npx skills add yonatangross/orchestkit --skill i18n-date-patterns -a claude-code`. Or copy the skill folder (src/skills/i18n-date-patterns in yonatangross/orchestkit) into .claude/skills/i18n-date-patterns in your project. Claude Code loads it when a task matches its description.

How do I install I18n Date Patterns in Codex?

Run `npx skills add yonatangross/orchestkit --skill i18n-date-patterns -a codex`. Or copy the skill folder (src/skills/i18n-date-patterns in yonatangross/orchestkit) into .agents/skills/i18n-date-patterns in your project. Codex loads it when a task matches its description.

Can I use I18n Date Patterns in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add yonatangross/orchestkit --skill i18n-date-patterns -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/i18n-date-patterns, .gemini/skills/i18n-date-patterns, .github/skills/i18n-date-patterns and .opencode/skills/i18n-date-patterns in your project.

What does I18n Date Patterns need to run?

SKILL.md names no scripts, command-line tools or credentials: I18n Date Patterns is instructions for the agent only. Its frontmatter pre-approves these tools: Read, Glob, Grep, WebFetch, WebSearch. Compatibility (from SKILL.md): Claude Code 2.1.277+..

Does I18n Date Patterns access the network?

SKILL.md names 6 domains. As links in the text: unicode-org.github.io, developer.mozilla.org, formatjs.github.io, cldr.unicode.org, react.i18next.com and github.com. This is read from the text; nothing was executed.

Is I18n Date Patterns safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does I18n Date Patterns use?

I18n Date Patterns is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does I18n Date Patterns use?

About 2.6k tokens (SKILL.md is roughly 10k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.2k tokens, read only when the agent opens those files.

What are the alternatives to I18n Date Patterns?

Skills that share tags, products or a category with I18n Date Patterns: Taro UI Guide (jd-opensource/taro-ui, 4.7k stars), Frontend I18n (langflow-ai/langflow, 155k stars), Localization Toolkit (zebbern/claude-code-guide, 4.7k stars) and Readme I18n (Y80/bmm, 344 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains I18n Date Patterns?

yonatangross (a GitHub user) maintains it in yonatangross/orchestkit, which has 290 GitHub stars. The repository holds 108 skills in this directory. The repository was last updated on October 9, 2026.

Source: yonatangross/orchestkit on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.