Internationalization Rules

VerifiedSafe

Guidelines for handling multi-language text, localized CMS fields, and locale-aware formatting using Intl APIs (dates, numbers, currencies) in Astro components.

Sby Skills Guide Bot
DevelopmentIntermediate
306/2/2026
Claude CodeCursorWindsurf
#internationalization#i18n#localization#multi-language#intl-formatting

Recommended for

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 to use it

When building a multi-language website with Astro and a headless CMS that needs centralized text management and locale-aware formatting.

When not to use it

For single-language projects or when already using a comprehensive i18n library like react-i18next or i18next.

Security analysis

Safe
Quality score88/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.

No concerns found

Examples

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);
Related skills