storefront-next

What storefront-next does, in the publisher's words

From the project README, punctuation lightly normalized · Open the README on GitHub →

Links

• github.com/SalesforceCommerceCloud/b2c-developer-tooling
• https://salesforcecommercecloud.github.io/b2c-developer-tooling/
• skills/storefront-next/plugin.json (manifest)

Skills · 18

sfnext-authentication

Implement authentication in Storefront Next using split-cookie architecture, SLAS tokens, and auth middleware. Use when accessing user identity in loaders, detecting guest vs registered users, using getAuth or useAuth, or understanding session management and token refresh.

sfnext-components

Build UI components in Storefront Next using createPage HOC, Suspense/Await patterns, shadcn/ui, and Tailwind CSS v4. Use when creating page components, adding Suspense boundaries, integrating shadcn/ui, styling with Tailwind, or organizing component files. Covers server vs client rendering pattern…

sfnext-configuration

Manage Storefront Next application configuration using config.server.ts, schema types, environment variables, and multi-site setup. Use when editing config.server.ts, adding PUBLIC__ environment variables, using useConfig or getConfig, or configuring multiple sites. NOT for initial project creation…

sfnext-create-component

Author a new Storefront Next design-system component the right way, pick the correct layer (primitive vs composite), reuse-or-extend before creating, define CVA variants bound to semantic tokens, add data-slot attributes, satisfy the accessibility checklist, and ship a Storybook story. Use when as…

sfnext-create-vertical

Create a new Storefront Next vertical (brand theme / storefront variant) by editing brand design tokens, typography, dark mode, and the Figma kit. Use when asked to create a new vertical, brand, theme, or storefront variant, re-skin the storefront, or change the brand palette. Covers the brand.css…

sfnext-custom-apis

End-to-end workflow for consuming custom SCAPI endpoints from a Storefront Next project, adding them as typed clients via `b2c sfnext scapi add custom`, discovering their schema, and calling them from loaders/actions/useScapiFetcher. Use this skill whenever the user wants to call a custom API from…

sfnext-data-fetching

Implement server-side data fetching in Storefront Next using loaders, actions, and useScapiFetcher. Use when writing loader functions, making SCAPI calls, handling form submissions, or implementing interactive data fetching. Covers synchronous loaders, streaming patterns, createApiClients, and para…

sfnext-deployment

Build and deploy Storefront Next storefronts to Managed Runtime (MRT) using the sfnext CLI. Use when running production builds, pushing bundles to MRT with sfnext push, configuring deployment environments, or deploying Page Designer cartridges. This is for Storefront Next deployment: for general M…

sfnext-extensions

Build extensions for Storefront Next using target-config.json, target points, extension routes, and translation namespaces. Use when creating modular features, inserting components into UI targets, adding extension routes, adding a section to an existing page, or using SFDC_EXT_ integration markers…

sfnext-hybrid-storefronts

Implement hybrid storefronts that run Storefront Next alongside SFRA or SiteGenesis. Use when planning gradual migration from SFRA, configuring hybrid proxy for local development, setting up session bridging between storefronts, or routing traffic between old and new implementations.

sfnext-i18n

Implement internationalization in Storefront Next using i18next with useTranslation for components and getTranslation for server-side code. Use when adding translations, configuring locales, handling pluralization, using the Zod schema factory pattern, or managing extension translations. Covers nam…

sfnext-page-designer

Integrate Page Designer with Storefront Next using React decorators, component registry, and Region rendering. Use when creating merchant-editable pages, adding Page Designer components with @Component/@AttributeDefinition decorators, using fetchPageFromLoader, or rendering Regions. This is for the…

sfnext-performance

sfnext-project-setup

sfnext-routing

sfnext-scapi-management

sfnext-state-management

sfnext-testing

Descriptions come from the frontmatter of each SKILL.md, punctuation lightly normalized.

Category

Design & Frontend. Assigned by this directory. Agent Plugins 1.0.0 has no category field, so no manifest declares one.

Keywords

salesforce · storefront-next · react · b2c-commerce · commerce-cloud

Related by publisher and keywords

• figma-to-sfnext-pagedesignerSalesforceCommerceCloud

  Convert a Figma frame into live Storefront Next Page Designer blocks, React components with decorator metadata, brand-token reconciliation, and product data loaders. Requires the Figma MCP server.

• storefront-next-figmaSalesforceCommerceCloud

  Figma design-kit skills for Storefront Next verticals, duplicate the kit, sync brand variables, and publish Code Connect. Requires the Figma MCP server.

• b2cSalesforceCommerceCloud

  B2C Commerce development skills including Custom API development guides.

• b2c-cliSalesforceCommerceCloud

  B2C CLI Skills for Salesforce Commerce Cloud development.

• b2c-dx-mcpSalesforceCommerceCloud

  Build, debug, and deploy Salesforce B2C Commerce with your AI assistant. Includes documentation, workflow skills, and Salesforce Commerce API tools.

• b2c-python-sdkSalesforceCommerceCloud

  Consuming the salesforce-b2c-tooling-sdk Python SDK: authenticate to B2C Commerce, resolve dw.json config, and call OCAPI/SCAPI/WebDAV clients and operations from scripts or notebooks.