Agent skill

Frontend I18n

by langflow-ai in langflow-ai/langflow

Add, change, or review user-facing text in the Langflow frontend using the i18n system (i18next / react-i18next).

MITAuto-check passedFrontend & Design

Install Frontend I18n

skills CLI
$ npx skills add langflow-ai/langflow --skill frontend-i18n -a claude-code

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

GitHub CLI
$ gh skill install langflow-ai/langflow frontend-i18n --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/langflow-ai/langflow.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/frontend-i18n .claude/skills/frontend-i18n && 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
frontend-i18n
GitHub stars
155k
Token cost
~1k tokens
SKILL.md length
411 words
Files
1
Skills in repo
10
Repo updated
First seen
Licence
MIT

At a glance

Add, change, or review user-facing text in the Langflow frontend using the i18n system (i18next / react-i18next).

  • Works in 2 steps: Every user-facing string goes through… → Every new key is added to ALL locale…
  • Edits UI strings — labels
  • SKILL.md covers The two rules, How it works here, Adding a string (the pattern) and Rules that prevent real bugs, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Frontend I18n is an agent skill from langflow-ai/langflow. Add, change, or review user-facing text in the Langflow frontend using the i18n system (i18next / react-i18next). Use whenever a change adds or edits UI strings — labels, buttons, tooltips, modals, toasts, error messages, empty states — or when reviewing a diff that contains user-facing text. Every user-facing string must go through the translation system and every new key must exist in ALL locale files. Do NOT use for backend strings, log messages, or code identifiers.

Its SKILL.md is about 1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Internationalization and Translation. It works with React. The repository describes itself as: Langflow is a powerful tool for building and deploying AI-powered agents and workflows. The licence is MIT.

When your agent uses it

  • Edits UI strings — labels
  • Reviewing a diff that contains user-facing text
  • Backend strings
  • Code identifiers

Example prompts

  • “/frontend-i18n”

Workflow steps

2 steps, taken from the first numbered list in SKILL.md.

  1. Every user-facing string goes through t(...) — never hardcoded JSX text for labels, buttons, tooltips, modals, toasts, errors…
  2. Every new key is added to ALL locale files in the same PR (en.json, de.json, es.json, fr.json, ja.json, pt.json, zh-Hans.json)…

What it can do on your machine

Read from SKILL.md and the folder at commit 504c02f. 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

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript, json and bash).

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

  • Network

    No URLs in SKILL.md.

    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

Frontend I18n loads about 1k tokens when it runs. Until then it costs about 122 tokens; SKILL.md has 411 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~122
When it runs · the whole SKILL.md, loaded when a task matches
~1k

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 langflow-ai/langflow at commit 504c02f, republished under its MIT licence (© langflow-ai). 411 words, ~1,007 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-i18n/SKILL.md (or your agent's skills folder).
name
frontend-i18n
description
Add, change, or review user-facing text in the Langflow frontend using the i18n system (i18next / react-i18next). Use whenever a change adds or edits UI strings — labels, buttons, tooltips, modals, toasts, error messages, empty states — or when reviewing a diff that contains user-facing text. Every user-facing string must go through the translation system and every new key must exist in ALL locale files. Do NOT use for backend strings, log messages, or code identifiers.

Frontend i18n

The Langflow frontend is internationalized with i18next + react-i18next. Locales live in src/frontend/src/locales/ — currently en, de, es, fr, ja, pt, zh-Hans. A hardcoded user-facing string, or a key missing from one locale, ships broken UI for part of the user base.

The two rules

  1. Every user-facing string goes through t(...) — never hardcoded JSX text for labels, buttons, tooltips, modals, toasts, errors, placeholders, aria-labels, or empty states.
  2. Every new key is added to ALL locale files in the same PR (en.json, de.json, es.json, fr.json, ja.json, pt.json, zh-Hans.json). fallbackLng: "en" means a missing key silently shows English — it won't crash, which is exactly why reviews must catch it.

How it works here

  • Config: src/frontend/src/i18n.ts — a custom i18next instance. en is bundled statically; other languages are lazy-loaded by loadLanguage() via dynamic import. Language preference comes from localStorage.getItem("languagePreference"), normalized (e.g. zh-CN → zh-Hans, unknown → en).
  • Keys are flat, dot-namespaced by feature: deleteModal.title, errors.fileTooLarge, crash.restartButton. Follow the existing namespace of the area you're touching; create a new prefix only for a genuinely new surface.
  • Interpolation uses {{variable}} in the string and an options object in the call.

Adding a string (the pattern)

tsx
import { useTranslation } from "react-i18next";

const { t } = useTranslation();

<span>{t("deleteModal.title")}</span>
<p>{t("errors.fileTooLarge", { maxSizeMB: "10MB" })}</p>

In locales/en.json (and every other locale file):

json
"errors.fileTooLarge": "The file size is too large. Please select a file smaller than {{maxSizeMB}}."

For the non-English locales, write a real translation when confident; if not, add the key with the English value and flag it in the PR — a present-but-untranslated key is visible and searchable, a missing key is invisible.

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

Rules that prevent real bugs

  • Don't concatenate translated fragments (t("a") + name + t("b")) — word order differs across languages. Use one key with interpolation: t("greeting", { name }).
  • Don't put JSX/HTML inside translation strings; compose in JSX around t() calls (see how crash.descriptionBefore / crash.githubIssues / crash.descriptionAfter split around a link).
  • Plurals: use i18next plural forms (_one / _other suffixes), not count === 1 ? ... : ....
  • Keys are code: renaming or deleting a key means updating all seven locale files — an orphan key in one file is dead weight; a rename missed in one file is a regression.
  • Dates/numbers/currency: format with Intl.* using the active locale, never hardcoded formats.

Review checklist (apply to any diff with UI text)

  • No hardcoded user-facing string in JSX (including placeholder, title, aria-label, toast/error text).
  • Every new key exists in all locale files (grep the key across src/frontend/src/locales/*.json).
  • No concatenation of translated fragments; interpolation used instead.
  • Removed/renamed keys cleaned up in all locales (no orphans).
  • Key follows the existing dot-namespace of the feature area.

Quick check for a key across locales:

bash
for f in src/frontend/src/locales/*.json; do grep -L '"my.new.key"' "$f"; done

(prints the locale files where the key is missing — should print nothing)

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

Files

Just SKILL.md in .agents/skills/frontend-i18n of langflow-ai/langflow.

Open the folder on GitHubat commit 504c02f

Compare with similar skills

Frontend I18n 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.

Frontend I18n compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend I18n this skilllangflow-ai/langflow155k—~1kAutomated safety check: PassMIT
Readme I18nY80/bmm3442 repos~1.9kAutomated safety check: PassMIT
Lingui Best PracticesB0und/WikiSpeedrun1332 repos~4.2kAutomated safety check: PassMIT
I18next Localizationi18next/i18next-cli241—~1.6kAutomated safety check: PassMIT
Builder UI I18nChatbotXIO/ChatbotX885—~2.1kAutomated safety check: PassCustom licence
Add LanguageZoneMinder/zmNinjaNg111—~1.1kAutomated safety check: PassApache-2.0

Similar skills

  • A skill your agent uses when the user wants to translate a repository README, make a repo multilingual, localize docs, add a language switcher, internationalize the README, or update localized…

    344 GitHub starsUsed in 2 repos~1.9k tokens
    Frontend & DesignAuto-check passed
  • Lingui Best Practices

    B0und/WikiSpeedrun

    Implement internationalization with Lingui in React and JavaScript applications.

    133 GitHub starsUsed in 2 repos~4.2k tokens
    Frontend & DesignAuto-check passed
  • I18next Localization

    i18next/i18next-cli

    Takes an app from hardcoded strings to a localized, continuously translated one with i18next (Locize optional): stack detection, config, wrapping strings in t(), key extraction, Locize sync, and AI…

    241 GitHub stars~1.6k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Builder UI I18n

    ChatbotXIO/ChatbotX

    Build or modify ChatbotX builder UI components, forms, tables, dialogs, shared UI usage, and translations.

    885 GitHub stars~2.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Add Language

    ZoneMinder/zmNinjaNg

    A skill your agent uses when adding a new interface language (locale) to the app, or when asked to translate the UI into another language.

    111 GitHub stars~1.1k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed
  • JSON UI

    actionbook/actionbook

    CRITICAL: Use for json-ui component rendering and development.

    1.6k GitHub stars~2.7k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

More from langflow-ai/langflow

All 10 skills in this repo
  • Backend Code Review

    langflow-ai/langflow

    Review backend code for quality, security, maintainability, and best practices based on established checklist rules.

    155k GitHub stars~3.5k tokensUpdated today
    Auto-check: notes
  • Component Refactoring

    langflow-ai/langflow

    Refactor high-complexity React components in Langflow frontend.

    155k GitHub stars~3.5k tokensUpdated today
    Auto-check passed
  • E2E Testing

    langflow-ai/langflow

    Write and review Playwright E2E tests for Langflow. An agent skill from langflow-ai/langflow.

    155k GitHub stars~3.3k tokensUpdated today
    Auto-check passed
  • Frontend Query Mutation

    langflow-ai/langflow

    Guide for implementing Langflow frontend query and mutation patterns with Axios and TanStack React Query v5.

    155k GitHub stars~979 tokensUpdated today
    Auto-check passed
  • Ibm A11y Level1 Audit

    langflow-ai/langflow

    Perform a scoped IBM Equal Access Level 1 compliance audit of a chosen Langflow frontend surface (routes, components, or a PR) and produce a findings report mapped to WCAG/IBM Level 1 criteria.

    155k GitHub stars~2.4k tokensUpdated today
    Auto-check passed
  • Ibm A11y PR Remediation

    langflow-ai/langflow

    Scan every frontend surface touched by the current PR/branch for IBM Equal Access Level 1 accessibility issues and fix all in-scope violations by default.

    155k GitHub stars~2k tokensUpdated today
    Auto-check passed

Works with

Questions about Frontend I18n

What does Frontend I18n do?

Add, change, or review user-facing text in the Langflow frontend using the i18n system (i18next / react-i18next). Frontend I18n is an agent skill from langflow-ai/langflow. Add, change, or review user-facing text in the Langflow frontend using the i18n system (i18next / react-i18next).

When should I use Frontend I18n?

Frontend I18n fits situations like: edits UI strings — labels; reviewing a diff that contains user-facing text; backend strings; code identifiers.

How do I install Frontend I18n in Claude Code?

Run `npx skills add langflow-ai/langflow --skill frontend-i18n -a claude-code`. Or copy the skill folder (.agents/skills/frontend-i18n in langflow-ai/langflow) into .claude/skills/frontend-i18n in your project. Claude Code loads it when a task matches its description.

How do I install Frontend I18n in Codex?

Run `npx skills add langflow-ai/langflow --skill frontend-i18n -a codex`. Or copy the skill folder (.agents/skills/frontend-i18n in langflow-ai/langflow) into .agents/skills/frontend-i18n in your project. Codex loads it when a task matches its description.

Can I use Frontend I18n 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 langflow-ai/langflow --skill frontend-i18n -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-i18n, .gemini/skills/frontend-i18n, .github/skills/frontend-i18n and .opencode/skills/frontend-i18n in your project.

What does Frontend I18n need to run?

SKILL.md names no scripts, command-line tools or credentials: Frontend I18n is instructions for the agent only.

Does Frontend I18n access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Frontend I18n 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 Frontend I18n use?

Frontend I18n 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 Frontend I18n use?

About 1k tokens (SKILL.md is roughly 4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Frontend I18n?

Skills that share tags, products or a category with Frontend I18n: Readme I18n (Y80/bmm, 344 stars), Lingui Best Practices (B0und/WikiSpeedrun, 133 stars), I18next Localization (i18next/i18next-cli, 241 stars) and Builder UI I18n (ChatbotXIO/ChatbotX, 885 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend I18n?

langflow-ai (a GitHub organization) maintains it in langflow-ai/langflow, which has 155,453 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 10, 2026.

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