vtex-io-render-runtime-and-blocks

Validate VTEX IO React component mappings against store/interfaces.json and theme blocks.

Updated Mar 27, 2026

Search Tags:#theme integration #vtex-io #interfaces.json #store framework #react blocks #block composition

Ready to run

npx skills add https://github.com/exilonX/ap2 --skill vtex-io-render-runtime-and-blocks-exilonx

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vtex-io-render-runtime-and-blocks
Source: https://github.com/exilonX/ap2/tree/main/.agents/skills/vtex-io-render-runtime-and-blocks
Command: npx skills add https://github.com/exilonX/ap2 --skill vtex-io-render-runtime-and-blocks-exilonx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents broken or non-configurable storefront blocks by aligning React component render/runtime wiring with VTEX Store Framework block registration and theme block references.

Core Features & Use Cases

Block registration in store/interfaces.json: Ensures every Store Framework-visible React component is declared with the correct block ID and component mapping.
Correct block-to-React mapping: Verifies that component values point to real React entry exports so theme configuration actually works.
Intentional composition contracts: Defines when a block renders nested children versus named block slots, with allowed child blocks matching real layout expectations.

Use cases include reviewing that a theme can reference a block, fixing missing interfaces.json mappings, and correcting composition/allowed children so block nesting behaves predictably.

Quick Start

Use this skill to review a VTEX IO storefront component’s store/interfaces.json entry against the actual React export and intended composition model.

Frequently Asked Questions about vtex-io-render-runtime-and-blocks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I expose a React component as a VTEX IO Store block?▼

To expose a React component as a VTEX IO Store block, you must register it in `store/interfaces.json` with a matching block ID and ensure the component mapping points to the actual React export. This enables theme configuration and storefront rendering.

Why is my VTEX Store Framework block not rendering on the storefront?▼

A VTEX Store Framework block fails to render when its `store/interfaces.json` mapping is missing, the component value does not match a real React entry export, or theme block references are incorrect. Validating these mappings ensures proper block registration and rendering.

How do I configure allowed child blocks in VTEX IO interfaces.json?▼

Configuring allowed child blocks in VTEX IO interfaces.json requires defining composition contracts and allowed settings that reflect runtime expectations. You must specify whether a block renders nested children or named block slots to ensure predictable block nesting behavior.

What is block composition in the VTEX Store Framework?▼

Block composition in the VTEX Store Framework is the mechanism defining how blocks render nested children versus named block slots. It uses `store/interfaces.json` to establish allowed child blocks, ensuring theme block nesting behaves predictably during storefront rendering.

Do I need React to use VTEX IO Store Framework blocks?▼

Yes, VTEX IO Store Framework blocks require React because the framework maps block IDs from `store/interfaces.json` directly to real React entry exports. Without a React component export, theme configuration cannot resolve and the block will not render.

How to fix missing interfaces.json mappings for VTEX storefront components?▼

To fix missing interfaces.json mappings for VTEX storefront components, verify that every visible React component is declared with the correct block ID and component mapping. Ensure block IDs match theme usage and component fields resolve to real React entry exports.