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

vtex-io-storefront-theme-app — Claude Code skill: guide

Assists with structuring VTEX IO storefront theme apps by composing block trees, declaring custom routes, and wiring templates for the merchant Site Editor.

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

What vtex-io-storefront-theme-app does

This skill guides the architecture of VTEX IO storefront theme packages. A theme app relies on declarative JSON rather than React components. It arranges pages using files inside store/, such as store/blocks.json and store/routes.json. Omitting the store builder in manifest.json causes the platform to ignore every block layout completely.

The instructions enforce correct block references across native templates like store.home and store.product. Every block identifier must resolve to an installed dependency with matching major version bounds, preventing runtime Missing block failures in GraphQL. The skill also separates concerns: React code stays in component packages, while the theme app controls layout hierarchies and store/contentSchemas.json.

What it helps with

  • compose block hierarchies for native pages like store.product
  • define custom storefront routing inside store/routes.json
  • extend a base theme like vtex.store-theme via manifest.json
  • prevent missing block errors by matching dependency major versions

Example prompts for the agent

  • Inspect store/blocks.json to verify all block IDs match our dependencies
  • Add a custom storefront route bound to store.custom in store/routes.json
  • Set up the block layout for store.search using flex-layout.row

How to install vtex-io-storefront-theme-app

1Skills CLI (Vercel)

npx skills add vtex/skills --skill vtex-io-storefront-theme-app -a claude-code

2Manually: put the files in place

~/.claude/skills/vtex-io-storefront-theme-app/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/vtex-io-storefront-theme-app/

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

Questions about vtex-io-storefront-theme-app

How to install vtex-io-storefront-theme-app in Claude Code?

Run npx skills add vtex/skills --skill vtex-io-storefront-theme-app -a claude-code.

What does vtex-io-storefront-theme-app do?

It defines rules for assembling VTEX IO storefront themes, covering route declarations, block trees, and Site Editor schemas.

Should React components be placed inside a theme app?

No. A theme app composes blocks through JSON files under store/, while actual React code belongs in separate component applications.

Similar skills

All skills for Frontend and UI →
storefront-best-practices medusajs This skill guides storefront work, from product pages and carts to checkout flows. Use it when building or changing an online store interface. CX Codex +1 4,600installs saleor-storefront saleor Provides guidelines and GraphQL patterns for building Saleor storefronts. Helps handle checkout flows, multi-channel setups, and variant selection in AI coding agents. CX Codex +1 2,300installs storefront-builder saleor Walks an agent through building a Saleor storefront: GraphQL wiring, design, then catalog with variant selection. Useful when the frontend exists but the data layer does not. CX Codex +1 384installs shopify-storefront-graphql official Shopify Writes GraphQL queries and mutations against the Shopify Storefront API, searching the docs first and validating the code before it reaches you. CX Codex GP ChatGPT 1installs amazon-storefront-design nexscope-ai A skill that walks you through building an Amazon Store: page layouts, brand story, shoppable images and conversion work. Useful when the storefront needs a plan instead of guesswork. CX Codex +1 1,100installs preline-theme-generator htmlstreamofficial Generates custom Preline UI theme CSS from brand colors or mood descriptions. Runs entirely through local scripts after install. CX Codex +1 1,300installs

From the same set43

vtex-io-auth-and-policies This skill guides VTEX IO permission design for integrations, protected routes, and manifest policies. Use it when access boundaries need review or change. CX Codex +1 1,100installs vtex-io-admin-react Guides coding agents in building VTEX IO admin pages with React, enforcing official design systems, bounded tables, and predictable feedback states. CX Codex +1 1,100installs vtex-io-http-routes Guides the design of HTTP endpoints in a VTEX IO backend service: route boundaries, middleware chains, request validation and response shape. CX Codex +1 1,100installs marketplace-fulfillment Helps an agent build the seller side of VTEX fulfillment: simulation, order reservations, dispatch, and invoice and tracking calls to OMS. CX Codex +1 1,000installs marketplace-order-hook Guides VTEX order integrations built with Feed v3 or Hook. Use it when a webhook must validate events, fetch order data, and avoid duplicate processing. CX Codex +1 1,000installs marketplace-catalog-sync Guides the agent while you build a seller connector that pushes SKUs into a VTEX marketplace and keeps price and stock in step. CX Codex +1 1,000installs payment-provider-protocol Assists with building and debugging VTEX Payment Provider Protocol connectors. Enforces endpoint routing, payload schemas, and response rules for homologation. CX Codex +1 1,000installs marketplace-rate-limiting Teaches your agent to handle VTEX API 429s: exponential backoff with jitter, rate limit headers, circuit breaker and request queuing. CX Codex +1 1,000installs

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