Skip to main content
affpapa.org
RU EN
skill CX Codex

faststore-storefront — Claude Code skill: what it does, how to install

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

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add vtex/skills --skill faststore-storefront -a claude-code
Open on GitHub

What faststore-storefront 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.

What it helps with

  • 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 for the agent

  • 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

How to install faststore-storefront

1Skills CLI (Vercel)

npx skills add vtex/skills --skill faststore-storefront -a claude-code

2Manually: put the files in place

~/.claude/skills/faststore-storefront/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/faststore-storefront/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about faststore-storefront

How do I install faststore-storefront in Claude Code?

Run npx skills add vtex/skills --skill faststore-storefront -a claude-code in your terminal.

What does the faststore-storefront skill do?

It applies official VTEX development rules, ensuring the assistant relies on React 18, proper SCSS encapsulation, and FastStore framework APIs.

What should you do if the .faststore directory breaks?

Remove the folder with rm -rf .faststore and rerun yarn dev. The CLI builds the folder again from scratch.

Similar skills

Everything for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set38

payment-idempotency A skill for payment connector code that keeps Gateway retries from hitting the acquirer twice and charging the customer again. CX Codex +1 1,100installs headless-checkout-proxy Guides agents when building cart and checkout flows for headless VTEX via a BFF. Ensures safe OrderForm proxying and strict PCI DSS compliance. CX Codex +1 1,100installs headless-bff-architecture Design a VTEX BFF for headless storefronts and keep private APIs, credentials, and shopper tokens out of browser code. CX Codex +1 1,100installs vtex-io-observability-and-ops Adds structured logs and client metrics to VTEX IO backend services, so production failures are easy to trace before and after a release. CX Codex +1 1,100installs vtex-io-service-paths-and-cdn Picks the right path prefix in service.json and matches Cache-Control to the data, so edge caching does not serve one shopper's payload to another. CX Codex +1 1,100installs vtex-io-messages-and-i18n Keeps user-facing copy in the VTEX IO messages infrastructure instead of hardcoded strings in JSX and resolvers. CX Codex +1 1,100installs vtex-io-security-boundaries Guides coding assistants when auditing route exposure and data boundaries in VTEX IO apps. Prevents tenant leaks and enforces payload validation. CX Codex +1 1,100installs vtex-io-events-and-workers Guides the agent in writing VTEX IO event handlers and workers that survive duplicate delivery. Useful when slow work should leave your HTTP routes. CX Codex +1 1,100installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor