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

vtex-io-storefront-react — Claude Code skill: how to install

Guides coding of shopper-facing VTEX IO React components. Enforces vtex.css-handles, localized strings, and storefront hooks while preventing Node-only runtime calls.

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

What vtex-io-storefront-react does

This skill guides assistants building shopper-facing Store Framework interfaces inside the react/ directory. It enforces the vtex.css-handles contract so merchants can style blocks without modifying component markup. Direct, arbitrary class names in JSX are treated as defects. Customer-visible text must use message IDs rather than raw hardcoded strings.

Storefront components should stay lean and props-driven. Store state belongs in containers or hooks such as useProduct, useOrderForm, and useRuntime rather than ad hoc client-side API requests. Importing Node-only packages like fs or touching window without safety guards will break server-side rendering during page delivery. Accessible markup is also required, which rules out clickable div tags.

The skill strictly excludes backend services, GraphQL schemas, admin pages, and block registration contracts. Those areas rely on separate VTEX IO specifications.

What it helps with

  • expose storefront component styles via vtex.css-handles
  • retrieve store data through hooks like useProduct or useOrderForm
  • block server-only Node.js imports inside browser components
  • replace static JSX text with internationalization message IDs
  • enforce accessible HTML tags instead of clickable div elements

Example prompts for the agent

  • Build a storefront banner component in react/Banner.tsx using vtex.css-handles.
  • Review our product card component to replace direct API calls with useProduct.
  • Create a newsletter signup form with semantic buttons and i18n message IDs.

How to install vtex-io-storefront-react

1Skills CLI (Vercel)

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

2Manually: put the files in place

~/.claude/skills/vtex-io-storefront-react/SKILL.md

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

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

Questions about vtex-io-storefront-react

How do I install vtex-io-storefront-react in Claude Code?

Run npx skills add vtex/skills --skill vtex-io-storefront-react -a claude-code in your project terminal.

What does vtex-io-storefront-react do?

It instructs coding assistants how to write and review shopper-facing Store Framework components. The skill mandates vtex.css-handles, enforces i18n string handling, and prevents runtime crashes from server-only imports.

Can I use this skill for VTEX IO admin panels or backend services?

No. It strictly excludes admin UI, GraphQL schemas, service runtime routes, and block registration contracts. Those areas rely on separate VTEX IO skills.

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

vtex-io-react-apps A skill for VTEX IO frontend work: it guides React components under the react builder, theme block registration and Site Editor setup. CX Codex +1 1,500installs architecture-well-architected-commerce Reviews cross-cutting VTEX commerce architecture against three core pillars. It guides decisions between standard platform capabilities and custom extensions. CX Codex +1 1,200installs vtex-io-application-performance Guides performance work on VTEX IO Node and .NET services, including cache choices, parallel client calls, and avoiding repeated work. CX Codex +1 1,200installs vtex-io-app-settings Helps an agent define settingsSchema for a VTEX IO app and read the values safely in code. Useful when merchants should change app behavior themselves. CX Codex +1 1,200installs vtex-io-graphql-api Guides GraphQL schema and resolver work in VTEX IO apps. Use it when exposing app data through queries or mutations. CX Codex +1 1,200installs vtex-io-masterdata Walks you through Master Data v2 in VTEX IO apps and pushes back when the data belongs somewhere else. CX Codex +1 1,200installs vtex-io-service-apps Guides backend service development under node/ in VTEX IO apps. Configures routes, middleware chains, and @vtex/api clients for background tasks or APIs. CX Codex +1 1,200installs headless-caching-strategy Sets caching rules and TTL values for headless VTEX storefronts. Keeps public endpoints fast while preventing accidental caching of sensitive shopper data. 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