skills.rest
exilonX
exilonXCOMMUNITY
Explore all skills by this author →
GitHub

vtex-io-storefront-react

Develops WCAG-compliant, cross-browser compatible websites and web applications using modern HTML, CSS, and JavaScript frameworks.

Updated Mar 27, 2026
Search Tags:#i18n#vtex#css-handles#react storefront#browser safety#store framework
One-click install
npx skills add https://github.com/exilonX/ap2 --skill vtex-io-storefront-react-exilonx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vtex-io-storefront-react
Source: https://github.com/exilonX/ap2/tree/main/.agents/skills/vtex-io-storefront-react
Command: npx skills add https://github.com/exilonX/ap2 --skill vtex-io-storefront-react-exilonx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents common VTEX IO storefront React mistakes by guiding you to build browser-safe, theme-compatible storefront components that shoppers can reliably use across contexts and locales.

Core Features & Use Cases

  • Storefront React structure & behavior: Create shopper-facing UI components under the react builder that handle loading, empty, and unavailable product/search contexts.
  • Theme-safe styling with css-handles: Expose all styling through vtex.css-handles contracts instead of hardcoded global class names.
  • Correct storefront integration: Use storefront context hooks and data patterns (for example, useProduct, useRuntime, useOrderForm) without making unsafe browser assumptions.

Quick Start

Use this skill when you are implementing a shopper-facing React component in a VTEX IO Store Framework app and need to review it for css-handle compliance, browser safety, and localized shopper-facing copy.

Frequently Asked Questions about vtex-io-storefront-react

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

FAQPage Schema
How do I style VTEX IO storefront React components without breaking theme compatibility?▼

To style VTEX IO storefront React components safely, expose all styling through `vtex.css-handles` contracts instead of hardcoded global class names. This ensures your shopper-facing UI remains theme-compatible across different storefront contexts.

Why does my VTEX IO React component fail in the browser during storefront rendering?▼

Your VTEX IO React component likely fails in the browser because it includes Node or server-only dependencies. Storefront components must be browser-safe, avoiding unsafe Node/server-only dependencies during browser execution to prevent rendering failures.

How do I localize shopper-facing copy in VTEX Store Framework React apps?▼

To localize shopper-facing copy in VTEX Store Framework React apps, use localized message IDs instead of hardcoded strings. This ensures your storefront UI widgets, banners, and product presentation components remain fully localizable across different locales.

What is the correct way to use storefront data patterns in VTEX IO React components?▼

The correct way to use storefront data patterns in VTEX IO React components is by using storefront context hooks like `useProduct`, `useRuntime`, and `useOrderForm` without making unsafe browser assumptions. This handles loading, empty, and unavailable contexts properly.

Can I use server-side Node modules in VTEX IO react builder components?▼

No, you cannot use server-side Node modules in VTEX IO `react` builder components. Shopper-facing storefront components run in the browser execution environment, so you must avoid Node/server-only dependencies to maintain browser safety.

Related Skills

Explore More Software Engineering Skills→
vtexdocsvtexdocs
39

vtex-io-app-structure

Align VTEX IO app scaffolding with manifest, builders, and policy best practices.

Official
Advanced
vtexvtex
39

vtex-io-storefront-react

Design and document shopper-facing React components for VTEX IO storefronts.

Official
Intermediate
vtexdocsvtexdocs
39

vtex-io-react-apps

Builds VTEX IO React components for storefront blocks and admin panels using interfaces.json and GraphQL data fetching via useQuery.

Official
Advanced
exilonXexilonX

vtex-io-react-apps

Set up VTEX IO React apps with interfaces, schemas, and styling.

Community
Intermediate