# faststore-storefront

Guides AI coding agents through VTEX FastStore storefront development: React 18 components, section overrides, SCSS styling constraints, and CMS schema sync.

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

## What it does

The skill instructs your coding assistant to follow VTEX engineering practices when building FastStore storefronts. It enforces FastStore architecture over direct Next.js API usage and prevents modifying the `.faststore/` directory, which gets regenerated during builds. Section overrides must use `getOverriddenSection` from `@faststore/core` and export only as default within `src/components/index.tsx`.

Styling rules enforce SCSS modules wrapped inside `@layer components` to avoid specificity collisions with theme tokens. Directly importing `@faststore/ui` styles at the root level breaks CSS Modules purity because of internal `[data-fs-*]` selectors. Before creating new files, the assistant runs `ls` in the shell to detect naming collisions. Schema synchronization relies on `faststore cms-sync` and requires a globally installed VTEX CLI.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

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

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

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

## When to use it
- override FastStore sections with `getOverriddenSection`
- structure SCSS modules without breaking CSS purity rules
- register CMS component schemas with matching component keys
- recover from broken builds by resetting `.faststore/`

## Example prompts
- Create an override for the ProductDetails section using `getOverriddenSection`
- Style this component using SCSS modules inside `@layer components`
- Check existing component files and prepare the schema for `faststore cms-sync`

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