afv-library/skills/integrating-b2b-commerce-open-code-components/SKILL.md

name	description	license	compatibility	allowed-tools	metadata
integrate-b2b-commerce-open-code-components	Integrate Salesforce B2B Commerce open source components from GitHub into B2B Commerce stores. Use when users mention "integrate open code components", "open source B2B commerce", "add open code components", "forcedotcom/b2b-commerce-open-source-components", or want to add open source commerce components to their store. Copies all components and labels so they become available in Experience Builder.	Apache-2.0	Requires Salesforce CLI (sf), Git, B2B Commerce license, Experience Builder access, and internet connectivity	Bash Read Write	author version afv-library 1.0

When to Use This Skill

Use this skill when you need to:

• Integrate all open source B2B Commerce components into a store
• Add open source components to a new or existing B2B Commerce store
• Make open code components available in Experience Builder

Overview

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.

---

Startup Flow

When this skill is triggered, perform these checks automatically before copying.

Check 1: Open Source Repository

Verify the repo is cloned at .tmp/b2b-commerce-open-source-components:

1. If directory does not exist: clone silently — git clone https://github.com/forcedotcom/b2b-commerce-open-source-components .tmp/b2b-commerce-open-source-components
2. If directory exists and contains force-app/main/default/sfdc_cms__lwc and sfdc_cms__label, present options:

   "Open source repository is already cloned. How would you like to proceed?"

   1. Reuse existing — Use the already cloned repository
   2. Re-clone — Remove and clone fresh from GitHub

3. If directory exists but structure is invalid: remove and re-clone automatically
4. If clone fails: inform user and abort

Check 2: Store and Site Metadata

Verify a store is selected and site metadata is available locally:

1. Check if force-app/main/default/digitalExperiences/site/ contains any store directories
2. If store metadata exists: use it. If multiple stores found, ask user to select one.
3. If no store metadata found: delegate to the creating-b2b-commerce-store skill (skills/creating-b2b-commerce-store/SKILL.md) to create/select a store and retrieve metadata.

Required state after both checks:

• Store name — the selected fullName value (e.g., My_B2B_Store1)
• Site metadata path — force-app/main/default/digitalExperiences/site/<store-name>/
• Repo path — .tmp/b2b-commerce-open-source-components/

---

Integration Task

Copy all components and labels from cloned repo to site directory:

• Source: .tmp/b2b-commerce-open-source-components/force-app/main/default/sfdc_cms__lwc/* and sfdc_cms__label/*
• Destination: force-app/main/default/digitalExperiences/site/<store-name>/sfdc_cms__lwc/ and sfdc_cms__label/

Steps:

1. Check if destination directories already contain files
2. If files exist, present options:

   "Components already exist in {store-name}. How would you like to proceed?"

   1. Overwrite all — Replace all existing components with latest from repo
   2. Copy only new — Skip existing components, copy only ones not yet present

3. Copy all component directories from source to destination
4. Copy all label directories from source to destination
5. Report: "Copied X components and Y label sets"

Output:

✅ Integration Complete!

Copied: X components and Y label sets to <store-name>

Next Steps:
1. Deploy: sf project deploy start -d force-app/main/default/digitalExperiences/site/<store-name>
2. Open Experience Builder and use new components from the palette
3. Publish your site when ready

---

Example Interaction

User: "Integrate open code components to my store"

Agent: (Check 1: repo exists)

"Open source repository is already cloned. How would you like to proceed?"

1. Reuse existing — Use the already cloned repository
2. Re-clone — Remove and clone fresh from GitHub

User: "1"

Agent: (Check 2: store metadata)

• ✓ Found store metadata for My_B2B_Store1

Agent: (Integration Task: files exist)

"Components already exist in My_B2B_Store1. How would you like to proceed?"

1. Overwrite all — Replace all existing components with latest from repo
2. Copy only new — Skip existing components, copy only ones not yet present

User: "1"

Agent:

• ✓ Copied 45 components and 38 label sets

✅ 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 Handling

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

---

Verification Checklist

• Startup Flow completed: repo cloned, store metadata available
• Components copied to correct destination path (sfdc_cms__lwc/)
• Labels copied to correct destination path (sfdc_cms__label/)
• No file permission errors during copy
• Deployment command provided and user informed about testing

---

Anti-Patterns

DO NOT: copy without checking for existing files first, modify component code or labels from the open source repo, add components to wrong site directory, deploy without user confirmation.

DO: warn before overwriting existing files, verify paths before operations, report count of copied components and labels, inform user of next steps.