← ClaudeAtlas

localization-designlisted

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).
stritar/skills · ★ 0 · Web & Frontend · score 60
Install: claude install-skill stritar/skills
# 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;