# vtex-io-storefront-react

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

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1200 installs · ★ 46
- Author: vtex
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/vtex/skills/tree/HEAD/skills/vtex-io-storefront-react/SKILL.md
- Updated: 2026-10-14
- HTML: https://affpapa.org/en/nevibecode/skills/vtex-io-storefront-react

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add vtex/skills --skill vtex-io-storefront-react -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/vtex-io-storefront-react/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/vtex-io-storefront-react/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add vtex/skills --skill vtex-io-storefront-react -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/vtex-io-storefront-react/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add vtex/skills --skill vtex-io-storefront-react -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/vtex-io-storefront-react/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install vtex/skills vtex-io-storefront-react
```

2. **Manually: put the files in place**
- File: `.github/skills/vtex-io-storefront-react/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add vtex/skills --skill vtex-io-storefront-react -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/vtex/skills --path skills/vtex-io-storefront-react
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/vtex-io-storefront-react/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add vtex/skills --skill vtex-io-storefront-react -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/vtex/skills/tree/HEAD/skills/vtex-io-storefront-react/SKILL.md

## When to use it
- 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
- 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.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [vtex/skills](https://affpapa.org/en/nevibecode/by/vtex/skills.md) — 38 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md