Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseOpenClawOpenClaw+21 more

    Astro i18n Setup

    2

    Retrofits an existing Astro site with locale routing, a translation dictionary, a language switcher, and hreflang tags — using Astro's own built-in i18n APIs, no external library required.

    $9

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    0 installsSecurity scanned
    Astro i18n Setup

    Astro i18n Setup

    Example session with this skill installed

    Add German (de) to this Astro site.

    • Read your context and instructions
    • Compiled the astro i18n setup
    • Generated the app files

    Detection

    • Astro confirmed via package.json
    • Default locale detected: English (lang="en" on the existing layout)
    • Existing pages found: src/pages/index.astro, src/pages/about.astro
    • No content collections, no text-justify usage — those conditional steps were skipped

    Configuration applied (astro.config.mjs)

    export default defineConfig({
  site: 'https://acme-studio.example.com',
  i18n: {
    locales: ['en', 'de'],
    defaultLocale: 'en',
    routing: {
      prefixDefaultLocale: false,
    },
  },
});

    Pages mirrored

    src/pages/de/index.astro
src/pages/de/about.astro

    Translation dictionary (src/i18n/ui.ts, excerpt)

    export const ui = {
  en: {
    'hero.heading': 'We design brands that people remember',
    'services.heading': 'What we do',
    'nav.about': 'About',
  },
  de: {
    'hero.heading': 'Wir gestalten Marken, an die man sich erinnert',
    'services.heading': 'Was wir tun',
    'nav.about': 'Über uns',
  },
} as const

    20 keys extracted and translated in total, across navigation, hero, services, footer, and the About page.

    Language switcher + hreflang

    src/components/LanguageSwitcher.astro added to the shared layout header, plus one <link rel="alternate" hreflang="..."> tag per locale in <head>.

    Build verification

    $ npm run build
14:25:07   ├─ /about/index.html
14:25:07   ├─ /de/about/index.html
14:25:07   ├─ /de/index.html
14:25:07   ├─ /index.html
14:25:07 [build] ✓ Completed in 109ms.
14:25:07 [build] 4 page(s) built in 155ms
14:25:07 [build] Complete!

    Generated output confirmed correct per locale:

    <!-- /index.html -->
<html lang="en">
<h1>We design brands that people remember</h1>
<link rel="alternate" hreflang="en" href="https://acme-studio.example.com/">
<link rel="alternate" hreflang="de" href="https://acme-studio.example.com/de/">

<!-- /de/index.html -->
<html lang="de">
<h1>Wir gestalten Marken, an die man sich erinnert</h1>

    Summary

    astro-i18n complete

Locales: en (default, no prefix) + de (prefix: /de/)
Pages restructured: 2 files mirrored into src/pages/de/
Dictionary: src/i18n/ui.ts (20 keys), src/i18n/utils.ts
Translation: done via Claude (review recommended before publishing)
Language switcher: added to Layout.astro
hreflang tags: added (Astro.site was set)

Build: ✓ success

    astro-i18n-setup-app.zip

    ZIP · project files

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    What you get

    Add locale-prefixed routing to an existing Astro site without breaking SEO.Extract hardcoded UI strings into a type-safe translation dictionary.Scaffold per-locale folders for blog and product content collections.Inject a functional language switcher and hreflang tags into layouts.

    About this skill

    Adding a second language to an Astro site usually means picking an external i18n library, wiring up routing by hand, and hunting down every hardcoded string in the codebase one file at a time. Astro already ships a built-in i18n router — this skill wires it up properly instead of reaching for another dependency.

    What it does

    • Detects your current default locale from an existing lang attribute or the page content itself, and finds every existing page
    • Configures Astro's built-in i18n router in astro.config.mjs — locales, default locale, and whether the default locale gets a URL prefix
    • Mirrors your existing pages into a folder per added locale, ready for translation
    • Extracts every user-facing string into a typed translation dictionary (src/i18n/ui.ts + utils.ts) and translates it immediately, with a scaffold-only TODO mode also available
    • Adds a language switcher component and hreflang tags for search engines, and sets the correct lang attribute on every page
    • Optionally scaffolds a per-locale folder structure for content collections (blog posts, articles) — structure only, since long-form translation deserves its own deliberate pass

    How it works

    1. Detects the current default locale and lists existing pages, content collections, and any locale-sensitive text alignment already in use
    2. Asks which locales to add, the routing strategy for the default locale, the translation approach, and whether to add a switcher and hreflang tags
    3. Configures the i18n block in astro.config.mjs and mirrors pages into a folder per added locale
    4. Builds the translation dictionary, extracts every UI string into it, and replaces hardcoded text with dictionary lookups across every page
    5. Adds the language switcher, hreflang tags, and correct lang attributes, then runs your build to confirm every locale renders correctly

    What it is not

    This retrofits page-level UI strings and routing — it is not a full localization pipeline. Long-form content (blog posts, articles) gets an optional folder scaffold, never a bulk machine translation of the body text, since accuracy and tone on real content deserve a deliberate pass. Full RTL layout support (mirrored spacing and icons) is also out of scope; this sets the semantic lang/dir attributes only.

    Requirements

    Astro-specific — the project must have astro in package.json. No external i18n library is installed or required; everything is built on Astro's own i18n config and file-based locale routing.

    More from KMRVID

    The full Claude Code skill bundle for web design and Astro workflows, including the companion astro-doctor skill, is available on Gumroad: https://gaspanik.gumroad.com/l/kmrvid-claudeskills

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    30-day refund

    Not a fit? Get your money back

    Trust & safety

    Security scanned

    Verified clean 4 days ago

    • Passed all security checks, Safe to install

    Listed4 days ago
    Updated3 days ago

    What's inside

    Frequently Asked Questions