vtex-io-render-runtime-and-blocks — Claude Code skill: how to install
Teaches the agent to expose React components as Store Framework blocks in VTEX IO: store/interfaces.json entries, composition and theme wiring.
npx skills add vtex/skills --skill vtex-io-render-runtime-and-blocks -a claude-codeWhat vtex-io-render-runtime-and-blocks does
This skill covers how a React component under react/ turns into a block that a Store Framework theme can use. Each block gets an entry in store/interfaces.json. The key is the block ID that themes list in store/*.json, and component names the React entry, such as ProductReviews or a nested product/ProductReviews.
For nesting, composition picks the model. With children, the component renders nested blocks itself through props.children. With blocks, it exposes named slots that Store Framework controls. allowed limits what can go inside. A simple block can skip composition entirely.
Versions are the trap. A block ID belongs to the major version of the app that declares it, so a theme pinned to acme.product-widgets at 0.x will not find a block added in 5.x. The page then fails with Missing block [email protected]:acme-related-products. Component internals, admin screens and backend routes are out of scope.
What it helps with
- register a
ProductReviewscomponent as a block instore/interfaces.json - check that
componentpoints to a real file underreact/ - set up nested blocks with
compositionandallowed - trace a
Missing blockerror after a theme dependency change - wire an existing block into a page through
blocksinstore/home.json
Example prompts for the agent
- Register
ProductReviewsas a Store Framework block instore/interfaces.json - Check that every block in
store/interfaces.jsonmaps to a real file inreact/ - The page throws
Missing block [email protected]:acme-related-products, sort out the block version
How to install vtex-io-render-runtime-and-blocks
1Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-render-runtime-and-blocks -a claude-code2Manually: put the files in place
~/.claude/skills/vtex-io-render-runtime-and-blocks/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/vtex-io-render-runtime-and-blocks/
1Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-render-runtime-and-blocks -a codex2Manually: put the files in place
.agents/skills/vtex-io-render-runtime-and-blocks/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-render-runtime-and-blocks -a cursor2Manually: put the files in place
.cursor/skills/vtex-io-render-runtime-and-blocks/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install vtex/skills vtex-io-render-runtime-and-blocks2Manually: put the files in place
.github/skills/vtex-io-render-runtime-and-blocks/SKILL.md1Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-render-runtime-and-blocks -a gemini-cli2Platform CLI
gemini skills install https://github.com/vtex/skills --path skills/vtex-io-render-runtime-and-blocksManually: put the files in place
.devin/skills/vtex-io-render-runtime-and-blocks/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add vtex/skills --skill vtex-io-render-runtime-and-blocks -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-render-runtime-and-blocks
How do I install vtex-io-render-runtime-and-blocks in Claude Code?
Run npx skills add vtex/skills --skill vtex-io-render-runtime-and-blocks -a claude-code. The skill file lands in ~/.claude/skills/vtex-io-render-runtime-and-blocks/SKILL.md.
What does vtex-io-render-runtime-and-blocks do?
It helps the agent connect React components to Store Framework: it adds blocks to store/interfaces.json, checks component against files in react/, and sets up composition and allowed.
Why does VTEX IO show a Missing block error?
A block ID is tied to the major version of the app that declares it. If the theme depends on 0.x and the block was added in 5.x, the resolver cannot find it. Fix the dependency range or move the block declaration.
