skills.rest
david-bieri
david-bieriCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

webdev:static-site-i18n

Automate client-side internationalization for multi-page static sites with data-i18n attributes.

Updated Jun 10, 2026
Search Tags:#frontend#localStorage#i18n#static-site#translation-dictionary
One-click install
npx skills add https://github.com/david-bieri/bieri-ai --skill webdev-static-site-i18n
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webdev:static-site-i18n
Source: https://github.com/david-bieri/bieri-ai/tree/main/skills/webdev-static-site-i18n
Command: npx skills add https://github.com/david-bieri/bieri-ai --skill webdev-static-site-i18n

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translating and maintaining consistency across multiple static-site pages without a backend is error-prone and time-consuming.

Core Features & Use Cases

  • Lightweight client-side i18n using a simple dictionary
  • Data attributes (data-i18n) to mark translatable UI text
  • Propagation of common UI elements (footers, headers) across pages
  • Deployment-friendly workflow for static hosting

Quick Start

Create a strings.js with language dictionaries, apply data-i18n attributes to UI elements, and toggle the language with a lightweight script.

Frequently Asked Questions about webdev:static-site-i18n

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

FAQPage Schema
How do I add client-side internationalization to a static site?▼

You can implement client-side internationalization by maintaining a lightweight translation dictionary in a strings.js file and applying data-i18n attributes to UI elements that need translation.

Can I use a translation dictionary to switch languages across multiple static pages?▼

Yes, the translation dictionary handles language switching across multiple static pages by propagating common UI elements like shared headers and footers consistently throughout the site.

Does this client-side i18n workflow work with GitHub Pages?▼

Yes, the deployment-friendly workflow is designed for static hosting platforms like GitHub Pages, requiring no server-side rendering to manage language toggling and translation delivery.

What is the best way to translate static site UI text without a backend?▼

Using a lightweight dictionary alongside data attributes allows you to mark and translate static site UI text directly on the client side, avoiding the need for a backend.

How do I mark translatable UI text on a static site?▼

Apply data-i18n attributes directly to HTML UI elements to mark them as translatable, allowing the lightweight script to identify and swap text from the translation dictionary.

Related Skills

Explore More Software Engineering Skills→
lobehublobehub
81.4k

i18n

Manage react-i18next translations and locale data in React applications.

Official
Intermediate
brainbrewlabsbrainbrewlabs
7

doc-publishing

Publishes documentation to GitHub Pages, Vercel, or Netlify from source docs and build outputs.

Official
Intermediate
PeakTaiPeakTai

wok-ui-page-layout

Implement shared page layouts with wok-ui Layout inheritance and composition.

Community
Intermediate
grvpanchalgrvpanchal
1

server-ssr

Coordinates SSR HTML generation, hydration, and data fetching for Next.js and Express applications.

Community
Advanced