@salesforce/b2c-dx-mcp 2.1.2 → 3.0.1

package/content/guidance/mcp/scapi/references/snippets.md

@@ -0,0 +1,89 @@
+# Built-in SCAPI snippets
+
+Generated from the shipped catalog. Discover user snippets with `codemode.search(query)`.
+Describe before first use: `await codemode.describe(name)`. Run through `scapi_execute`: `await codemode.run(name, input)`.
+All calls share the enclosing execution limits, configuration, and safety rules.
+
+## builtin/create-product
+
+Create a basic product, optionally assign it to a storefront catalog category, and verify saved fields and assignment.
+
+Effect: write.
+
+Input JSON Schema:
+
+```json
+{"type":"object","properties":{"productId":{"type":"string","minLength":1},"catalogId":{"type":"string","minLength":1,"description":"Owning catalog for the new product."},"name":{"type":"string","minLength":1,"description":"Product name in the default locale."},"offline":{"type":"boolean","default":true,"description":"Create offline by default; false sets the default online flag."},"category":{"type":"object","description":"Optional assignment target; its catalog may differ from the owning catalog.","properties":{"catalogId":{"type":"string","minLength":1},"categoryId":{"type":"string","minLength":1}},"required":["catalogId","categoryId"],"additionalProperties":false}},"required":["productId","catalogId"],"additionalProperties":false}
+```
+
+## builtin/campaign-promotions
+
+Inspect campaign assignments and promotion details in bounded batches.
+
+Effect: read.
+
+Input JSON Schema:
+
+```json
+{"type":"object","properties":{"campaignId":{"type":"string","minLength":1},"offset":{"type":"integer","minimum":0},"limit":{"type":"integer","minimum":1,"maximum":12}},"required":["campaignId"],"additionalProperties":false}
+```
+
+## builtin/failed-job-triage
+
+Search failed job executions and inspect a bounded page with continuation.
+
+Effect: read.
+
+Input JSON Schema:
+
+```json
+{"type":"object","properties":{"from":{"type":"string","format":"date-time"},"to":{"type":"string","format":"date-time"},"offset":{"type":"integer","minimum":0},"limit":{"type":"integer","minimum":1,"maximum":3}},"required":["from","to"],"additionalProperties":false}
+```
+
+## builtin/job-execution-review
+
+Review job executions in a fixed interval, including successful runs; return compact statuses and continuation.
+
+Effect: read.
+
+Input JSON Schema:
+
+```json
+{"type":"object","properties":{"from":{"type":"string","format":"date-time"},"to":{"type":"string","format":"date-time"},"jobId":{"type":"string","minLength":1},"offset":{"type":"integer","minimum":0},"limit":{"type":"integer","minimum":1,"maximum":20}},"required":["from","to"],"additionalProperties":false}
+```
+
+## builtin/job-execution-inspect
+
+Inspect one execution and a bounded page of its steps; return the exact WebDAV log path.
+
+Effect: read.
+
+Input JSON Schema:
+
+```json
+{"type":"object","properties":{"jobId":{"type":"string","minLength":1},"executionId":{"type":"string","minLength":1},"offset":{"type":"integer","minimum":0},"limit":{"type":"integer","minimum":1,"maximum":20}},"required":["jobId","executionId"],"additionalProperties":false}
+```
+
+## builtin/code-version-inspect
+
+Identify active and rollback code versions and inspect a bounded page of version metadata.
+
+Effect: read.
+
+Input JSON Schema:
+
+```json
+{"type":"object","properties":{"offset":{"type":"integer","minimum":0},"limit":{"type":"integer","minimum":1,"maximum":20}},"required":[],"additionalProperties":false}
+```
+
+## builtin/site-cartridge-inspect
+
+Inspect site status, catalog, and ordered cartridge paths; check expected cartridge names.
+
+Effect: read.
+
+Input JSON Schema:
+
+```json
+{"type":"object","properties":{"siteId":{"type":"string","minLength":1},"expectedCartridges":{"type":"array","maxItems":50,"items":{"type":"string","minLength":1}}},"required":["siteId"],"additionalProperties":false}
+```

package/content/guidance/mcp/scapi/references/tokens.md

@@ -0,0 +1,56 @@
+# Token exports for external clients
+
+Only use when the task explicitly needs a token or an HTTP client outside code
+mode. `scapi.request()` and snippets already authenticate; these helpers neither
+configure their authentication nor enable unsupported Shopper requests.
+Run through `scapi_execute`, with the same project configuration and skill acknowledgment.
+
+## Account Manager
+
+```javascript
+async () => auth.accountManager({scopes: ['sfcc.products'], scapi: true});
+```
+
+Options: `scopes?: string[]`, `scapi?: boolean` (default false). Merges configured
+scopes; `scapi: true` adds the configured tenant scope. Select operation scopes
+from `scapi_search`; no operation exists here to infer them automatically.
+Returns `{accessToken, expires, scopes}`; `expires` is an ISO timestamp.
+
+Requires `clientId` and an allowed configured `client-credentials` (clientSecret)
+or `jwt` (certificate/key) method. Honors configured method order. `shortCode`
+is unnecessary; `tenantId` is required only with `scapi: true`. Browser flows
+require CLI `b2c auth token`. CLI equivalent: `b2c auth token`, passing repeated
+`--auth-scope` flags for operation scopes and `SALESFORCE_COMMERCE_API:<tenantId>`
+when calling SCAPI directly.
+
+## SLAS
+
+```javascript
+async () => auth.slas({flow: 'guest'});
+```
+
+Options: `flow?: 'guest' | 'registered'` (default guest), `siteId?: string`,
+`redirectUri?: string`, `shopperLogin?: string`, `shopperPassword?: string`.
+Registered flow requires both shopper credentials. Supply sensitive values via
+tool `input`, never embed them in saved source.
+
+Requires configured `shortCode`, `tenantId`, `slasClientId`, and siteId (configured
+or option). `slasClientSecret` selects private-client authentication; otherwise
+public PKCE. Default redirect URI: `http://localhost:3000/callback`; it must be
+registered on the SLAS client. No browser or callback listener is launched.
+Returns SLAS fields: `access_token`, `refresh_token`, `expires_in`, `token_type`,
+`usid`, `customer_id`, optional `id_token`. CLI equivalent: `b2c slas token`.
+
+## Output and failures
+
+Only the program's returned value reaches the tool result; return a token only
+when needed. Do not log tokens or put them in saved snippets. Token exports count
+toward execution's 20 calls/four concurrent limit and must be awaited.
+
+`SCAPI_AUTH_*` failures identify missing configuration or grant failures. Inspect
+masked configuration first; then use the main skill's setup references. Check
+SLAS client type, scopes, channel/site, and registered redirect URI for rejected
+flows. A token does not grant additional permissions.
+
+Use exported tokens with an external client. Direct HTTP is outside MCP Safety
+Mode; never switch to it merely to bypass a blocked managed request.

package/content/guidance/mcp/server/SKILL.md

@@ -0,0 +1,99 @@
+---
+name: server
+description: B2C MCP setup, toolset customization, available capabilities, tool choice, and skill discovery.
+---
+
+# B2C MCP Server
+
+## Server configuration and tool availability
+
+Use the client's tool discovery before concluding a tool is unavailable.
+Reuse discovered names; do not repeat searches for each call.
+All toolsets are enabled by default;
+project/storefront detection does not select tools. Installation settings or
+client filters can restrict availability. A skill's presence does not enable
+its tools. `config_inspect` reports B2C configuration, not enabled MCP toolsets.
+
+When a task needs a tool outside the current selection:
+
+1. Check this server's client registration: command/version, launch arguments,
+   environment, and client tool filters. Inspect only relevant settings; redact
+   secrets. Plugin installs may supply their own launch options.
+2. Check `--toolsets` / `SFCC_TOOLSETS` and `--tools` / `SFCC_TOOLS`.
+   Explicit selection replaces the default; combining them includes both.
+   Add the required toolset to the existing selection, or the exact tool to
+   `--tools`. Example: change `--toolsets MRT` to `--toolsets MRT,DIAGNOSTICS`
+   for configuration inspection and debugging. Preserve intentional restrictions.
+3. To enable all tools, set `--toolsets all`, or remove both selections
+   from arguments and launch environment.
+4. Apply the requested change to the existing registration; restart/reconnect
+   MCP and refresh the client tool catalog (a new session may be needed).
+   Verify the expected tools appear. Check the installed version if still absent;
+   removed tools cannot be re-enabled. Avoid duplicate server registrations.
+
+Toolsets: `CARTRIDGES`, `DIAGNOSTICS`, `MRT`, `PWAV3`, `SCAPI`, `STOREFRONTNEXT`, `CIP`.
+MCP skill resources are always available. Every toolset includes `skills_read`
+and docs. With only `--tools`, select `skills_read` to include the broader skill
+collections, and desired `docs_*` tools explicitly. `--docs-topics` restricts docs, not skills.
+Use launch arguments/environment for server settings, not project `.env` or `dw.json`.
+
+## Tool choice and project configuration
+
+- Call `config_inspect` directly with the task's `projectDirectory`; secrets are
+  masked. For resolution issues: [B2C config](skill://mcp/b2c-config/SKILL.md).
+  CLI equivalent, when requested: `b2c setup inspect`.
+- Deploy cartridges: `cartridge_deploy`; CLI scripts/extra flags: `b2c code deploy`.
+  Confirm instance/version and preserve returned `resolution`. Use `files` for
+  selected local files, `codeVersion` for an explicit target; omit `files` for
+  whole cartridges. Reload may activate the target.
+- Instance files: `webdav_list` gives directory entries/sizes; `webdav_get` reads
+  exact text by HTTP byte range or downloads to `outputPath`; `webdav_put` uploads
+  `content` or `sourcePath`. Prefer these over a terminal for supported transfers.
+  [File choices and limits](references/files.md).
+- Debug: [MCP debugger](skill://mcp/debugger/SKILL.md). CLI/IDE only when requested.
+- Prefer dedicated tools for their workflows. For other Commerce API tasks,
+  use `scapi_search` / `scapi_execute`: products, campaigns, promotions, jobs,
+  code versions, site cartridge paths, and more. Read [the SCAPI skill](skill://mcp/scapi/SKILL.md)
+  first; its task map and built-in snippets cover recurring operations.
+- Custom API scaffold: `b2c scaffold generate custom-api`; no MCP equivalent.
+- API/product documentation: `docs_search` / `docs_read`.
+- Warehouse analytics: `cip_discover` for reports/metadata, `cip_query` for report
+  or SQL execution. Read [CIP analytics](skill://mcp/cip/SKILL.md) before execution.
+  Prefer CIP for sales/merchandising/technical trends; SCAPI for current records.
+- Operations or incidents: look for `b2c-ops` runbooks in `skill://index` or
+  `skills_read` with `collection: "b2c-ops"` and the task query. Start with the
+  matching job-health, checkout-triage, order-failure-triage, or production-triage skill. Read only
+  relevant references. Runbooks guide evidence and handoff, not authorization
+  to rerun jobs or change data. CLI fallback is appropriate for an uncovered
+  signal when terminal access is available; a skill does not supply that access.
+
+Do not infer tool names from CLI commands. Check a mutation's outcome before
+retrying after missing output.
+
+## Skills
+
+Browse `skill://index` or, when enabled, search `skills_read`: `b2c` (platform/cartridges),
+`b2c-cli` (CLI), `b2c-ops` (operator/admin runbooks), `storefront-next` (storefronts),
+`mcp` (server/tool workflows).
+Read `skill://` URIs through MCP resources, or use `skills_read({uri: "skill://mcp/debugger/SKILL.md"})`
+for a file when enabled. These URIs are not native skill commands; do not derive
+client skill names from the server name or URI. Use `id` for a discovered skill ID.
+Result `skillReferences` point to optional
+detail for observed conditions: read the URI, or pass its URI and `section` to
+`skills_read`. Skills are directory-agnostic.
+
+Tools needing a skill name it in their description; no universal read is
+required. Resource and tool reads are equivalent; do not read both.
+Acknowledgment does not approve mutations.
+
+When scripting tool calls, emit `structuredContent` when present, otherwise
+`content`; emitting both repeats the payload.
+
+## Setup references
+
+- Credentials, external grants, or access failures: [MCP configuration](skill://mcp/b2c-config/SKILL.md),
+  `skills_read({id: "mcp/b2c-config", section: "setup-and-access"})` when available.
+  It maps setup issues to exact documentation IDs; no universal setup read is needed.
+- [Client installation](https://salesforcecommercecloud.github.io/b2c-developer-tooling/mcp/installation)
+- [Launch configuration](https://salesforcecommercecloud.github.io/b2c-developer-tooling/mcp/configuration)
+- [Capabilities and toolsets](https://salesforcecommercecloud.github.io/b2c-developer-tooling/mcp/toolsets)

package/content/guidance/mcp/server/references/files.md

@@ -0,0 +1,37 @@
+# Instance files and cartridge uploads
+
+No prerequisite skill read. Reuse the task's project/instance; inspect masked
+configuration only if the target or access is unclear.
+
+| Need | Preferred tool | Alternative |
+| --- | --- | --- |
+| Directory entries, file sizes | `webdav_list` with path/offset/limit | CLI `b2c webdav ls` |
+| Exact log/text, including unparsed job logs | `webdav_get` with path/offset/maxBytes | Recent/filter/watch needs: existing `logs_*` tools |
+| Whole file, including binary archives | `webdav_get` with a new `outputPath` | CLI `b2c webdav get` |
+| Upload text or an existing local file | `webdav_put` with `content` or `sourcePath` | CLI `b2c webdav put` |
+| Selected local cartridge files | `cartridge_deploy` with `files` and `codeVersion` | Whole cartridge: omit `files` |
+
+Paths are WebDAV Sites-relative: `Logs/jobs/run.log`, `Impex/src/data.zip`,
+`Cartridges/version/app/cartridge/scripts/file.js`. Returned `/Sites/LOGS/...`
+job paths are accepted. List one directory; listing does not recurse.
+
+Text reads fetch at most `maxBytes` (default 4000, maximum 8000). `size` is total
+file bytes; reuse `nextOffset` to preserve UTF-8 boundaries. Null means end.
+Files can grow/rotate; compare returned size/ETag/lastModified when consistency
+matters. For recent errors or continuous activity, prefer the log tools.
+Binary reads require `outputPath`; transfers are limited to 64 MiB.
+Local paths refer to the MCP host and resolve from `projectDirectory`.
+Downloads never replace existing local files. Upload parents must exist;
+replacement requires `overwrite: true` and user intent. No automatic deletion.
+
+Cartridge `files` resolve from `projectDirectory`, within cartridges discovered
+under `cartridgeDirectory`. Include/exclude filters still apply. Maximum 100
+files / 64 MiB total; matching remote files are overwritten, other files remain.
+No reload unless requested. Reload can activate another version briefly, then
+the target. Preserve uploaded-file results and warnings; do not redeploy merely
+because reload or temporary-archive cleanup failed.
+
+SDK authentication, installed middleware, and Safety Mode apply to remote requests.
+Keep path/HTTP errors distinct from an empty directory or healthy job.
+For mkdir, recursive transfers, delete, ZIP/UNZIP, use the CLI WebDAV skill only
+when needed: `skill://b2c-cli/b2c-webdav/SKILL.md`.

package/content/guidance/storefront-next/sfnext-authentication/SKILL.md

@@ -0,0 +1,120 @@
+---
+name: sfnext-authentication
+description: 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.
+---
+
+# Authentication Skill
+
+This skill covers Storefront Next's split-cookie authentication architecture with SLAS (Shopper Login and API Access Service).
+
+## Overview
+
+Storefront Next uses a split-cookie architecture separating server and client auth concerns:
+
+- **Server middleware** (`auth.server.ts`) — Manages SLAS tokens, writes cookies, handles token refresh
+- **React Context** (`AuthProvider`) — Provides public session data (non-sensitive fields) to components via `useAuth()`
+
+## Cookie Design
+
+| Cookie | Purpose | User Type | Expiry | HttpOnly |
+|--------|---------|-----------|--------|----------|
+| `cc-nx-g` | Guest refresh token | Guest | 30 days | No |
+| `cc-nx` | Registered refresh token | Registered | 90 days | No |
+| `cc-at` | Access token | Both | 30 min | No |
+| `usid` | User session ID | Both | Matches refresh | No |
+| `customerId` | Customer ID | Registered | Matches refresh | No |
+
+**Key points:**
+- Only ONE refresh token exists at a time (guest OR registered, never both)
+- User type is derived from which refresh token is present
+- Cookies are auto-namespaced with `siteId`
+- Tokens auto-refresh when expired
+
+## Usage in Loaders/Actions
+
+```typescript
+import { getAuth } from '@/middlewares/auth.server';
+
+export function loader({ context }: LoaderFunctionArgs) {
+    const auth = getAuth(context);
+
+    const { accessToken, customerId, userType } = auth;
+    const isGuest = userType === 'guest';
+    const isRegistered = userType === 'registered';
+
+    return { isGuest, customerId };
+}
+```
+
+## Usage in Components
+
+```typescript
+import { useAuth } from '@/providers/auth';
+
+export function MyComponent() {
+    const auth = useAuth();
+
+    if (auth?.userType === 'guest') {
+        return <LoginPrompt />;
+    }
+
+    return <div>Welcome, customer {auth?.customerId}</div>;
+}
+```
+
+## Common Patterns
+
+### Protected Routes
+
+```typescript
+export function loader({ context }: LoaderFunctionArgs) {
+    const auth = getAuth(context);
+
+    if (auth.userType === 'guest') {
+        throw redirect('/login');
+    }
+
+    const clients = createApiClients(context);
+    return {
+        orders: clients.shopperOrders.getOrders({
+            params: { path: { customerId: auth.customerId } }
+        }).then(({ data }) => data),
+    };
+}
+```
+
+### Conditional Data Loading
+
+```typescript
+export function loader({ context }: LoaderFunctionArgs) {
+    const auth = getAuth(context);
+    const clients = createApiClients(context);
+
+    const base = {
+        products: clients.shopperProducts.getProducts({...}).then(({ data }) => data),
+    };
+
+    if (auth.userType === 'registered') {
+        return {
+            ...base,
+            wishlist: clients.shopperCustomers.getWishlist({...}).then(({ data }) => data),
+        };
+    }
+
+    return base;
+}
+```
+
+## Troubleshooting
+
+| Issue | Cause | Solution |
+|-------|-------|----------|
+| `auth` is undefined | Missing auth middleware | Ensure `auth.server.ts` middleware is configured |
+| Always guest | Refresh token expired | Check cookie expiry; SLAS auto-refreshes |
+| Token errors in SCAPI | Stale access token | Tokens auto-refresh; check SLAS client configuration |
+
+## Related Skills
+
+- `storefront-next:sfnext-data-fetching` - Using auth context in loader functions
+- `storefront-next:sfnext-configuration` - SLAS client configuration
+- `storefront-next:sfnext-hybrid-storefronts` - Session bridging with SFRA

package/content/guidance/storefront-next/sfnext-components/SKILL.md

@@ -0,0 +1,191 @@
+---
+name: sfnext-components
+description: 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 patterns and the cn() utility.
+---
+
+# Components Skill
+
+This skill covers component development patterns in Storefront Next — createPage HOC, Suspense boundaries, shadcn/ui integration, and Tailwind CSS styling.
+
+## Page Component Pattern
+
+Most routes export a default function component that receives `loaderData` as props:
+
+```typescript
+import { Suspense } from 'react';
+import { Await } from 'react-router';
+import { SeoMeta } from '@/components/seo-meta';
+
+type ProductPageData = {
+    product: Promise<Product>;
+    reviews: Promise<Reviews>;
+};
+
+export default function ProductPage({ loaderData }: { loaderData: ProductPageData }) {
+    return (
+        <>
+            <SeoMeta title="Product" />
+            <Suspense fallback={<ProductHeaderSkeleton />}>
+                <Await resolve={loaderData.product}>
+                    {(product) => <ProductHeader product={product} />}
+                </Await>
+            </Suspense>
+            <Suspense fallback={<ReviewsSkeleton />}>
+                <Await resolve={loaderData.reviews}>
+                    {(reviews) => <ProductReviews reviews={reviews} />}
+                </Await>
+            </Suspense>
+        </>
+    );
+}
+```
+
+### createPage HOC (Optional)
+
+For pages needing standardized Suspense wrappers and page key management:
+
+```typescript
+import { createPage } from '@/components/create-page';
+
+export default createPage({
+    component: ProductView,
+    fallback: <ProductSkeleton />,
+});
+```
+
+## Suspense Boundaries and Code Splitting
+
+Use `<Suspense>` + `<Await>` for streaming loader data, and `lazy()` for code-splitting heavy components:
+
+```typescript
+import { lazy, Suspense } from 'react';
+
+// Code-split a heavy component
+const CustomerReviewsSection = lazy(() =>
+    import('@/components/customer-reviews-section/customer-reviews-section')
+);
+
+export default function ProductPage({ loaderData }: { loaderData: ProductPageData }) {
+    return (
+        <>
+            {/* Stream loader data */}
+            <Suspense fallback={<ProductHeaderSkeleton />}>
+                <Await resolve={loaderData.product}>
+                    {(product) => <ProductHeader product={product} />}
+                </Await>
+            </Suspense>
+
+            {/* Code-split component */}
+            <Suspense fallback={<ReviewsSkeleton />}>
+                <CustomerReviewsSection productId={loaderData.productId} />
+            </Suspense>
+        </>
+    );
+}
+```
+
+## shadcn/ui Components
+
+shadcn/ui provides pre-built accessible components. Add them via CLI:
+
+```bash
+npx shadcn@latest add button
+npx shadcn@latest add card
+npx shadcn@latest add dialog
+```
+
+**Rules:**
+
+- Add components via CLI only (do not manually create files in `src/components/ui/`)
+- `src/components/ui/` components are copied into your project and can be customized directly
+- Keep app/domain components outside `src/components/ui/`:
+
+```typescript
+// Optional wrapper for app-specific styling
+import { Button } from '@/components/ui/button';
+
+export function PrimaryButton(props: React.ComponentProps<typeof Button>) {
+    return <Button {...props} className={cn('rounded-full', props.className)} />;
+}
+```
+
+## Tailwind CSS Styling
+
+Tailwind CSS v4 is the only permitted styling approach:
+
+```typescript
+import { cn } from '@/lib/utils';
+
+export function ProductCard({ featured }: { featured?: boolean }) {
+    return (
+        <div className={cn(
+            'rounded-lg border border-border bg-card p-4',
+            featured && 'ring-2 ring-primary'
+        )}>
+            <h2 className="text-lg font-semibold text-card-foreground">
+                Product Name
+            </h2>
+        </div>
+    );
+}
+```
+
+**Rules:**
+
+- Use Tailwind utility classes as the primary styling approach
+- Use `cn()` for conditional class merging
+- Follow mobile-first responsive design (`md:`, `lg:` breakpoints)
+- Prefer Tailwind over inline styles; inline styles are acceptable for truly dynamic values (e.g., `backgroundColor` from API data)
+- No CSS modules or separate CSS files
+- Custom global CSS only in `src/app.css`
+
+### Dark Mode
+
+Theme variables automatically adapt via CSS variables:
+
+```typescript
+<div className="bg-background text-foreground border-border">
+    <button className="bg-primary text-primary-foreground">Click me</button>
+</div>
+```
+
+### Responsive Design
+
+```typescript
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+    {products.map(p => <ProductCard key={p.id} product={p} />)}
+</div>
+```
+
+## File Organization
+
+```
+src/components/product-tile/
+├── index.tsx              # Component implementation
+├── index.test.tsx         # Vitest unit tests
+└── stories/
+    ├── index.stories.tsx  # Storybook stories
+    └── __snapshots__/     # Storybook snapshots (optional)
+
+src/components/product-skeleton/
+├── index.tsx              # Skeleton component (separate from main)
+├── index.test.tsx
+└── stories/
+    └── index.stories.tsx
+```
+
+## Best Practices
+
+1. **Export default function components** — Receive `loaderData` as props
+2. **Granular Suspense boundaries** — Show content progressively as data resolves
+3. **Use `lazy()` for heavy components** — Code-split below-the-fold or conditional UI
+4. **Reusable skeleton components** — Consistent loading states
+5. **Colocate tests and stories** — Keep test files next to source files
+6. **TypeScript interfaces** — Define proper types for all props
+
+## Related Skills
+
+- `storefront-next:sfnext-data-fetching` - Loader patterns that feed data to components
+- `storefront-next:sfnext-testing` - Writing Vitest tests and Storybook stories
+- `storefront-next:sfnext-page-designer` - Page Designer component integration
+- `storefront-next:sfnext-i18n` - Translating component text