Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
Design for multiple languages, writing directions, and cultural contexts — text expansion, RTL mirroring, and locale formats.
Install Localization Design
$ npx skills add Owl-Listener/designer-skills --skill localization-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Owl-Listener/designer-skills localization-design --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Owl-Listener/designer-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/design-systems/skills/localization-design .claude/skills/localization-design && rm -rf skills-srcUse ~/.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/
Install the "localization-design" agent skill from https://github.com/Owl-Listener/designer-skills/tree/main/design-systems/skills/localization-design into .claude/skills/localization-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "localization-design", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Owl-Listener/designer-skills/tree/main/design-systems/skills/localization-designType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Owl-Listener/designer-skills --skill localization-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Owl-Listener/designer-skills localization-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Owl-Listener/designer-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/design-systems/skills/localization-design .agents/skills/localization-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "localization-design" agent skill from https://github.com/Owl-Listener/designer-skills/tree/main/design-systems/skills/localization-design into .agents/skills/localization-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "localization-design", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Owl-Listener/designer-skills --skill localization-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Owl-Listener/designer-skills localization-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Owl-Listener/designer-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/design-systems/skills/localization-design .cursor/skills/localization-design && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "localization-design" agent skill from https://github.com/Owl-Listener/designer-skills/tree/main/design-systems/skills/localization-design into .cursor/skills/localization-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "localization-design", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Owl-Listener/designer-skills.git --path design-systems/skills/localization-design--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Owl-Listener/designer-skills --skill localization-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Owl-Listener/designer-skills localization-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Owl-Listener/designer-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/design-systems/skills/localization-design .gemini/skills/localization-design && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "localization-design" agent skill from https://github.com/Owl-Listener/designer-skills/tree/main/design-systems/skills/localization-design into .gemini/skills/localization-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "localization-design", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Owl-Listener/designer-skills localization-designInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Owl-Listener/designer-skills --skill localization-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Owl-Listener/designer-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/design-systems/skills/localization-design .github/skills/localization-design && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "localization-design" agent skill from https://github.com/Owl-Listener/designer-skills/tree/main/design-systems/skills/localization-design into .github/skills/localization-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "localization-design", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Owl-Listener/designer-skills --skill localization-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Owl-Listener/designer-skills localization-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Owl-Listener/designer-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/design-systems/skills/localization-design .opencode/skills/localization-design && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "localization-design" agent skill from https://github.com/Owl-Listener/designer-skills/tree/main/design-systems/skills/localization-design into .opencode/skills/localization-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "localization-design", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
localization-design- GitHub stars
- 2.9k
- Used in
- 1 other repo
- Token cost
- ~1.3k tokens
- SKILL.md length
- 638 words
- Files
- 1
- Skills in repo
- 107
- Repo updated
- First seen
- Licence
- MIT
At a glance
Design for multiple languages, writing directions, and cultural contexts — text expansion, RTL mirroring, and locale formats.
- Shipping beyond one locale
- SKILL.md covers What You Do, Text Expansion, RTL (Right-to-Left) Support and Typography for Non-Latin Scripts, plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- Tasks that involve Internationalization
What it does
Localization Design is an agent skill from Owl-Listener/designer-skills. Design for multiple languages, writing directions, and cultural contexts — text expansion, RTL mirroring, and locale formats. Use when shipping beyond one locale. For the words themselves, use ux-writing (designer-toolkit).
Its SKILL.md is about 1.3k 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. The repository describes itself as: Designer Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery. The licence is MIT.
When your agent uses it
- Shipping beyond one locale
- Tasks that involve Internationalization
Example prompts
- “/localization-design”
What it can do on your machine
Read from SKILL.md and the folder at commit 9a6930c. 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.
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
Localization Design loads about 1.3k tokens when it runs. Until then it costs about 61 tokens; SKILL.md has 638 words of instructions outside code blocks.
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 Owl-Listener/designer-skills at commit 9a6930c, republished under its MIT licence (© Owl-Listener). 638 words, ~1,319 tokens.
Download SKILL.mdSave it as
.claude/skills/localization-design/SKILL.md (or your agent's skills folder).- name
- localization-design
- description
- Design for multiple languages, writing directions, and cultural contexts — text expansion, RTL mirroring, and locale formats. Use when shipping beyond one locale. For the words themselves, use `ux-writing` (designer-toolkit).
Localization Design
You are an expert in designing UI that works across languages, scripts, and cultures without requiring per-locale redesigns.
What You Do
You apply localization-aware design principles to ensure components, layouts, and content can be adapted to any target locale without breaking — and that cultural differences in color, iconography, and conventions are accounted for.
Text Expansion
The most common localization failure. English is compact; most target languages are longer:
| Language | Typical expansion vs English |
|---|---|
| German | +20–35% |
| French | +15–25% |
| Finnish | +30–40% |
| Arabic (translated) | −20–30% (but RTL and different script) |
| Japanese/Chinese | Often shorter, but very different typographic rules |
| Design for text expansion: |
- Never size containers to fit English copy — use flexible heights and widths
- Test layouts with German or Finnish translations as worst-case proxies before other locales exist
- Truncation with ellipsis is an acceptable last resort, but provide full text via tooltip/expand
- Buttons: use min-width, not fixed width; allow wrapping for extreme cases in narrow contexts
- Navigation labels: test all nav items together at 130% length to validate menu doesn't break
RTL (Right-to-Left) Support
Arabic, Hebrew, Persian, and Urdu read right-to-left. The entire layout mirrors:
- Content flow: text, lists, and reading order reverse
- Layout mirroring: sidebars, navigation, and content areas flip; left margin becomes right margin
- Icon mirroring: directional icons (arrows, chevrons, back button) mirror; non-directional icons (camera, settings) do not
- CSS logical properties: use
margin-inline-startinstead ofmargin-left;padding-block-endinstead ofpadding-bottom— these flip automatically withdir="rtl" - Text alignment: use
text-align: startnottext-align: left - Numbers: numerals remain LTR within RTL text in most contexts; don't mirror number displays What does not mirror in RTL:
- Logos and brand marks
- Clocks and time displays
- Mathematical notation
- Images and illustrations (usually — context-dependent)
- Video player controls (debated; mirror directional but not play/pause)
Typography for Non-Latin Scripts
- Arabic and Hebrew: cursive scripts with letter-joining rules; larger minimum font sizes (16px+) for readability
- CJK (Chinese, Japanese, Korean): square characters; different optimal line-height and letter-spacing than Latin; different measure rules
- Devanagari (Hindi) and other Indic scripts: complex ligatures; test with font stacks that include proper fallbacks
- Never fake-bold or fake-italic non-Latin scripts — use genuine weights from the font family
Cultural Considerations
Show full SKILL.md (283 more words)Show less
Color
Color meaning varies significantly by culture:
| Color | Western association | Example alternative association |
|---|---|---|
| Red | Danger, error | Luck/prosperity (China), mourning (South Africa) |
| White | Clean, minimal | Mourning (many East Asian cultures) |
| Green | Success, go | Unfaithfulness (China), danger (some Middle Eastern contexts) |
- Don't rely on color alone for semantic meaning (this is also an accessibility requirement)
- Test color choices with cultural consultants for high-stakes or global products
Iconography
- Hand gestures (thumbs up, OK sign) have offensive meanings in some cultures — avoid
- Postal and civic icons (mailbox, house, phone) vary by region — use abstract or universally-recognizable forms
- Religious and food symbolism is culturally loaded — avoid unless necessary and tested
Date, Time, and Number Formats
- Date formats vary: MM/DD/YYYY (US), DD/MM/YYYY (UK/EU), YYYY-MM-DD (ISO)
- Use locale-aware formatting via
Intl.DateTimeFormat/ equivalent - Currency: symbol position, decimal separator, thousands separator all vary
- Addresses: field order, required fields, and format vary significantly — use a locale-aware address form library
Design System Implications
- All spacing, sizing, and layout should use logical CSS properties
- Text containers must be flexible-height and flexible-width
- Design token names should be semantic, not directional ("start" not "left")
- Components should be tested with at least one RTL locale and one long-expansion locale before being added to the system
- Provide localization guidance in component documentation: "This component has been tested with Arabic (RTL) and German (text expansion)"
Best Practices
- Design with localization in mind from day one — retrofitting RTL support into a left-biased layout is expensive
- Create a pseudo-localization test string (replaces characters with extended lookalikes) to test expansion and special character handling before translations exist
- Partner with in-market users or cultural consultants, not just translators — translation handles words; localization handles meaning
- Audit icon and illustration libraries for cultural neutrality before internationalizing
© Owl-Listener, 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 design-systems/skills/localization-design of Owl-Listener/designer-skills.
Open the folder on GitHubat commit 9a6930c
Used in 1 other repository
We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in Owl-Listener/designer-skills, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Localization Design 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Localization Design this skillOwl-Listener/designer-skills | 2.9k | 1 repos | ~1.3k | Automated safety check: Pass | MIT | |
| Impeccablebestofjs/bestofjs | 3.1k | 27 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Create Docsvictorgarciaesgi/nuxt-typed-router | 413 | 2 repos | ~2.8k | Automated safety check: Pass | MIT | |
| Building With Lobe UIlobehub/lobe-ui | 2.2k | — | ~2k | Automated safety check: Pass | MIT | |
| Locale UI Patternsopenchamber/openchamber | 11k | — | ~1.5k | Automated safety check: Pass | MIT | |
| Instui Docsinstructure/instructure-ui | 482 | — | ~498 | Automated safety check: Pass | Custom licence |
Similar skills
Create Docs
victorgarciaesgi/nuxt-typed-router
Create complete documentation sites for projects. An agent skill from victorgarciaesgi/nuxt-typed-router.
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…
Locale UI Patterns
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…
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.
Nextjs Nextra Starter Distill
pdsuwwz/nextjs-nextra-starter
Distill and apply this repository's Next.js Nextra starter architecture, implemented features, extension points, and migration patterns.
More from Owl-Listener/designer-skills
All 107 skills in this repoA B Test Design
Owl-Listener/designer-skills
Design an A/B experiment — hypothesis, variants, primary metric, and sample size.
Accessibility Test Plan
Owl-Listener/designer-skills
Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol.
Aesthetic Usability
Owl-Listener/designer-skills
Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction.
Affinity Diagram
Owl-Listener/designer-skills
Cluster many qualitative data points into themes and insight statements.
Animation Principles
Owl-Listener/designer-skills
Apply animation principles — easing, staging, follow-through — to one specific UI motion.
Business Design
Owl-Listener/designer-skills
Read financials, map competitive landscapes, and argue design decisions in the language of value.
Related
Categories
Questions about Localization Design
What does Localization Design do?
Design for multiple languages, writing directions, and cultural contexts — text expansion, RTL mirroring, and locale formats. Localization Design is an agent skill from Owl-Listener/designer-skills. Design for multiple languages, writing directions, and cultural contexts — text expansion, RTL mirroring, and locale formats.
When should I use Localization Design?
Localization Design fits situations like: shipping beyond one locale; tasks that involve Internationalization.
How do I install Localization Design in Claude Code?
Run `npx skills add Owl-Listener/designer-skills --skill localization-design -a claude-code`. Or copy the skill folder (design-systems/skills/localization-design in Owl-Listener/designer-skills) into .claude/skills/localization-design in your project. Claude Code loads it when a task matches its description.
How do I install Localization Design in Codex?
Run `npx skills add Owl-Listener/designer-skills --skill localization-design -a codex`. Or copy the skill folder (design-systems/skills/localization-design in Owl-Listener/designer-skills) into .agents/skills/localization-design in your project. Codex loads it when a task matches its description.
Can I use Localization Design 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 Owl-Listener/designer-skills --skill localization-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/localization-design, .gemini/skills/localization-design, .github/skills/localization-design and .opencode/skills/localization-design in your project.
What does Localization Design need to run?
SKILL.md names no scripts, command-line tools or credentials: Localization Design is instructions for the agent only.
Does Localization Design 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 Localization Design 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 Localization Design use?
Localization Design 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 Localization Design use?
About 1.3k tokens (SKILL.md is roughly 5.3k 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 Localization Design?
Skills that share tags, products or a category with Localization Design: Impeccable (bestofjs/bestofjs, 3.1k stars), Create Docs (victorgarciaesgi/nuxt-typed-router, 413 stars), Building With Lobe UI (lobehub/lobe-ui, 2.2k stars) and Locale UI Patterns (openchamber/openchamber, 11k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Localization Design?
Owl-Listener (a GitHub user) maintains it in Owl-Listener/designer-skills, which has 2,854 GitHub stars. The repository holds 107 skills in this directory. The repository was last updated on September 5, 2026.
Source: Owl-Listener/designer-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.