website-i18n

Manages website internationalization by adding translated strings and localized pages across locale files.

138|5|Updated Sep 19, 2024
One-click install
npx skills add https://github.com/macalbert/envilder --skill website-i18n-macalbert
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: website-i18n
Source: https://github.com/macalbert/envilder/tree/main/.github/skills/website-i18n
Command: npx skills add https://github.com/macalbert/envilder --skill website-i18n-macalbert

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adding user-visible text to a multilingual website often leads to hardcoded strings, missing translations, and inconsistent locale pages. This Skill enforces a structured i18n workflow so every string is typed, translated into all locales, and rendered through a shared translation helper. ## Core Features & Use Cases - 4-Step Translation Workflow: Define keys in a TypeScript types file, add strings to every locale file (en, ca, es), consume them via a useTranslations helper, and create localized page variants. - Type-Safe Completeness: TypeScript compilation catches any locale missing a key defined in the central types file. - Translation Guardrails: Maintains a list of product names, CLI flags, and acronyms that must never be translated, and forbids hardcoded text or version numbers. - Use Case: When adding a new pricing section to the Envilder website, use this Skill to define the keys, translate them into English, Catalan, and Spanish, and create the localized Astro pages. ## Quick Start Add a new translated section to the website by defining its keys in the i18n types file and filling in all locale files.

Frequently Asked Questions about website-i18n

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add translated strings to an Astro website?

Define the new key structure in the i18n types file, then add the translated strings to every locale file such as en.ts, ca.ts, and es.ts. Access them in components through a useTranslations helper, and TypeScript will error if any locale is missing a key.

How to create localized pages in Astro with i18n routing?

Create the default locale page directly under the pages directory and place other locale variants in a subdirectory named after each locale, such as pages/es/new-page.astro. Check the i18n.locales setting in astro.config.mjs to discover all active locales.

How do I verify i18n completeness across all locales?

Run TypeScript compilation with tsc --noEmit or start the dev server, since missing keys in any locale file cause type errors against the central Translations interface. Then navigate to each locale in the dev server to confirm text renders correctly.

Which terms should not be translated in software documentation?

Product names, CLI flags, code tokens, and acronyms stay in English. Examples include envilder, AWS SSM, Azure Key Vault, --map, --envfile, .env, CI/CD, IAM, RBAC, JSON, YAML, Node.js, pnpm, and npx.

Why does TypeScript error after adding a new translation key?

The error occurs because a key was added to the Translations interface in types.ts but not to every locale file. All locale files must implement the full interface, so add the key to en.ts, ca.ts, and es.ts simultaneously.