skills.rest
exilonX
exilonXCOMMUNITY
Explore all skills by this author →
GitHub

faststore-storefront

Guide React and VTEX FastStore storefront development with CMS schema generation.

Updated Mar 27, 2026
Search Tags:#react 18#vtex#faststore#cms schema#section overrides#scsc modules
One-click install
npx skills add https://github.com/exilonX/ap2 --skill faststore-storefront-exilonx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: faststore-storefront
Source: https://github.com/exilonX/ap2/tree/main/.agents/skills/faststore-storefront
Command: npx skills add https://github.com/exilonX/ap2 --skill faststore-storefront-exilonx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a consistent, guardrailed workflow for developing VTEX FastStore storefronts so changes stay correct, maintainable, and compatible with the FastStore framework.

Core Features & Use Cases

  • Enforce correctness and safety: prevents misleading technical guidance, missing assumptions, and framework bypasses (e.g., no direct Next.js APIs, no edits to generated .faststore/ output).
  • Standardize FastStore development workflow: aligns TypeScript/React 18 usage, component registration, CMS override patterns, and required schema-generation/upload steps.
  • Reduce integration mistakes: ensures CMS sections don’t receive arbitrary props and that CMS schema keys match the registered section exports.
  • Harden styling practices: mandates SCSS modules, wrapper-class scoping, and FastStore design-token usage.

Quick Start

Follow the rules in this Skill when you start building or overriding a FastStore storefront section, and when you finish CMS edits run schema generation and upload exactly as specified.

Frequently Asked Questions about faststore-storefront

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a FastStore section override in VTEX?▼

FastStore section overrides require registering the React component correctly and ensuring CMS schema keys match the registered section exports to avoid integration mistakes and maintain framework compatibility.

Why are my CMS sections not receiving props in FastStore?▼

FastStore CMS sections cannot receive arbitrary props. You must enforce framework constraints by ensuring CMS schema keys match the registered section exports and avoiding direct prop passing to maintain compatibility.

What is the correct way to style components in a FastStore storefront?▼

FastStore styling mandates using SCSS modules with wrapper-class scoping and FastStore design tokens. This ensures consistent visual output and prevents style leakage across storefront components.

Do I need to run schema generation after editing CMS sections in FastStore?▼

Yes, after finishing CMS edits in FastStore, you must run schema generation and upload commands exactly as specified to ensure the storefront reflects the updated section configurations correctly.

Can I use direct Next.js APIs when developing a VTEX FastStore storefront?▼

No, developing a FastStore storefront prevents framework bypasses like using direct Next.js APIs or editing the generated `.faststore/` output to ensure changes remain correct and maintainable.

How do I build a new CMS-backed section for a VTEX FastStore storefront?▼

Building a CMS-backed section in FastStore involves creating the React 18 component, applying SCSS module scoping with design tokens, and generating the mandatory CMS schema before uploading.

Related Skills

Explore More Software Engineering Skills→
WilljeanneWilljeanne

faststore-storefront

Enforce FastStore development conventions for TypeScript and React storefronts.

Community
Advanced
vtexvtex
39

faststore-data-fetching

Extend the FastStore GraphQL API with typeDefs and resolvers for custom data sources.

Official
Advanced
taurgistaurgis
27

sfcc-sfra-scss

Organize SFRA SCSS styling with canonical directory structure and BEM naming.

Community
Advanced
OrcaQubitsOrcaQubits
35

bc-headless

Develop headless BigCommerce storefronts with Next.js and GraphQL Storefront API.

Official
Intermediate