Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
DeepSeek
Muse+22 moreClaude CodeCursorCodex CLIDeepSeekMuse
Dots
Manus
Grok
Grok Bot+18 agentsAstro i18n Setup
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
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
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
Connects securely to your tools. The creator never sees your data.
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
- Detects the current default locale and lists existing pages, content collections, and any locale-sensitive text alignment already in use
- Asks which locales to add, the routing strategy for the default locale, the translation approach, and whether to add a switcher and hreflang tags
- Configures the i18n block in astro.config.mjs and mirrors pages into a folder per added locale
- Builds the translation dictionary, extracts every UI string into it, and replaces hardcoded text with dictionary lookups across every page
- 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.
Find more skills like this on the Claude Skills Marketplace, the Codex Skills Marketplace and the Gemini Skills Marketplace, or browse Claude Skills for Translation & Localization.
Requires an existing Astro project. Only scaffolds structure for content collections without translating long-form body text. Does not handle full RTL UI mirroring.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before buying a skill.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scan
Security scan passed 1 month ago
Permissions
File Scopes
This skill reads and writes files only within the Astro project you point it at — astro.config.mjs, page files, layout files, and a new src/i18n/ directory (Read Files, Write Files) — and runs the project's own build command locally to verify every locale renders (Terminal). It makes no network calls and installs no external i18n package.