commercetools-storefront

Implement B2C and B2B storefronts on commercetools with server-side data loading.

5|Updated May 27, 2026
One-click install
npx skills add https://github.com/commercetools/commercetools-ai-plugins --skill commercetools-storefront
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: commercetools-storefront
Source: https://github.com/commercetools/commercetools-ai-plugins/tree/main/.agents/plugins/commercetools/skills/commercetools-storefront
Command: npx skills add https://github.com/commercetools/commercetools-ai-plugins --skill commercetools-storefront

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill solves the challenge of building scalable, secure, and performant storefronts on commercetools by providing a framework-agnostic, server-side-first architecture that prevents common pitfalls like secret exposure and stale data.

Core Features & Use Cases

  • BFF Architecture: Enforces a secure server-side tier for all commercetools API interactions, ensuring secrets remain protected.
  • B2B & B2C Support: Provides specialized patterns for complex B2B workflows like approval rules and quotes, alongside standard B2C storefront features.
  • Framework-Neutral: Offers stack-specific adapters (e.g., Next.js, Nuxt) while maintaining a consistent, production-tested foundation for data loading, session management, and state handling.

Quick Start

Invoke the commercetools-storefront skill to search the official documentation for the best practices regarding implementing a new B2B checkout flow.

Frequently Asked Questions about commercetools-storefront

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

FAQPage Schema
How do I build a secure BFF architecture for a commercetools storefront?

A secure commercetools storefront BFF architecture enforces a server-side tier for all API interactions, ensuring secrets remain protected and preventing stale data exposure. This framework-agnostic pattern provides stack-specific adapters for consistent data loading and session management.

What is the best way to implement B2B approval workflows in a commercetools storefront?

B2B approval workflows in a commercetools storefront require strict server-side data loading and as-associate API chain patterns. This approach ensures secure domain-specific feature implementation for complex B2B processes like approval rules and quote requests.

Can I use Next.js or Nuxt with commercetools storefront patterns?

Yes, commercetools storefront patterns are framework-neutral and offer stack-specific adapters for Next.js and Nuxt. They maintain a consistent production foundation for data loading, server-managed sessions, and state handling across different frameworks.

How does server-managed session handling work in a commercetools BFF?

Server-managed sessions in a commercetools BFF handle state by enforcing a server-side-first architecture. This prevents common storefront pitfalls like secret exposure and stale data by keeping all session logic and API interactions behind the secure BFF boundary.

Do I need a server-side tier for my B2C commercetools storefront?

Yes, a server-side tier is required for B2C commercetools storefronts to ensure security and performance. The architecture mandates strict server-side data loading to prevent secret exposure and maintain production-grade performance standards.

What are the limitations of client-side data loading in a commercetools storefront?

Client-side data loading in a commercetools storefront risks exposing API secrets and serving stale data. The architecture requires adherence to strict server-side data loading and as-associate API chain patterns to prevent these security and performance pitfalls.