Our review
Rules for handling internationalization in a multi-language website, including localized CMS fields, Intl API formatting, and label management.
Strengths
- Leverages native Intl APIs, avoiding third-party dependencies
- Clear separation of global and scoped labels in the CMS
- Centralized state management for locale and labels
Limitations
- Requires initial CMS setup and global state plumbing
- Does not cover automatic user locale detection
- Intl formats are constrained by browser support (no advanced customization)
When building a multi-language website with Astro and a headless CMS that needs centralized text management and locale-aware formatting.
For single-language projects or when already using a comprehensive i18n library like react-i18next or i18next.
Security analysis
SafeThe skill is a set of prescriptive guidelines for internationalization in a web development context. It does not involve any executable code, system commands, or external tools that could pose a security risk. It is purely advisory and contains no instructions that could be exploited.
No concerns found
Examples
I need to add a 'Read More' label to the article cards. Follow the intl rules: add it to the labels global in the CMS under the 'articles' group, then use it in the component.In this Astro component, format the publish date using the Intl DateTimeFormat with the current locale from globalState. Use the format: day as 2-digit, month as long, year as numeric.I have an array of author names. Use Intl.ListFormat to display them as a comma-separated list (conjunction) respecting the current locale.name: intl description: Internationalization rules for multi-language websites. Use when working on localized text fields in the CMS, Intl formatting (dates, numbers, currencies, lists) in Astro components, or any locale-aware code.
Internationalization Rules
CMS: Localized Fields
- All text fields (e.g. labels, titles) should have
localized: true
Web: Labels & Translations
This is a multi-language website. When adding labels or text to Astro components:
- Never hardcode text strings - All user-facing text must be translatable
- Update the CMS labels global - Add necessary fields to
/cms/src/globals/labels.ts- Use the
globalgroup for common, site-wide labels (e.g., "show-more", "close", "loading") - Use specific groups for scoped labels (e.g.,
articlesfor article-related text,contactfor contact forms)
- Use the
- Access labels in components - Use
const { labels } = globalState - Example usage:
labels.articles['written-by']orlabels.global['show-more']
- When adding labels to the CMS, ensure you use all of them. Delete unused labels after implementation.
Web: Formatting with Intl APIs
Use the built-in JavaScript Intl APIs for locale-aware formatting. Never use third-party libraries or manual string concatenation.
The active locale must come from the global state (const { locale } = globalState). Never hardcode a locale string.
Date & Time
const formatDate = (date: Date | string) =>
new Intl.DateTimeFormat(locale, {
day: '2-digit',
month: 'long',
year: 'numeric',
}).format(new Date(date));
Lists
const formatList = (items: string[], type: Intl.ListFormatType = 'conjunction') =>
new Intl.ListFormat(locale, { type }).format(items);
Currency & Numbers
const formatCurrency = (value: number, currency = 'EUR') =>
new Intl.NumberFormat(locale, {
style: 'currency',
currency,
minimumFractionDigits: 2,
}).format(value);
Next.js App Router Expert
Development
A skill that turns Claude into a Next.js App Router expert.
README Generator
Development
Creates professional and comprehensive README.md files for your projects.
API Documentation Writer
Development
Generates comprehensive API documentation in OpenAPI/Swagger format.