Agent Skills

commerce-b2b-open-code-components-integrate

frontendforcedotcom4.6K installs

Integrate the official Salesforce B2B Commerce open source component library from GitHub into an existing store's site metadata. Use this skill to copy the library's components and labels so they become available in Experience Builder. TRIGGER when: the user asks to integrate or add open code components, names forcedotcom/b2b-commerce-open-source-components, or wants the official open source library copied into a B2B store. DO NOT TRIGGER when: the user needs to create or retrieve a B2B store (u

Install

npx skills add https://github.com/forcedotcom/sf-skills --skill commerce-b2b-open-code-components-integrate
SKILL.md

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

Rules

  1. Always explain before executing. Before running any command, you MUST tell the user what the command does and why you are running it. Never just show a raw command and ask for permission. The user should be able to read your explanation and understand the purpose before approving.

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 0: Resolve Package Directory

Run the plugin's deterministic resolver from the Salesforce project root:

python3 "${CLAUDE_PLUGIN_ROOT}/scripts/resolve-package-directory.py"

Use its single stdout line as <package-dir> everywhere below. The resolver parses sfdx-project.json, selects the entry with "default": true, or the first entry when no default is declared. If it exits nonzero, relay its diagnostic to the user and abort; do not guess a package directory or reimplement the selection logic inline.

Check 1: Open Source Repository

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

  1. If directory does not exist: Tell user: "I'm cloning the official B2B Commerce open source components repository from GitHub into a local .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-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: Tell user: "The cloned repository has an unexpected structure. I'll remove it and clone a fresh copy." Then remove and re-clone.
  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. Tell user: "I'm checking if your project already has B2B store metadata locally." Check if <package-dir>/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: Try retrieving from the connected org before delegating:
    1. Run 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.
    2. List DigitalExperienceBundle site bundles in that org with sf org list metadata --metadata-type DigitalExperienceBundle --target-org <alias>. Filter to site/* entries.
    3. If at least one site bundle exists, ask the user which to use, then run: sf project retrieve start --metadata "DigitalExperienceBundle:site/<storeName>" --target-org <alias> The bundle lands at <package-dir>/main/default/digitalExperiences/site/<storeName>/.
    4. Only if no connected org is available, or no site bundles are found, or retrieve fails: delegate to the commerce-b2b-store-create skill.

Required state after all checks:

  • Package dir — the value resolved in Check 0 (e.g., force-app)
  • Store name — the selected fullName value (e.g., My_B2B_Store1)
  • Site metadata path — <package-dir>/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/* (the open source repo's own layout — always force-app)
  • Destination: <package-dir>/main/default/digitalExperiences/site/<store-name>/sfdc_cms__lwc/ and sfdc_cms__label/ (<package-dir> resolved in Check 0)

Steps:

  1. Tell user: "I'm checking if open code components already exist in your store's site metadata." 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. Tell user: "I'm now copying all open code LWC components from the cloned repository into your store's site metadata directory." Copy all component directories from source to destination.
  4. Tell user: "I'm copying the associated label files that these components need." 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 <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

Example Interaction

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?"

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

User: "1"

Agent: "I'm checking if your project already has B2B store metadata locally..."

  • [done] Found store metadata for My_B2B_Store1

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?"

  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: "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..."

  • [done] 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

Related skills

vercel-react-best-practicesvercel-labs751KReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.vercel-composition-patternsvercel-labs361KReact composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.vercel-react-view-transitionsvercel-labs135KGuide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions viewpick-ui-libraryemilkowalski124KPick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.

Search skills and MCP servers

Fuzzy search across 23,137 skills and servers