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

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1500 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-react-apps/SKILL.md
- Updated: 2026-10-14
- HTML: https://affpapa.org/en/nevibecode/skills/vtex-io-react-apps

## What it does

The skill kicks in when you write components in `react/` or describe blocks in `store/` for a VTEX IO app. It explains how a block name maps to a component file through `interfaces.json`, how to expose props to Site Editor with `contentSchemas.json`, and how storefront styling goes through `css-handles`.

Admin panels get a stricter rule: build them from `vtex.styleguide`. Imports of Material UI, Chakra UI or Ant Design trigger a warning, and an app with a third-party admin UI will not clear VTEX App Store review. Data should arrive through GraphQL queries, and user-facing text belongs in `react-intl` with the `messages` builder rather than hardcoded strings.

Watch the versioning detail. Merchant edits made in Site Editor are keyed to the MAJOR version of the app that declared the block. Bump that major and the resolver stops seeing those edits until someone migrates them with the `updateThemeIds` mutation in `vtex.pages-graphql@2.x`. Backend services, GraphQL resolvers and manifest configuration are out of scope here — the same collection ships separate skills for those.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

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

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add vtex/skills --skill vtex-io-react-apps -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-react-apps/SKILL.md

## When to use it
- build a storefront component and wire it up as a theme block
- expose component props for editing in Site Editor
- build an admin panel from VTEX Styleguide components
- move interface strings into `messages` instead of hardcoding them
- check that a block has an entry in `interfaces.json`

## Example prompts
- Create a `product-reviews` block and register it in `store/interfaces.json`
- Add `contentSchemas.json` so the banner title and colour can be edited in Site Editor
- Rewrite the review moderation table with `vtex.styleguide` components

## 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