astro-i18n
Internationalization patterns for Astro sites. Multi-language routing, content translation, locale switching, RTL support. Use for multi-market lead generation.
Best use case
astro-i18n is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Internationalization patterns for Astro sites. Multi-language routing, content translation, locale switching, RTL support. Use for multi-market lead generation.
Teams using astro-i18n should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/astro-i18n/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How astro-i18n Compares
| Feature / Agent | astro-i18n | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Internationalization patterns for Astro sites. Multi-language routing, content translation, locale switching, RTL support. Use for multi-market lead generation.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Astro i18n Skill
## Purpose
Provides internationalization patterns for lead generation sites targeting multiple markets/languages. Implements URL-based routing (`/en/`, `/de/`, `/fr/`), translation management, SEO optimization with hreflang tags, and RTL support.
## Core Rules
1. **URL structure first** — `/en/`, `/de/`, `/fr/` prefixes for SEO and user clarity
2. **Fallback gracefully** — Missing translations default to primary language with console warning
3. **hreflang tags** — Required on every page for proper language alternates
4. **RTL support** — Use logical CSS properties (margin-inline-start) for Arabic/Hebrew
5. **Persist preference** — Store user's language choice in localStorage/cookie
6. **Type-safe translations** — Use TypeScript for language codes and translation keys
7. **No hardcoded text** — All user-facing strings must come from translation files
8. **SEO metadata** — Translate title, description, og:locale for each language
9. **Content parity** — Each language should have equivalent content structure
10. **Intl API formatting** — Use native Intl for dates, numbers, currency per locale
## Implementation Overview
| Component | Purpose | Location |
|-----------|---------|----------|
| `languages` config | Define supported locales + metadata | `src/i18n/config.ts` |
| Translation files | JSON with nested keys | `src/i18n/translations/{lang}.json` |
| `t()` function | Translation with fallback + params | `src/i18n/utils.ts` |
| `[lang]/` routes | Dynamic URL segments | `src/pages/[lang]/` |
| Language switcher | Dropdown component | Component in layout |
| hreflang tags | SEO language alternates | `<head>` in BaseLayout |
| Middleware | Optional browser detection | `src/middleware.ts` |
## Quick Start
### Minimal Config
```typescript
// src/i18n/config.ts
export const languages = {
en: { name: 'English', code: 'en-GB', dir: 'ltr' },
de: { name: 'Deutsch', code: 'de-DE', dir: 'ltr' },
} as const;
export const defaultLang = 'en';
export type Lang = keyof typeof languages;
```
### Translation Usage
```astro
---
import { t } from '@/i18n/utils';
const lang = getLangFromUrl(Astro.url);
---
<h1>{t(lang, 'hero.title')}</h1>
<p>{t(lang, 'hero.subtitle')}</p>
<button>{t(lang, 'hero.cta')}</button>
```
### Dynamic Route
```astro
---
// src/pages/[lang]/index.astro
export function getStaticPaths() {
return Object.keys(languages).map(lang => ({ params: { lang } }));
}
---
```
## References
**Configuration & Setup:**
- [config.md](./references/config.md) - Language config, translation files, utilities
**Routing & URLs:**
- [routing.md](./references/routing.md) - Dynamic routes, redirects, middleware
**Components:**
- [components.md](./references/components.md) - Base layout, language switcher
**Content & Collections:**
- [content-collections.md](./references/content-collections.md) - Multi-language blog posts
**Formatting:**
- [formatters.md](./references/formatters.md) - Numbers, dates, currency per locale
**RTL Support:**
- [rtl-support.md](./references/rtl-support.md) - Arabic/Hebrew layout support
**SEO:**
- [seo.md](./references/seo.md) - hreflang, Open Graph, sitemaps
## Forbidden
- ❌ Hardcoded text in components (use `t()` function)
- ❌ Missing hreflang tags on pages
- ❌ Auto-translating without human review
- ❌ Different URLs for same content without hreflang links
- ❌ Ignoring RTL requirements for Arabic/Hebrew
- ❌ Locale in query params (`?lang=de`) instead of path (`/de/`)
- ❌ Using left/right CSS instead of logical properties
- ❌ Forgetting to translate meta descriptions and titles
## Definition of Done
- [ ] Language config with all supported locales defined
- [ ] Translation JSON files for each language with complete key coverage
- [ ] `t()` utility function with fallback to default language
- [ ] URL-based language routing using `[lang]/` dynamic segments
- [ ] hreflang tags on all pages pointing to language alternates
- [ ] Language switcher component in navigation
- [ ] Root `/` redirects to default language
- [ ] Browser language detection (optional, via middleware)
- [ ] RTL support implemented if targeting Arabic/Hebrew
- [ ] Date/number/currency formatting per locale using Intl API
- [ ] Content collections with language-specific entries
- [ ] All user-facing text extracted to translation files
- [ ] SEO meta tags translated (title, description, og:locale)Related Skills
astro-cta-injector
Inject Call-to-Action blocks into Astro site content with intelligent placement strategies. Use when the user wants to add CTAs, newsletter signups, product promotions, or any content blocks to blog posts. Supports multiple placement strategies (end, after 50%, after 60%), content scoring for relevance, and dry-run preview.
astro-content
Create Astro/Starlight MDX content pages. Use when the user says "write a new article", "add a blog post", "create content in Tech/Life category", or "add an MDX page".
astro-blog-write
Phase 3 - Writing blog content with human voice and SEO optimization
paraglide-js-internationalization-i18n
Details Paraglide.js i18n implementations.
i18n-translate
管理 iOS/macOS 应用的 *.xcstrings 本地化翻译文件。自动清理过期条目、检测缺失翻译、添加简繁体中文翻译。当用户需要处理翻译、补充缺失的 zh-Hans/zh-HK 翻译、或清理 *.xcstrings 文件时使用此 skill。
i18n-localization
Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support.
i18n-automation
Automate internationalization and localization workflows for web applications with translation, key generation, and library setup
1k-i18n
Internationalization and translation management for OneKey. Use when adding translations, displaying text, handling locales, or managing translation keys. NEVER modify auto-generated translation files. Triggers on i18n, translation, locale, formatMessage, useIntl, ETranslations, text, string, hardcode, intl, translate, language, localization, internationalization.
managing-astro-local-env
Manage local Airflow environment with Astro CLI. Use when the user wants to start, stop, or restart Airflow, view logs, troubleshoot containers, or fix environment issues. For project setup, see setting-up-astro-project.
astro-seo
SEO markup patterns for Astro lead generation sites. Meta tags, Open Graph, Schema.org, sitemap, robots. Use for all SEO implementation.
astro-performance
Core Web Vitals and performance optimization for Astro sites. LCP, CLS, INP optimization, bundle size, fonts, third-party scripts. Use for performance tuning.
astro-forms
Form infrastructure for Astro. Zod validation, email, rate limiting, Turnstile, GDPR, Sheets. FAIL = no conversion.