Skip to main content
affpapa.org
RU EN
skill CX Codex

vtex-io-messages-and-i18n — Claude Code skill for VTEX IO i18n

Keeps user-facing copy in the VTEX IO messages infrastructure instead of hardcoded strings in JSX and resolvers.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add vtex/skills --skill vtex-io-messages-and-i18n -a claude-code
Open on GitHub

What vtex-io-messages-and-i18n does

Reach for this skill when a VTEX IO app has to show translated text. It walks through the messages builder, the /messages/*.json files, context.json, message usage on the frontend, and the way an app hooks into vtex.messages for translation at runtime.

The skill ships decision rules plus hard constraints. Message keys stay app-scoped and declared up front rather than invented inside components. Storefront keys get a store/... prefix, Admin and Site Editor keys get admin/.... In context.json they sit as a flat messageId -> description map. On the backend and in GraphQL, translate only where the app boundary genuinely needs localized output.

Translation files are not a config store. Put an API URL, a credential or a business rule in there and the skill stops you, pointing to app settings or a content-specific mechanism instead. Keep a full en.json around as the fallback even if most users speak another language, so message resolution has a stable base.

What it helps with

  • move button labels and headings out of JSX into message files
  • declare message keys in context.json without duplicates
  • separate storefront and admin keys with prefixes
  • keep configuration and secrets out of translation files
  • wire app translations into vtex.messages

Example prompts for the agent

  • Check that every user-facing string in this component comes from messages, not from literals
  • Add the key admin/my-app.save to context.json and en.json
  • Review the resolvers and tell me where translation belongs at the app boundary and where plain data is enough

How to install vtex-io-messages-and-i18n

1Skills CLI (Vercel)

npx skills add vtex/skills --skill vtex-io-messages-and-i18n -a claude-code

2Manually: put the files in place

~/.claude/skills/vtex-io-messages-and-i18n/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/vtex-io-messages-and-i18n/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about vtex-io-messages-and-i18n

How do I install vtex-io-messages-and-i18n in Claude Code?

Run npx skills add vtex/skills --skill vtex-io-messages-and-i18n -a claude-code. The skill file lands at ~/.claude/skills/vtex-io-messages-and-i18n/SKILL.md.

What does vtex-io-messages-and-i18n do?

It guides localization in VTEX IO apps through the messages builder: file layout, key naming rules, and integration with vtex.messages.

Can message files hold app configuration?

No. The skill limits them to localized copy and sends API URLs, credentials and business rules to app settings or a dedicated mechanism.

Similar skills

Everything for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set38

headless-bff-architecture Design a VTEX BFF for headless storefronts and keep private APIs, credentials, and shopper tokens out of browser code. CX Codex +1 1,100installs vtex-io-observability-and-ops Adds structured logs and client metrics to VTEX IO backend services, so production failures are easy to trace before and after a release. CX Codex +1 1,100installs faststore-storefront Guides AI coding agents through VTEX FastStore storefront development: React 18 components, section overrides, SCSS styling constraints, and CMS schema sync. CX Codex +1 1,100installs vtex-io-service-paths-and-cdn Picks the right path prefix in service.json and matches Cache-Control to the data, so edge caching does not serve one shopper's payload to another. CX Codex +1 1,100installs vtex-io-security-boundaries Guides coding assistants when auditing route exposure and data boundaries in VTEX IO apps. Prevents tenant leaks and enforces payload validation. CX Codex +1 1,100installs vtex-io-events-and-workers Guides the agent in writing VTEX IO event handlers and workers that survive duplicate delivery. Useful when slow work should leave your HTTP routes. CX Codex +1 1,100installs vtex-io-service-configuration-apps Guides the agent through building VTEX IO configuration apps using the configuration builder. Helps inject decoupled workspace settings into service runtimes. CX Codex +1 1,100installs vtex-io-app-contract Checks the VTEX IO app contract in manifest.json, including builders and dependency links. Use it when creating, splitting, or publishing apps. CX Codex +1 1,100installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor