Agent skill

Locale UI Patterns

by openchamber in openchamber/openchamber

A skill your agent uses when creating or modifying OpenChamber UI text, labels, buttons, placeholders, aria labels, empty states, toasts, dialogs, settings copy, navigation labels, or any…

MITAuto-check passedFrontend & Design

Install Locale UI Patterns

skills CLI
$ npx skills add openchamber/openchamber --skill locale-ui-patterns -a claude-code

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

GitHub CLI
$ gh skill install openchamber/openchamber locale-ui-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/openchamber/openchamber.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/locale-ui-patterns .claude/skills/locale-ui-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
locale-ui-patterns
GitHub stars
11k
Token cost
~1.5k tokens
SKILL.md length
690 words
Files
1
Skills in repo
20
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when creating or modifying OpenChamber UI text, labels, buttons, placeholders, aria labels, empty states, toasts, dialogs, settings copy, navigation labels, or any…

  • Works in 6 steps: Add or reuse a key in… → Add the same key — fully translated, not… → In components, call const { t } =… → …
  • Modifying OpenChamber UI text
  • SKILL.md covers Core Rule, What the text says, Translate everything… and Required Flow, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Locale UI Patterns is an agent skill from openchamber/openchamber. Use when creating or modifying OpenChamber UI text, labels, buttons, placeholders, aria labels, empty states, toasts, dialogs, settings copy, navigation labels, or any user-facing strings.

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Internationalization and Accessibility. The repository describes itself as: Agentic Development Environment based on OpenCode AI agent. The licence is MIT.

When your agent uses it

  • Modifying OpenChamber UI text
  • Navigation labels
  • Any user-facing strings

Example prompts

  • “/locale-ui-patterns”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Add or reuse a key in packages/ui/src/lib/i18n/messages/en.ts.
  2. Add the same key — fully translated, not the English text — to every non-English dictionary in packages/ui/src/lib/i18n/messages/.
  3. In components, call const { t } = useI18n() from @/lib/i18n and render t('key').
  4. For locale names or language picker labels, use label(locale) from useI18n().
  5. Keep locale state in packages/ui/src/lib/i18n/*; do not add locale fields to broad stores like useUIStore.
  6. Do not remount the app to update language. Components must re-render through useI18n().

What it can do on your machine

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

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    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).

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

  • Network

    No URLs in SKILL.md.

    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.

Context cost

Locale UI Patterns loads about 1.5k tokens when it runs. Until then it costs about 52 tokens; SKILL.md has 690 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~52
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k

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 openchamber/openchamber at commit eabe419, republished under its MIT licence (© openchamber). 690 words, ~1,501 tokens.

Download SKILL.mdSave it as .claude/skills/locale-ui-patterns/SKILL.md (or your agent's skills folder).
name
locale-ui-patterns
description
Use when creating or modifying OpenChamber UI text, labels, buttons, placeholders, aria labels, empty states, toasts, dialogs, settings copy, navigation labels, or any user-facing strings.

Locale UI Patterns

Core Rule

User-facing UI text must go through @/lib/i18n; do not hardcode English strings in components.

What the text says

UI text tells the person what they get and what to do: what an option gives them, what happened, what fixes it. Engineering reasons (layout jumps, races, what the code avoids) belong in code comments and commit messages. Example: "Shows the model's thinking as it arrives. When off, the block stays folded and opens with a click." An error names the known cause and the action ("reconnect the repository's account in Settings"), never a generic "something went wrong" when the cause is known; correcting such text is ordinary implementation work, not a product decision.

Translate everything immediately (no English placeholders)

Every key you add to a non-English dictionary MUST contain a real translation in that language — never the English source string as a stand-in. There is NO "leave it in English for now" convention in this project; if an agent told you there was, it was wrong. Copying the English value into es.ts/fr.ts/ko.ts/pl.ts/pt-BR.ts/uk.ts/zh-CN.ts/zh-TW.ts is a defect, not a deferral. The app ships every locale at once, so an untranslated key is a visible bug for those users.

If you genuinely cannot translate a language, say so explicitly to the user instead of silently pasting English. Do not invent a fallback policy.

Required Flow

  1. Add or reuse a key in packages/ui/src/lib/i18n/messages/en.ts.
  2. Add the same key — fully translated, not the English text — to every non-English dictionary in packages/ui/src/lib/i18n/messages/.
  3. In components, call const { t } = useI18n() from @/lib/i18n and render t('key').
  4. For locale names or language picker labels, use label(locale) from useI18n().
  5. Keep locale state in packages/ui/src/lib/i18n/*; do not add locale fields to broad stores like useUIStore.
  6. Do not remount the app to update language. Components must re-render through useI18n().

Component Usage Rules

  • Import from @/lib/i18n, not deep files.
  • Keep t(...) calls inside React render/hook scope so locale changes re-render text.
  • Do not resolve translated text at module scope.
  • For static option arrays, store labelKey / descriptionKey; resolve with t(...) inside the component.
  • For non-React helpers, pass translated strings in from the component or pass t explicitly.

Key Style

Use stable semantic keys, not English text as keys.

Keys should describe location + UI role + meaning. They should not encode current copy wording.

Use existing nearby naming when extending a surface. If no nearby pattern exists, choose a short path that mirrors the UI ownership.

Namespaces like layout.*, settings.*, chat.*, git.*, session.*, toast.*, and dialog.* are examples, not a fixed exhaustive list.

Good:

ts
'settings.appearance.language.label': 'Language'
'layout.mainTab.chat': 'Chat'
'chat.input.placeholder': 'Ask OpenChamber...'

Bad:

ts
'Language': 'Language'
'chatLabel': 'Chat'
'askOpenChamberDotDotDot': 'Ask OpenChamber...'

Avoid overly generic keys unless the text is truly global and context-independent. Prefer specific keys when button meaning can vary by surface.

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

Parameters

Use {name} placeholders for dynamic values.

ts
'toast.language.changed': 'Language changed to {language}'
tsx
t('toast.language.changed', { language: label(locale) })

Do not pass grammar fragments as params. Never use params like {suffix}, {plural}, {article}, {prefix}, {dateSuffix}, or pieces of words/sentences.

Bad:

tsx
t('dialog.delete.description', { count, suffix: count === 1 ? '' : 's' })

Good:

tsx
count === 1
  ? t('dialog.delete.descriptionSingle', { count })
  : t('dialog.delete.descriptionPlural', { count })

Plural/count-dependent text must use separate complete-message keys unless all supported locales can use one identical complete sentence. Placeholders are only for real values ({count}, {name}, {path}), not grammar.

Optional clauses must also be complete-message keys. Do not build a sentence by injecting a translated phrase into another translated sentence.

Bad:

tsx
t('dialog.delete.description', {
  dateLabel: date ? t('dialog.delete.dateSuffix', { date }) : '',
})

Good:

tsx
date
  ? t('dialog.delete.descriptionWithDate', { count, date })
  : t('dialog.delete.description', { count })

Desktop Native Menus

The Electron app menu and the right-click context menu are native, outside @/lib/i18n. Their labels live in packages/electron/menu-locales.mjs (MENU_LOCALE_DICTIONARIES, CONTEXT_MENU_LABEL_DICTIONARIES), keyed by the same locale codes as the UI. A new menu item gets its label in every locale there, and a new UI language gets its own entry there in the same change; menu-locales.test.mjs checks key parity.

Translation Boundary

Translate visible text, placeholders, tooltips, dialogs, toasts, empty/error/loading states, and user-facing aria-label, title, and alt text.

Keep these literal:

  • Product names: OpenChamber, OpenCode, GitHub
  • Protocol/tool acronyms: MCP, SSE, WebSocket, API
  • Model/provider names
  • File paths, command names, environment variables
  • User/generated content

Completion Criteria

  • No new hardcoded user-facing English in changed UI files.
  • Every new key exists in all dictionaries with a real translation, including packages/electron/menu-locales.mjs for native menu labels.
  • All translated values are resolved inside a reactive render/hook boundary.
  • No locale state added to broad/shared stores.
  • No full app remount for locale changes.
  • Locale switch preserves current UI state.

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

Files

Just SKILL.md in .agents/skills/locale-ui-patterns of openchamber/openchamber.

Open the folder on GitHubat commit eabe419

Compare with similar skills

Locale UI 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.

Locale UI Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Locale UI Patterns this skillopenchamber/openchamber11k—~1.5kAutomated safety check: PassMIT
Instui Docsinstructure/instructure-ui482—~498Automated safety check: PassCustom licence
Accessibility I18ndevcodex-labs/devcodex439—~718Automated safety check: PassAGPL-3.0
Wfa Avalonia UItautcony/ChapterTool113—~1.1kAutomated safety check: PassGPL-3.0
Dotnet UInovotnyllc/dotnet-artisan233—~1.3kAutomated safety check: PassMIT
Generated Media QAcalesthio/generative-media-skills191—~8kAutomated safety check: PassMIT

Similar skills

  • Instui Docs

    instructure/instructure-ui

    Look up authoritative Instructure UI (InstUI, @instructure/ui-) documentation — component APIs, props, theme variables, usage examples, and guides — by querying instructure.design's plaintext docs.

    482 GitHub stars~498 tokensUpdated today
    Frontend & DesignAuto-check passed
  • Accessibility I18n

    devcodex-labs/devcodex

    无障碍与国际化专家 Owner — 当任务涉及可访问性、键盘操作、焦点、屏幕阅读器、ARIA、语言地区、本地化、RTL、翻译资源、用户可见文案或多语言文档时使用;要求把包容性体验和本地化验证绑定到真实用户路径。

    439 GitHub stars~718 tokensUpdated 21 days ago
    Frontend & DesignAuto-check passed
  • Wfa Avalonia UI

    tautcony/ChapterTool

    Phase D of a WinForms-to-Avalonia migration: build the Avalonia UI shell with composition, MVVM state and commands, responsive XAML, accessibility, localization boundaries, and behavior-focused…

    113 GitHub stars~1.1k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Dotnet UI

    novotnyllc/dotnet-artisan

    Builds .NET UI apps across Blazor (Server, WASM, Hybrid, Auto), MAUI (XAML, MVVM, Shell, Native AOT), Uno Platform (MVUX, Extensions, Toolkit), WPF (.NET 8+, Fluent theme), WinUI 3 (Windows App SDK…

    233 GitHub stars~1.3k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Generated Media QA

    calesthio/generative-media-skills

    Provider-independent quality assurance for AI-generated and AI-assisted media.

    191 GitHub stars~8k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed
  • Theming Components

    ancoleman/ai-design-components

    Provides design token system and theming framework for consistent, customizable UI styling across all components.

    526 GitHub stars~2.3k tokensUpdated 10 mo ago
    Frontend & DesignAuto-check passed

More from openchamber/openchamber

All 20 skills in this repo
  • Theme System

    openchamber/openchamber

    A skill your agent uses when creating or modifying OpenChamber UI components, styling, colors, buttons, visual states, themes, or icons.

    11k GitHub stars~1.4k tokensUpdated today
    Auto-check passed
  • UI API Decoupling

    openchamber/openchamber

    A skill your agent uses when creating or modifying OpenChamber shared UI data access, OpenCode SDK calls, RuntimeAPIs, runtime fetch/auth/URLs, authenticated browser assets, bridges/proxies, runtime…

    11k GitHub stars~2k tokensUpdated today
    Auto-check passed
  • Drag To Reorder

    openchamber/openchamber

    A skill your agent uses when implementing or modifying OpenChamber sortable or drag-to-reorder behavior, especially @dnd-kit, touch/mobile interactions, variable-width items, or wrapping layouts.

    11k GitHub stars~1.8k tokensUpdated today
    Auto-check passed
  • Performance Engineering

    openchamber/openchamber

    A skill your agent uses when implementing or reviewing code on interaction, render, event, polling, synchronization, list-processing, store-selector, cache, indexing, or high-volume data paths; when…

    11k GitHub stars~4.9k tokensUpdated today
    Auto-check passed
  • Serve Sim

    openchamber/openchamber

    A skill your agent uses when working with the OpenChamber iOS Simulator app without opening Xcode - boot/install/launch the Capacitor iOS app, start a browser stream, tap/type/gesture/rotate…

    11k GitHub stars~619 tokensUpdated today
    Auto-check passed
  • Clack CLI Patterns

    openchamber/openchamber

    A skill your agent uses when creating or modifying OpenChamber CLI commands, prompts, terminal output, non-TTY behavior, --quiet, or --json behavior.

    11k GitHub stars~1.5k tokensUpdated today
    Auto-check passed

Questions about Locale UI Patterns

What does Locale UI Patterns do?

A skill your agent uses when creating or modifying OpenChamber UI text, labels, buttons, placeholders, aria labels, empty states, toasts, dialogs, settings copy, navigation labels, or any…. Locale UI Patterns is an agent skill from openchamber/openchamber. Use when creating or modifying OpenChamber UI text, labels, buttons, placeholders, aria labels, empty states, toasts, dialogs, settings copy, navigation labels, or any user-facing strings.

When should I use Locale UI Patterns?

Locale UI Patterns fits situations like: modifying OpenChamber UI text; navigation labels; any user-facing strings.

How do I install Locale UI Patterns in Claude Code?

Run `npx skills add openchamber/openchamber --skill locale-ui-patterns -a claude-code`. Or copy the skill folder (.agents/skills/locale-ui-patterns in openchamber/openchamber) into .claude/skills/locale-ui-patterns in your project. Claude Code loads it when a task matches its description.

How do I install Locale UI Patterns in Codex?

Run `npx skills add openchamber/openchamber --skill locale-ui-patterns -a codex`. Or copy the skill folder (.agents/skills/locale-ui-patterns in openchamber/openchamber) into .agents/skills/locale-ui-patterns in your project. Codex loads it when a task matches its description.

Can I use Locale UI 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 openchamber/openchamber --skill locale-ui-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/locale-ui-patterns, .gemini/skills/locale-ui-patterns, .github/skills/locale-ui-patterns and .opencode/skills/locale-ui-patterns in your project.

What does Locale UI Patterns need to run?

SKILL.md names no scripts, command-line tools or credentials: Locale UI Patterns is instructions for the agent only.

Does Locale UI Patterns access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Locale UI 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 Locale UI Patterns use?

Locale UI Patterns is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Locale UI Patterns use?

About 1.5k tokens (SKILL.md is roughly 6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Locale UI Patterns?

Skills that share tags, products or a category with Locale UI Patterns: Instui Docs (instructure/instructure-ui, 482 stars), Accessibility I18n (devcodex-labs/devcodex, 439 stars), Wfa Avalonia UI (tautcony/ChapterTool, 113 stars) and Dotnet UI (novotnyllc/dotnet-artisan, 233 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Locale UI Patterns?

openchamber (a GitHub organization) maintains it in openchamber/openchamber, which has 11,259 GitHub stars. The repository holds 20 skills in this directory. The repository was last updated on October 8, 2026.

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