Help us improve
Share bugs, ideas, or general feedback.
From salesforce-commerce
Writes modern JS/TS for Salesforce Commerce platforms (SFCC Rhino/CommonJS limits, PWA Kit Node/ES modules, LWC Locker constraints). Fetches latest docs before coding.
npx claudepluginhub orcaqubits/agentic-commerce-skills-plugins --plugin salesforce-commerceHow this skill is triggered — by the user, by Claude, or both
Slash command
/salesforce-commerce:js-modernThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Write modern JavaScript and TypeScript for Salesforce Commerce platforms.
Builds Salesforce Commerce backends using SFCC server-side JavaScript (Rhino runtime), PWA Kit Express-like SSR servers, Commerce SDK for SCAPI access, and async external integrations. Use for server-side commerce logic.
Guides modern JavaScript/TypeScript with ES6+ features, async/await, destructuring, optional chaining, modules, and TypeScript types for Shopify themes, apps, Functions, Hydrogen.
Writes modern JavaScript/TypeScript using ES6+ features (async/await, destructuring, modules, optional chaining), Fetch API, and TypeScript types/utilities. For BigCommerce themes, apps, storefronts.
Share bugs, ideas, or general feedback.
Write modern JavaScript and TypeScript for Salesforce Commerce platforms.
Always fetch the latest official documentation BEFORE writing JavaScript:
This ensures you're using the latest syntax, APIs, and best practices for each platform.
This is the most critical concept. Three Salesforce Commerce platforms have fundamentally different JavaScript runtimes:
| Constraint | SFCC Server-Side | PWA Kit | LWC (B2B) |
|---|---|---|---|
| Engine | Rhino (Java-based) | Node.js + V8 | Browser (V8/SpiderMonkey) |
| Module system | CommonJS (require) | ES Modules (import) | ES Modules (import) |
| async/await | Not supported | Fully supported | Fully supported |
| Promises | Not supported | Fully supported | Fully supported |
| Template literals | Limited contexts | Fully supported | Fully supported |
| Arrow functions | Supported | Supported | Supported |
| Destructuring | Supported | Supported | Supported |
| Optional chaining | Not supported | Supported | Supported |
| Classes | Not supported | Supported | Required (extends LightningElement) |
| Decorators | Not applicable | Not applicable | Required (@api, @track, @wire) |
| DOM access | Not applicable | Standard DOM | Shadow DOM only (Locker/LWS) |
The Rhino engine imposes strict limitations. Every SFCC script must account for these:
var or let/const (recent versions) -- verify against your instanceasync/await, no Promise -- all I/O is synchronousrequire('dw/...') and module.exportsdw.* namespace (e.g., dw/catalog/ProductMgr)module.superModule for cartridge overlay inheritance// Pattern: SFCC module import
var ProductMgr = require('dw/catalog/ProductMgr');
// Fetch live docs for dw.* API signatures
// Pattern: module.superModule extension
var base = module.superModule;
// Fetch live docs for superModule behavior
Full modern JavaScript and TypeScript are available:
| Feature | Stack |
|---|---|
| React | 17+ with hooks |
| TypeScript | Full support, recommended |
| Node.js SSR | Server-side rendering |
| Commerce SDK | commerce-sdk-isomorphic |
| Bundler | Webpack with code splitting |
// Pattern: PWA Kit component with Commerce SDK
// Fetch live docs for useProducts hook API
import { useProducts } from '@salesforce/commerce-sdk-react';
LWC uses modern ES modules but enforces security boundaries:
| Allowed | Not Allowed |
|---|---|
ES modules (import/export) | Direct window/document manipulation |
async/await, Promises | eval(), Function() constructor |
| Template literals, destructuring | Third-party DOM libraries (jQuery) |
@api, @track, @wire decorators | setTimeout(string) |
this.template.querySelector() | document.getElementById() |
NavigationMixin | window.location = ... |
// Pattern: LWC component skeleton
// Fetch live docs for decorator behavior
import { LightningElement, api, wire } from 'lwc';
| System | Syntax | Platform |
|---|---|---|
| CommonJS | require() / module.exports | SFCC server-side |
| ES Modules | import / export | PWA Kit, LWC |
| SFCC Overlay | module.superModule | SFCC cartridge extension |
| SFCC Wildcard | require('*/cartridge/...') | Cross-cartridge resolution |
dw.* APIconst by default, let when reassignment is needed, never var (except SFCC if required)map, filter, reduce) over imperative loops?.) and nullish coalescing (??) where supportedPartial<T>, Pick<T>, Omit<T> for flexible type definitionsFetch MDN, TypeScript handbook, and platform-specific Salesforce docs for exact syntax support and API signatures before implementing.