From bigcommerce-commerce
Build headless BigCommerce storefronts using Catalyst Next.js template, GraphQL Storefront API, REST APIs, embedded checkout, and decoupled architecture patterns.
npx claudepluginhub orcaqubits/agentic-commerce-skills-plugins --plugin bigcommerce-commerceThis skill is limited to using the following tools:
**Fetch live docs**:
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Fetch live docs:
https://www.catalyst.dev/ for Catalyst documentationsite:developer.bigcommerce.com headless for headless guidesite:github.com bigcommerce catalyst for Catalyst source and examplesDecouple the frontend from BigCommerce:
BigCommerce's official Next.js reference storefront:
npx create-catalyst-storefront@latest my-store
Prompts for:
my-store/
├── app/ # Next.js App Router pages
│ ├── (default)/ # Default locale group
│ │ ├── page.tsx # Homepage
│ │ ├── product/ # Product pages
│ │ ├── category/ # Category pages
│ │ ├── cart/ # Cart page
│ │ └── account/ # Customer account
│ └── layout.tsx # Root layout
├── client/ # BigCommerce API client
│ ├── queries/ # GraphQL queries
│ └── mutations/ # GraphQL mutations
├── components/ # React components
├── lib/ # Utilities
├── public/ # Static assets
├── .env.local # Environment variables
├── next.config.js # Next.js config
├── tailwind.config.js # Tailwind config
└── package.json
BIGCOMMERCE_STORE_HASH=your_store_hash
BIGCOMMERCE_ACCESS_TOKEN=your_access_token
BIGCOMMERCE_CHANNEL_ID=1
BIGCOMMERCE_STOREFRONT_TOKEN=your_storefront_token
BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN=your_token
Fetch data in Next.js Server Components using the GraphQL client:
// app/product/[slug]/page.tsx
async function ProductPage({ params }: { params: { slug: string } }) {
const product = await getProduct({ path: `/${params.slug}` });
return <ProductDetail product={product} />;
}
For interactive features (cart, search-as-you-type):
Embed BigCommerce's checkout in your headless site:
redirect_urls.checkout_url@bigcommerce/checkout-sdk embedCheckout()Full API-driven checkout:
BigCommerce + headless enables composable architecture:
Fetch the Catalyst documentation and BigCommerce headless guide for exact setup steps, GraphQL queries, and current best practices before implementing.