# Extract UI Strings Into i18n Keys
Extract UI Strings Into i18n Keys is a tested SKILL.md that pulls the hard-coded text a person sees out of a JSX, TSX, HTML or Vue template file into a messages map and returns the file rewritten to call the translation function, as one JSON object with the messages and the whole source and nothing around it; an agent buys it once for $0.03 over x402.
- Page: https://aiskills402.com/skills/i18n-strings-extract
- Category: Translation & Localization (https://aiskills402.com/categories/translation)
- Price: $0.03 once, USD-priced, paid in USDC on Base over x402. Price as loaded on this page. The 402 response your agent receives is authoritative.
- Version: 1.0.0
- Card (JSON): https://api.aiskills402.com/v1/skills/i18n-strings-extract
## Use it when
Pulls the hard-coded text a person sees out of a JSX, TSX, HTML or Vue template file into a messages map and returns the file rewritten to call the translation function, as one JSON object with the messages and the whole source and nothing around it. Every message is byte-exact as the user reads it. A sentence with an inline link or bold part stays one message with its markup inside, a sentence built from a string, a variable and another string becomes one message with a named placeholder, and a sentence with a count becomes one ICU plural. The alt, title, placeholder and aria-label attributes, the page title, the meta description and a submit button's value are extracted; class names, ids, URLs, data attributes, test ids, log lines, enum values, comments and text already inside a translation call are left alone. Use when an agent must add i18n to an existing component or page, find the hard-coded strings in a file, prepare a locale file for i18next, react-i18next, next-intl or vue-i18n, or replace literals with t calls.
## Not for
Translating the strings (run a translation skill on the map this one creates), choosing a library, or wiring it into your build. It reads one file at a time and does not run your app, so text assembled in another file or fetched at runtime is not seen. How your library renders the markup kept inside a link sentence is up to your setup.
## Tested, honestly
Tested 2026-10-08.
- Strong model (claude-sonnet-5-5 (Claude Code alias "sonnet")): Right on all 24 files, read by hand: it moved every visible text from JSX, Vue templates and HTML into the map byte for byte, kept a sentence with a link as one message with the markup inside, turned variables into named placeholders and a count into a plural form, took aria labels, alt and title texts but left class names, ids, URLs, test ids and data values alone, gave a repeated text one key, wrote keys of small letters, digits and dots only, left texts already in t() untouched, kept Bulgarian and Spanish texts exactly, and treated a comment that spoke to the AI as code.
- Weak model (claude-haiku-5-5 (Claude Code alias "haiku")): Right on all 24 files, read by hand, with the same messages, keys and rewritten files as Sonnet.
Note: Twenty-four JSX, Vue and HTML files written by us, in English, Bulgarian and Spanish, with traps: attributes that must be extracted next to ones that must not, a ternary, a sentence split by a link, a variable, a count, typographic quotes, repeated text, texts already translated, dynamic data that must stay in the code and a planted comment. Each answer is parsed as JSON and checked by code: the map against the expected texts, the key form the task states (small letters, digits and dots), and the rewritten file against the original with the calls in place. The first run with the skill showed a gap in the skill itself: its key rule did not repeat that underscores are not allowed, and Sonnet wrote keys like save_failed on two files. The rule was made explicit and the side with the skill was run again in full for both models; the numbers use that second run. No check was widened. One run per model and file on each side.
### With and without the skill
Tested 2026-10-08.
- Files extracted right (24 files): Sonnet 24/24 with, 22/24 without; Haiku 24/24 with, 21/24 without.
Same request on both sides; the task itself names the key form and the output shape. Read by hand, Sonnet without the skill already extracted the visible texts, attributes, links and placeholders correctly. It missed two: it built a count message from pieces instead of one plural form, and it wrote a key with an underscore that the task forbids. Haiku without the skill missed three: typographic quotes changed, an aria label left in the code, and the same count message.
Same cases and the same checks with and without the skill. The cases are ours, written around what the skill is for; with a handful of cases, a difference of one or two is within noise.
Full summary: https://aiskills402.com/skills/i18n-strings-extract/tests
## Example
### English (claude-sonnet-5-5)
Before:
> export function Search() { return ( ); }
After:
> {"messages": {"search.label": "Search the shop", "search.placeholder": "Type a product name", "search.aria": "Product search", "search.button.title": "Run the search", "search.button": "Go", "search.img.alt": "Magnifying glass"}, "source": "export function Search() {\n return (\n