# sales-app-extensibility

Guides the creation, styling, and deployment of VTEX Sales App extensions. Works through a seven-stage sequence from project checks to final delivery.

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

## What it does

This skill guides the scaffolding of user interface widgets for VTEX Sales App. It supports insertion points inside shopping carts, product detail views, and navigation drawers. Work proceeds through fixed phases. First comes project validation, followed by scoping, planning, asset generation, documentation, and production builds. Styles must stay in basic `.css` files rather than CSS modules.

Strict architectural constraints apply throughout the workflow. Registered extension components must always output a `JSX.Element` rather than `null`. If data is absent, the code returns an empty fragment `<></>` to prevent TypeScript compile errors. Handlers for hooks like `useCartItem` must guard every optional field before reading values.

Without a configured FastStore setup and a Sales App workspace, code generation halts immediately.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add vtex/skills --skill sales-app-extensibility -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add vtex/skills --skill sales-app-extensibility -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/sales-app-extensibility/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add vtex/skills --skill sales-app-extensibility -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/sales-app-extensibility/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install vtex/skills sales-app-extensibility
```

2. **Manually: put the files in place**
- File: `.github/skills/sales-app-extensibility/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add vtex/skills --skill sales-app-extensibility -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/vtex/skills --path skills/sales-app-extensibility
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/sales-app-extensibility/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

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

## When to use it
- scaffold UI widgets for VTEX Sales App cart and PDP slots
- bind React hooks like useCart and usePDP to supported extension points
- connect external endpoints through the VTEX IO server proxy
- prevent TypeScript compile crashes caused by null returns in extensions

## Example prompts
- Create a promotional banner extension for cart.order-summary.after
- Add a custom warranty block to the product page via pdp.sidebar.before
- Generate a menu item extension linked to external customer data

## 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) — 43 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