Plan, implement, or improve an internationalization and localization strategy for UI content, formatting, and regional adaptation. Use when the user asks to add i18n, localize, translate, support multiple languages, handle regional formats, manage locale switching, or build a multilingual product.
インストール方法を見るインストールする前に、エージェントに与えられる指示の中身を確認できます。
Build and maintain internationalized interfaces that feel native in every supported locale, not merely translated.
Localization is more than swapping strings. It is adapting layout, formatting, content, and interaction patterns so that users in every market experience the product as intentional, not as an afterthought.
Consult the language and locale selection reference when designing language selectors, country pickers, currency choosers, or regional-preference controls. Consult the component accessibility reference when localizing custom components that must remain keyboard-navigable and screen-reader friendly across locales. Consult the error-recovery reference when localizing validation messages, error states, and recovery flows. Consult the date-input-ux and date-time-picker-ux references when adapting date, time, and calendar patterns to locale conventions.
Read frontend-design and follow its Context Gathering Protocol. Reuse available context and ask only about consequential gaps. Additionally gather: which markets and languages are targeted now and next, whether the product is content-heavy or UI-heavy, and whether translation will be done in-house, by agency, or through a TMS.
Understand what must change and how deep the adaptation goes:
Content surface area:
Formatting and conventions:
Layout and structural adaptation:
Content and legal differences:
Key-based extraction:
checkout.shipping.title, errors.email.required// Used as button label on shipping formMessage format:
// Good: complete sentence with interpolation
{count, plural, =0 {No items} one {# item} other {# items}} in your cart
// Bad: concatenated fragments
t('items_prefix') + count + t('items_suffix')
Source language discipline:
URL strategy (choose one and commit):
/en/products, /de/products — SEO-friendly, shareable, clearen.example.com, de.example.com — clean separation, harder to maintain?lang=de — simplest to implement, worst for SEO and sharingLocale detection order:
Accept-Language headerLocale persistence:
| Need | Strong options | When to use |
|---|---|---|
| React frameworks | react-i18next, Lingui, FormatJS (react-intl) | Component-level translations with hooks/context |
| Next.js | next-intl, next-international, Lingui, FormatJS | App Router-aware locale routing and server/client boundaries |
| Astro with React islands | Astro i18n routing plus React i18n inside islands | Static content stays Astro-native, interactive island copy stays React-compatible |
| Build-time extraction | Lingui | Smaller bundles, no runtime parsing |
| Runtime extraction | i18next, react-i18next | Dynamic loading, CMS-driven content |
| Translation management | Phrase, Lokalise, Crowdin, Smartling | Team collaboration, TMS workflows, in-context editing |
Pragmatic rules:
Space budget:
Container behavior:
Tailwind logical spacing and border utilities:
Direction-aware transforms:
[dir="rtl"] .arrow { transform: scaleX(-1); }
[dir="rtl"] .timeline { flex-direction: row-reverse; }
Mirroring considerations:
Dates and times:
Intl.DateTimeFormat or library equivalents; never hardcode format stringsNumbers and currency:
Intl.NumberFormat for grouping, decimals, and currency symbols$1,234.56 vs 1.234,56 €)Pluralization, ordinals, and grammar:
one/otherImages and media:
URLs and SEO:
hreflang annotations to indicate language/region variantsLegal and compliance content:
Developer handoff:
Quality assurance:
Continuous localization:
Layout testing:
Functional testing:
Content testing:
t('you_have') + count + t('messages') breaks in most languages.Before shipping a localized product:
hreflang annotationsまだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Systematically audit and remediate accessibility issues in UI, focusing on keyboard navigation, screen reader support, color contrast, semantic HTML, ARIA usage, and motion sensitivity. Use when the user wants to improve accessibility, make a component accessible, fix WCAG violations, add keyboard support, or ensure screen reader compatibility.
日本語の概要は準備中です。原文の説明を表示しています。
Adapt designs for narrow, medium, wide, embedded, or print web contexts without losing usability, hierarchy, or target sizing. Use when the user mentions responsive design, breakpoints, narrow layouts, viewport changes, coarse-pointer browsers, or cross-context adaptation.
日本語の概要は準備中です。原文の説明を表示しています。
Create or redesign React and Tailwind sections, pages, flows, shells, and components. Use when the user wants new UI or a redesign. Implement one requested or selected direction directly, or generate distinct alternatives when the user asks to compare options.
日本語の概要は準備中です。原文の説明を表示しています。
Implement or refine UI motion, gestures, and transitions. Use when the user asks for animation, hover or press motion, drag or swipe behavior, transition timing, or reduced-motion alternatives. Mentioning a drawer, toast, or hover state alone does not request animation.
日本語の概要は準備中です。原文の説明を表示しています。
Improve layout composition, spacing systems, grouping, and visual rhythm. Use when the user mentions weak layout structure, arbitrary spacing, weak grouping, crowded composition, or layout monotony rather than priority/emphasis problems.
日本語の概要は準備中です。原文の説明を表示しています。
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants measurable accessibility, performance, responsive, theming, or anti-pattern findings—not when they mainly want an overall UX critique or final visual/detail polish.
日本語の概要は準備中です。原文の説明を表示しています。