localization-design について
localization-designは、多言語対応UIの設計指針を提供するスキルです。レイアウト、タイポグラフィ、書式、文化的要素を扱い、UI文言の翻訳ではなくデザインに焦点を当てます。
主な機能
- 01言語ごとのテキスト拡張を想定
- 02右から左へのレイアウト全体を設計
- 03非ラテン文字のタイポグラフィを選定
- 04論理CSSプロパティを使用
- 05ロケールに応じた日付と数値形式
- 06色やアイコンの文化的意味を考慮
活用シーン
- 01多言語UIのレイアウトを準備
- 02右から左に書く地域向けにUIを調整
- 03ローカライズ文言の字体や余白を確認
- 04地域ごとの書式や視覚慣習に対応
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ podo/ design-agent-skills --skill localization-designインストール後、Claude Code で/localization-designを入力して読み込まれたか確認します。
同梱ファイルstub.yaml
詳細
localization-design
カタログのスタブ — スキルの完全版はこちら:Owl-Listener/designer-skills
判断フロー
-
スキルの完全版はすでにインストールされていますか?
- グローバル:
f=~/.agents/skills/localization-design/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer" - プロジェクト:
f=.agents/skills/localization-design/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer" installed→ スキルはlocalization-designとしてインストール済みです。これを呼び出して続行しますpointer→ ステップ 2 に進みます
- グローバル:
-
適用範囲を検出してから、インストールします:
[ -e ~/.agents/skills/localization-design ] && echo "global" || echo "project"グローバル:
npx skills add Owl-Listener/designer-skills --skill localization-design -g -yプロジェクト:
npx skills add Owl-Listener/designer-skills --skill localization-design -yClaude Code: 会話を離れずにコマンドを実行するには、チャットメッセージの先頭に
!を付けて送信します。
Claude Code プラグインを使う方法:
/plugin marketplace add Owl-Listener/designer-skills
/plugin install design-systems@designer-skills
注意事項
- ライセンス: MIT
インストール後の呼び出し
- スキル名:
localization-design - トリガーフレーズ:"localization design"、"RTL layout design"、"text expansion design"、"internationalization design"、"right-to-left UI"
機能
複数のロケールでインターフェースを提供するための設計ガイダンスです。一般的なエージェントが見落としがちな問題への対処を扱います。言語ごとのテキスト拡張の余裕(ドイツ語、フランス語、フィンランド語など)、RTL レイアウトの完全なミラーリング(アイコンを含め、反転するものとしないもの)、非ラテン文字のタイポグラフィ、margin-inline-start 形式の論理プロパティ、ロケールに応じた日付・時刻・数値の形式、文化的な意味合いを持つ色やアイコンを取り上げます。対象はローカライゼーションのデザインであり、実際の文言については UX ライティングスキルに委ねます。
使用しない場合
- 文字列や i18n の配線のみの場合(デザインスキルではなく i18n ライブラリを使用してください)
- 一般的なアクセシビリティ監査 →
wcag-audit-patternsまたはfixing-accessibilityを使用してください - インターフェースの文言そのものについての場合(
ux-writing-skillを使用してください)
コメント
Markdown 対応