Règles d'Internationalisation

VérifiéSûr

Règles pour gérer les textes multilingues, les champs localisés du CMS et le formatage avec les API Intl (dates, nombres, devises) dans les composants Astro.

Spar Skills Guide Bot
DeveloppementIntermédiaire
2002/06/2026
Claude CodeCursorWindsurf
#internationalization#i18n#localization#multi-language#intl-formatting

Recommandé pour

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)
Quand l'utiliser

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

Quand l'éviter

Pour des projets monolingues ou utilisant déjà une bibliothèque i18n complète comme react-i18next ou i18next.

Analyse de sécurité

Sûr
Score qualité88/100

The 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

Add a localized label for 'Read More'
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.
Format a date in the current locale
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.
Create a list with Intl.ListFormat
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:

  1. Never hardcode text strings - All user-facing text must be translatable
  2. Update the CMS labels global - Add necessary fields to /cms/src/globals/labels.ts
    • Use the global group for common, site-wide labels (e.g., "show-more", "close", "loading")
    • Use specific groups for scoped labels (e.g., articles for article-related text, contact for contact forms)
  3. Access labels in components - Use const { labels } = globalState
  4. Example usage: labels.articles['written-by'] or labels.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);
Skills similaires