Notre avis
Règles pour gérer l'internationalisation dans un site web multilingue, incluant les champs localisés dans le CMS, l'utilisation des API Intl pour le formatage, et la gestion des labels.
Points forts
- Utilisation des API Intl natives, évitant les dépendances externes
- Séparation claire entre labels globaux et spécifiques dans le CMS
- Approche centralisée via un état global pour la locale et les labels
Limites
- Nécessite une configuration initiale du CMS et de l'état global
- Ne couvre pas la détection automatique de la locale utilisateur
- Les formats Intl sont limités aux capacités du navigateur (pas de personnalisation avancée)
Lorsque vous développez un site web multilingue avec Astro et un CMS headless nécessitant une gestion centralisée des textes et du formatage localisé.
Pour des projets monolingues ou utilisant déjà une bibliothèque i18n complète comme react-i18next ou i18next.
Analyse de sécurité
SûrThe 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.
Aucun point d'attention détecté
Exemples
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);
Expert Next.js App Router
Developpement
Un skill qui transforme Claude en expert Next.js App Router.
Générateur de README
Developpement
Crée des README.md professionnels et complets pour vos projets.
Rédacteur de Documentation API
Developpement
Génère de la documentation API complète au format OpenAPI/Swagger.