vtex-io-react-apps — Claude Code skill for VTEX IO React
A skill for VTEX IO frontend work: it guides React components under the react builder, theme block registration and Site Editor setup.
npx skills add vtex/skills --skill vtex-io-react-apps -a claude-codeWhat vtex-io-react-apps does
The skill kicks in when you write components in react/ or describe blocks in store/ for a VTEX IO app. It explains how a block name maps to a component file through interfaces.json, how to expose props to Site Editor with contentSchemas.json, and how storefront styling goes through css-handles.
Admin panels get a stricter rule: build them from vtex.styleguide. Imports of Material UI, Chakra UI or Ant Design trigger a warning, and an app with a third-party admin UI will not clear VTEX App Store review. Data should arrive through GraphQL queries, and user-facing text belongs in react-intl with the messages builder rather than hardcoded strings.
Watch the versioning detail. Merchant edits made in Site Editor are keyed to the MAJOR version of the app that declared the block. Bump that major and the resolver stops seeing those edits until someone migrates them with the updateThemeIds mutation in [email protected]. Backend services, GraphQL resolvers and manifest configuration are out of scope here — the same collection ships separate skills for those.
What it helps with
- build a storefront component and wire it up as a theme block
- expose component props for editing in Site Editor
- build an admin panel from VTEX Styleguide components
- move interface strings into
messagesinstead of hardcoding them - check that a block has an entry in
interfaces.json
Example prompts for the agent
- Create a
product-reviewsblock and register it instore/interfaces.json - Add
contentSchemas.jsonso the banner title and colour can be edited in Site Editor - Rewrite the review moderation table with
vtex.styleguidecomponents
How to install vtex-io-react-apps
1Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-react-apps -a claude-code2Manually: put the files in place
~/.claude/skills/vtex-io-react-apps/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/vtex-io-react-apps/
1Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-react-apps -a codex2Manually: put the files in place
.agents/skills/vtex-io-react-apps/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-react-apps -a cursor2Manually: put the files in place
.cursor/skills/vtex-io-react-apps/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install vtex/skills vtex-io-react-apps2Manually: put the files in place
.github/skills/vtex-io-react-apps/SKILL.md1Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-react-apps -a gemini-cli2Platform CLI
gemini skills install https://github.com/vtex/skills --path skills/vtex-io-react-appsManually: put the files in place
.devin/skills/vtex-io-react-apps/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-react-apps -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about vtex-io-react-apps
How do I install vtex-io-react-apps in Claude Code?
Run npx skills add vtex/skills --skill vtex-io-react-apps -a claude-code. The skill file lands at ~/.claude/skills/vtex-io-react-apps/SKILL.md.
What does vtex-io-react-apps do?
It helps you write VTEX IO React components: mapping theme blocks to files in react/, setting up interfaces.json and contentSchemas.json, and picking the right styling approach for storefront and admin UIs.
How is it different from the other skills in vtex/skills?
This one covers frontend work on the react builder. Backend services, GraphQL schemas and resolvers, and manifest or builder setup each have their own skill in the collection.
