New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Lingui Framework Setup

by B0und in B0und/WikiSpeedrun

Set up Lingui in a React framework. An agent skill from B0und/WikiSpeedrun.

MITAuto-check passedFrontend & Design

Install Lingui Framework Setup

skills CLI
$ npx skills add B0und/WikiSpeedrun --skill lingui-framework-setup -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install B0und/WikiSpeedrun lingui-framework-setup --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/B0und/WikiSpeedrun.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/lingui-framework-setup .claude/skills/lingui-framework-setup && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
lingui-framework-setup
GitHub stars
133
Token cost
~1.9k tokens
SKILL.md length
853 words
Files
5 (incl. references)
Skills in repo
6
Repo updated
First seen
Licence
MIT

At a glance

Set up Lingui in a React framework. An agent skill from B0und/WikiSpeedrun.

  • Works in 4 steps: Detect the stack → Common steps (every framework) → Framework reference → …
  • Adding Lingui to a Next.js App Router
  • SKILL.md covers Step 1 — Detect the stack, Step 2 — Common steps (every…, Step 3 — Framework reference and Step 4 — Verify, plus 2 more sections
  • Calls npx and npm

What it does

Lingui Framework Setup is an agent skill from B0und/WikiSpeedrun. Set up Lingui in a React framework. Use when adding Lingui to a Next.js App Router, Vite, React Router 7, Remix, or TanStack Start project, when wiring locale detection, locale-prefixed URLs, or SSR locale resolution, or when a working setup breaks after a framework or build-tool upgrade.

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including reference files (for example `references/nextjs-app-router.md`, `references/react-router-remix.md` and `references/tanstack-start.md`).

It sits in Frontend & Design. It works with React, TanStack, Next.js and Vite. The repository describes itself as: Wikipedia Speedrun Game. The licence is MIT.

When your agent uses it

  • Adding Lingui to a Next.js App Router
  • TanStack Start project
  • Wiring locale detection
  • Locale-prefixed URLs

Example prompts

  • “/lingui-framework-setup”

Requirements

  • Node.js

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Detect the stack
  2. Common steps (every framework)
  3. Framework reference
  4. Verify

What it can do on your machine

Read from SKILL.md and the folder at commit a03d655. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx and npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Lingui Framework Setup loads about 1.9k tokens when it runs, and up to ~15k if it reads all its reference files. Until then it costs about 78 tokens; SKILL.md has 853 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~78
When it runs · the whole SKILL.md, loaded when a task matches
~1.9k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~15k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from B0und/WikiSpeedrun at commit a03d655, republished under its MIT licence (© B0und). 853 words, ~1,895 tokens.

Download SKILL.mdSave it as .claude/skills/lingui-framework-setup/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
lingui-framework-setup
description
Set up Lingui in a React framework. Use when adding Lingui to a Next.js App Router, Vite, React Router 7, Remix, or TanStack Start project, when wiring locale detection, locale-prefixed URLs, or SSR locale resolution, or when a working setup breaks after a framework or build-tool upgrade.

Lingui Framework Setup

Correct Lingui setup is framework-shaped: what works in a Vite SPA breaks in React Server Components, and a module-level i18n singleton that is fine in the browser bleeds locales across requests under SSR. This skill routes to a framework-native recipe instead of a generic I18nProvider answer.

Work in this order: detect the stack → apply the common steps → follow the framework reference → run the verification sequence.

Step 1 — Detect the stack

Read package.json and the build config before recommending anything. Never guess the compiler — the macro transform silently does nothing when wired into the wrong one.

SignalStackReference
next in deps, app/ or src/app/ with layout.tsxNext.js App Routernextjs-app-router.md
next in deps, pages/ with _app.tsx, no app/Next.js Pages RouterSupported by Lingui, brief notes in nextjs-app-router.md
@tanstack/react-start in depsTanStack Start (SSR)tanstack-start.md
@react-router/dev in devDeps + react-router.config.*React Router 7 framework mode (SSR)react-router-remix.md
@remix-run/dev ≥ 2.7 in devDeps + viteRemix v2 (Vite build, SSR)react-router-remix.md
vite + react, none of the aboveVite SPA (incl. declarative React Router, TanStack Router)vite-spa.md

Compiler detection (decides which macro-transform package to install):

SignalCompilerMacro transform
@vitejs/plugin-react-swcSWC@lingui/swc-plugin (pin exactly — see the swc-plugin-compatibility skill)
@vitejs/plugin-react ^5 or lowerBabel@lingui/babel-plugin-lingui-macro via the plugin's babel option
@vitejs/plugin-react ^6+, Vite 8Babel, standalone passv6 removed the babel option — run the macro as its own pass: @rolldown/plugin-babel + linguiTransformerBabelPreset(). Keeps the stock React plugin
@vitejs/plugin-react ^6+, Vite ≤ 7Babel, standalone passSame, via vite-plugin-babel (no Rolldown). Switching to @vitejs/plugin-react-swc also works, at the cost of an exact pin
Next.js, no .babelrcSWC@lingui/swc-plugin via experimental.swcPlugins
Next.js with .babelrcBabel@lingui/babel-plugin-lingui-macro in .babelrc (a Babel config disables Next's SWC)

One more distinction that changes everything: react-router in deps without @react-router/dev is a declarative SPA (<Routes> in JSX) — that is the Vite SPA reference, not the framework-mode one. Route-module loader/+types code written into a declarative SPA is dead on arrival.

Step 2 — Common steps (every framework)

Version gate. Lingui 6 is current: ESM-only, requires Node ≥ 22.19 (or ≥ 24). Install @lingui/core@^6 @lingui/react@^6 and dev @lingui/cli@^6. If the project cannot meet the Node requirement, pin every @lingui/* package to ^5 — do not mix majors. Do not install @lingui/macro: since v5 the macros live at @lingui/react/macro and @lingui/core/macro.

Per-stack extras (details in each reference):

StackExtra runtimeExtra dev
Next.js App Router—@lingui/swc-plugin (exact pin)
Vite SPA@lingui/detect-locale@lingui/vite-plugin + transform plugin per compiler
React Router 7 / Remix—@lingui/vite-plugin, @lingui/format-po, transform plugin
TanStack Start—@lingui/vite-plugin, transform plugin

@lingui/detect-locale is browser-only (navigator, localStorage, window.location). Never install it on an SSR stack — it throws on the server or desyncs hydration; SSR stacks resolve locale from the request (cookie / Accept-Language) instead.

Config and catalogs. Create lingui.config.ts with sourceLocale, locales, and one catalogs entry; the lingui-best-practices skill owns catalog hygiene (build-script wiring, gitignore rules, CI drift check) and the single-sourced locale module (locales.ts with resolveLocale, getDirection, localeDisplayName) — reuse both, do not re-derive them.

Two catalog-loading models. On Vite-based stacks, @lingui/vite-plugin compiles .po on import — await import('./locales/en/messages.po') just works, there are no compiled artifacts to script or gitignore. Next.js has no Vite pipeline: run lingui compile prepended to dev/build scripts and import the compiled catalogs (@lingui/loader is webpack-only and Turbopack is the Next 15/16 default, so a loader-based setup is a trap).

Show full SKILL.md (313 more words)Show less

Step 3 — Framework reference

Read the matching reference file fully before editing the project. Every reference follows the same section contract, in order:

packages → build-tool integration → lingui.config → locale resolution → provider/layout wiring → routing strategies → language switcher → gotchas → verification

If the project needs locale-prefixed URLs, every reference offers the same three strategies — unprefixed source locale, all locales prefixed, or no URL locale (cookie/storage only). Restructuring routes is invasive: ask the user which strategy they want before moving files.

Step 4 — Verify

Run in this order; each step must pass before the next:

bash
npx lingui extract --clean   # catalogs regenerate; count matches expectations
npx lingui compile           # only on stacks with compiled catalogs (Next.js)
npx tsc --noEmit             # types resolve, incl. catalog imports
npm run build                # macro wiring errors surface here

Then prove the transform ran. A green build does not: a mis-wired macro transform is silently a no-op and the app ships in the source language. Translate one string in a non-source catalog, run the app in that locale, and confirm the translation reaches the browser (each reference gives the stack's exact check — curl the server-rendered HTML on SSR stacks, hard-load a deep link on the SPA). The setup is done when you have seen a translated string, not when the build is green.

Raw untranslated text at that point is a compiler wiring problem — wrong plugin, bare-string SWC entry, or the @vitejs/plugin-react@6 babel trap; see the swc-plugin-compatibility skill.

Adding a new framework

Another stack (a new meta-framework, a new build tool) costs two edits: one row in the Step 1 detection table, and one file under references/ following the Step 3 section contract. Framework-specific facts go in the reference; anything true of every stack — the version gate, the two catalog-loading models, the SSR detect-locale rule — stays here, stated once. Every non-obvious rule carries a one-sentence why.

  • lingui-best-practices — macro selection, catalog hygiene, the shared locale module. This skill assumes it; don't duplicate it.
  • swc-plugin-compatibility — SWC plugin version pinning and the silent-failure modes of a mis-wired transform.
  • migrate-i18next-to-lingui — if the project already has i18next, migrate first, then return here for framework wiring.

© B0und, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files (references) in .agents/skills/lingui-framework-setup of B0und/WikiSpeedrun.

  • SKILL.md
  • references/nextjs-app-router.md
  • references/react-router-remix.md
  • references/tanstack-start.md
  • references/vite-spa.md

Open the folder on GitHubat commit a03d655

Compare with similar skills

Lingui Framework Setup next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Lingui Framework Setup compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Lingui Framework Setup this skillB0und/WikiSpeedrun133—~1.9kAutomated safety check: PassMIT
Feature Sliced Designfeature-sliced/skills109—~5.5kAutomated safety check: PassNone
Reactericrisco/rsc-harness156—~3.2kAutomated safety check: PassMIT
Cometchat React V7 Patternscometchat/cometchat-skills129—~1.2kAutomated safety check: NotesMIT
Workos Widgetsusenotra/notra255—~2kAutomated safety check: PassAGPL-3.0
React Router Developmentremix-run/react-router57k1 repos~1.5kAutomated safety check: PassMIT

Similar skills

  • Feature Sliced Design

    feature-sliced/skills

    Official Feature-Sliced Design (FSD) v2.1 skill for applying the methodology to frontend projects.

    109 GitHub stars~5.5k tokensUpdated 21 days ago
    Frontend & DesignAuto-check passed

  • React

    ericrisco/rsc-harness

    A skill your agent uses when building or reviewing a client-side React SPA bundled by Vite (React 19.2): components, where state lives, hooks, server data fetching, client routing, re-render and…

    156 GitHub stars~3.2k tokensUpdated today
    MobileAuto-check passed

  • Cometchat React V7 Patterns

    cometchat/cometchat-skills

    Framework wiring for the React v7 UI Kit across Vite, Create React App, Next.js, React Router (incl.

    129 GitHub stars~1.2k tokensUpdated 2 days ago
    Frontend & DesignAuto-check: notes

  • Workos Widgets

    usenotra/notra

    A skill your agent uses when the user is implementing, embedding, or debugging a WorkOS Widget — specifically the User Management, User Profile, Admin Portal SSO Connection, or Admin Portal Domain…

    255 GitHub stars~2k tokensUpdated today
    AI & LLM EngineeringAuto-check passed

  • React Router Development

    remix-run/react-router

    Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.

    57k GitHub starsUsed in 1 repo~1.5k tokens
    Frontend & DesignAuto-check passed

  • Chakra UI v3 Builder

    chakra-ui/chakra-ui

    Builds responsive, accessible Chakra UI v3 components and layouts, sets up Chakra in new or existing projects, and designs themes with tokens, semantic tokens and recipes.

    41k GitHub stars~3.1k tokensUpdated today
    Frontend & DesignAuto-check passed

More from B0und/WikiSpeedrun

  • Lingui Best Practices

    B0und/WikiSpeedrun

    Implement internationalization with Lingui in React and JavaScript applications.

    133 GitHub starsUsed in 2 repos~4.2k tokens
    Auto-check passed

  • Find Unwrapped Strings

    B0und/WikiSpeedrun

    Audit a Lingui project for hardcoded user-facing strings that were never wrapped in macros.

    133 GitHub stars~2.1k tokensUpdated 17 days ago
    Auto-check passed

  • Migrate I18next To Lingui

    B0und/WikiSpeedrun

    Migrate i18next/react-i18next projects to Lingui. An agent skill from B0und/WikiSpeedrun.

    133 GitHub stars~3.1k tokensUpdated 17 days ago
    Auto-check passed

  • Enhanced Message Context

    B0und/WikiSpeedrun

    Add translator comments to Lingui messages so translations are accurate.

    133 GitHub stars~3.3k tokensUpdated 17 days ago
    Auto-check passed

  • Swc Plugin Compatibility

    B0und/WikiSpeedrun

    Diagnose and fix Lingui SWC plugin compatibility errors with Next.js, Vite, Rspack, or other SWC runtimes.

    133 GitHub stars~2.3k tokensUpdated 17 days ago
    Auto-check passed

Works with

Categories

Questions about Lingui Framework Setup

What does Lingui Framework Setup do?

Set up Lingui in a React framework. An agent skill from B0und/WikiSpeedrun. Lingui Framework Setup is an agent skill from B0und/WikiSpeedrun. Set up Lingui in a React framework.

When should I use Lingui Framework Setup?

Lingui Framework Setup fits situations like: adding Lingui to a Next.js App Router; tanStack Start project; wiring locale detection; locale-prefixed URLs.

How do I install Lingui Framework Setup in Claude Code?

Run `npx skills add B0und/WikiSpeedrun --skill lingui-framework-setup -a claude-code`. Or copy the skill folder (.agents/skills/lingui-framework-setup in B0und/WikiSpeedrun) into .claude/skills/lingui-framework-setup in your project. Claude Code loads it when a task matches its description.

How do I install Lingui Framework Setup in Codex?

Run `npx skills add B0und/WikiSpeedrun --skill lingui-framework-setup -a codex`. Or copy the skill folder (.agents/skills/lingui-framework-setup in B0und/WikiSpeedrun) into .agents/skills/lingui-framework-setup in your project. Codex loads it when a task matches its description.

Can I use Lingui Framework Setup in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add B0und/WikiSpeedrun --skill lingui-framework-setup -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/lingui-framework-setup, .gemini/skills/lingui-framework-setup, .github/skills/lingui-framework-setup and .opencode/skills/lingui-framework-setup in your project.

What does Lingui Framework Setup need to run?

Going by SKILL.md and its folder, Lingui Framework Setup needs the command-line tools its instructions call (npx and npm). Our summary lists: Node.js.

Does Lingui Framework Setup access the network?

SKILL.md contains no URLs. Its commands use npx and npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Lingui Framework Setup safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Lingui Framework Setup use?

Lingui Framework Setup is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Lingui Framework Setup use?

About 1.9k tokens (SKILL.md is roughly 7.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 13k tokens, read only when the agent opens those files.

What are the alternatives to Lingui Framework Setup?

Skills that share tags, products or a category with Lingui Framework Setup: Feature Sliced Design (feature-sliced/skills, 109 stars), React (ericrisco/rsc-harness, 156 stars), Cometchat React V7 Patterns (cometchat/cometchat-skills, 129 stars) and Workos Widgets (usenotra/notra, 255 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Lingui Framework Setup?

B0und (a GitHub user) maintains it in B0und/WikiSpeedrun, which has 133 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on September 19, 2026.

Source: B0und/WikiSpeedrun on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.