From sf-skills
Integrates Salesforce B2B Commerce open source components from GitHub into a store's site metadata, making them available in Experience Builder.
How this skill is triggered — by the user, by Claude, or both
Slash command
/sf-skills:integrating-b2b-commerce-open-code-componentsThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use this skill when you need to:
Use this skill when you need to:
This skill copies all open source B2B Commerce components from the official Salesforce repository (https://github.com/forcedotcom/b2b-commerce-open-source-components) into a B2B Commerce store's site metadata. After integration, the components appear in the Experience Builder component palette.
When this skill is triggered, perform these checks automatically before copying.
Read sfdx-project.json and pick the active package directory. Extract packageDirectories[] and use the entry with "default": true; if no entry is flagged default, use the first entry. Use this value as <package-dir> everywhere below. If sfdx-project.json is missing or has no packageDirectories, tell the user and abort.
Verify the repo is cloned at .tmp/b2b-commerce-open-source-components:
.tmp/ folder. This gives us access to all the open code components."
Then run: git clone https://github.com/forcedotcom/b2b-commerce-open-source-components .tmp/b2b-commerce-open-source-componentsforce-app/main/default/sfdc_cms__lwc and sfdc_cms__label, present options:
"Open source repository is already cloned. How would you like to proceed?"
- Reuse existing — Use the already cloned repository
- Re-clone — Remove and clone fresh from GitHub
Verify a store is selected and site metadata is available locally:
<package-dir>/main/default/digitalExperiences/site/ contains any store directories.sf org list (or check sf config get target-org) to find a connected org. Ask the user to confirm or pick one if more than one.DigitalExperienceBundle site bundles in that org with sf org list metadata --metadata-type DigitalExperienceBundle --target-org <alias>. Filter to site/* entries.sf project retrieve start --metadata "DigitalExperienceBundle:site/<storeName>" --target-org <alias>
The bundle lands at <package-dir>/main/default/digitalExperiences/site/<storeName>/.Required state after all checks:
force-app)fullName value (e.g., My_B2B_Store1)<package-dir>/main/default/digitalExperiences/site/<store-name>/.tmp/b2b-commerce-open-source-components/Copy all components and labels from cloned repo to site directory:
.tmp/b2b-commerce-open-source-components/force-app/main/default/sfdc_cms__lwc/* and sfdc_cms__label/* (the open source repo's own layout — always force-app)<package-dir>/main/default/digitalExperiences/site/<store-name>/sfdc_cms__lwc/ and sfdc_cms__label/ (<package-dir> resolved in Check 0)Steps:
"Components already exist in {store-name}. How would you like to proceed?"
- Overwrite all — Replace all existing components with latest from repo
- Copy only new — Skip existing components, copy only ones not yet present
Output:
✅ Integration Complete!
Copied: X components and Y label sets to <store-name>
Next Steps:
1. Deploy: sf project deploy start -d <package-dir>/main/default/digitalExperiences/site/<store-name>
2. Open Experience Builder and use new components from the palette
3. Publish your site when ready
User: "Integrate open code components to my store"
Agent: "I'm checking if the open source components repository is already cloned locally..."
Agent: (repo exists)
"Open source repository is already cloned. How would you like to proceed?"
- Reuse existing — Use the already cloned repository
- Re-clone — Remove and clone fresh from GitHub
User: "1"
Agent: "I'm checking if your project already has B2B store metadata locally..."
Agent: "I'm checking if open code components already exist in your store's site metadata..."
Agent: (files exist)
"Components already exist in My_B2B_Store1. How would you like to proceed?"
- Overwrite all — Replace all existing components with latest from repo
- Copy only new — Skip existing components, copy only ones not yet present
User: "1"
Agent: "I'm now copying all open code LWC components from the cloned repository into your store's site metadata directory..." Agent: "I'm copying the associated label files that these components need..."
✅ Integration Complete!
Copied: 45 components and 38 label sets to My_B2B_Store1
Next Steps:
1. Deploy: sf project deploy start -d force-app/main/default/digitalExperiences/site/My_B2B_Store1
2. Open Experience Builder and use new components from the palette
3. Publish your site when ready
| Error | Message | Action |
|---|---|---|
| Store not found | "Store '{name}' not found in org." | List stores again |
| Git clone failed | "Failed to clone repository. Check internet connection." | Retry or abort |
| Invalid repo structure | "Repository structure has changed. Expected sfdc_cms__lwc and sfdc_cms__label." | Warn user, abort |
| File copy failed | "Failed to copy files. Check file permissions." | Show error details |
sfdc_cms__lwc/)sfdc_cms__label/)npx claudepluginhub ccmalcom/sf-skills-plugin --plugin sf-skillsCreates a Commerce B2B Store in Salesforce and retrieves auto-generated storefront metadata via an interactive 7-step workflow.
Builds B2B/D2C storefronts with Salesforce Experience Builder: LWR templates, page types (Home, Product, Category, Cart, Checkout), components, themes, navigation, SEO, publishing.
Provides best practices, UI/UX patterns, and guidance for ecommerce storefronts: checkout, cart, products, navigation, homepage. Integrates Medusa backend; framework-agnostic (Next.js, React, Vue).