本文へ移動
cccskills
無料GitHub で公開

localization-design

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

インストール方法を見る

含まれるファイル(1)

  • SKILL.md5.2 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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:

LanguageTypical expansion vs English
German+20–35%
French+15–25%
Finnish+30–40%
Arabic (translated)−20–30% (but RTL and different script)
Japanese/ChineseOften 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-start instead of margin-left; padding-block-end instead of padding-bottom — these flip automatically with dir="rtl"
  • Text alignment: use text-align: start not text-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

Color

Color meaning varies significantly by culture:

ColorWestern associationExample alternative association
RedDanger, errorLuck/prosperity (China), mourning (South Africa)
WhiteClean, minimalMourning (many East Asian cultures)
GreenSuccess, goUnfaithfulness (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

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Design an A/B experiment — hypothesis, variants, primary metric, and sample size. Use when a change can be measured quantitatively at scale. For observing behaviour qualitatively, use `test-scenario`.

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9022026年9月6日 更新

Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use `accessibility-test-plan` (prototyping-testing).

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9022026年9月6日 更新

Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol. Use when scheduling testing with real AT users. Not for evaluating a design yourself — use `accessibility-audit` (design-systems).

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9022026年9月6日 更新

Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction. Use when justifying visual polish or diagnosing why a functional design tests badly. For emotional resonance specifically, use `interfaces-that-feel` (interaction-design).

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9022026年9月6日 更新

Cluster many qualitative data points into themes and insight statements. Use when synthesising across multiple sessions or sources. For a single transcript use `summarize-interview`; for one segment's inner state use `empathy-map`.

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9022026年9月6日 更新

Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full interaction spec use `micro-interaction-spec`.

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9022026年9月6日 更新

Owl-Listener のスキルをすべて見る

このスキルの問題を報告する