@salesforce/b2c-dx-mcp 2.1.2 → 3.0.0

package/node_modules/@salesforce/b2c-agent-plugins/storefront-next/skills/sfnext-testing/SKILL.md

@@ -0,0 +1,184 @@
+---
+name: sfnext-testing
+description: Write tests for Storefront Next using Vitest unit tests, Storybook stories, interaction tests, snapshot tests, and accessibility tests. Use when writing component tests, creating Storybook stories, running test coverage, or setting up test utilities. Covers testing-library patterns, play functions, and coverage thresholds.
+---
+
+# Testing Skill
+
+This skill covers testing patterns in Storefront Next — Vitest for unit tests and Storybook for component stories, interaction tests, and accessibility validation.
+
+## Unit Tests (Vitest)
+
+Test files live alongside source files with `.test.ts` or `.test.tsx` extension:
+
+```typescript
+// src/components/product-card/product-card.test.tsx
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ProductCard } from './product-card';
+import { mockProduct } from '@/test-utils/mocks';
+
+describe('ProductCard', () => {
+    it('renders product name', () => {
+        render(<ProductCard product={mockProduct} />);
+        expect(screen.getByText(mockProduct.productName)).toBeInTheDocument();
+    });
+});
+```
+
+### Test Utilities
+
+Shared utilities in `src/test-utils/`:
+
+- `config.ts` — Mock configuration objects and ConfigProvider wrappers
+- `context-provider-utils.ts` — Context provider helpers for testing
+- `context-provider.tsx` — Test context providers
+
+### Running Tests
+
+```bash
+pnpm test                # Run all tests with coverage
+pnpm test:ui             # Open interactive Vitest UI
+pnpm test:watch          # Watch mode (re-run on changes)
+```
+
+### Coverage Requirements
+
+Thresholds enforced in `vitest.thresholds.ts`:
+
+| Metric | Minimum |
+|--------|---------|
+| Lines | 73% |
+| Statements | 73% |
+| Functions | 72% |
+| Branches | 67% |
+
+### Testing Libraries
+
+- `@testing-library/react` — Component rendering and queries
+- `@testing-library/jest-dom` — Custom DOM matchers (`toBeInTheDocument`, etc.)
+- `@testing-library/user-event` — User interaction simulation
+- `@vitest/coverage-v8` — Code coverage
+- `@vitest/ui` — Interactive test UI
+
+## Storybook
+
+Every reusable component should have a `.stories.tsx` file.
+
+### Story Structure
+
+```typescript
+// src/components/product-card/product-card.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { within, expect } from 'storybook/test';
+import { waitForStorybookReady } from '@storybook/test-utils';
+import { ProductCard } from './product-card';
+import { ConfigProvider } from '@/config/context';
+import { mockConfig } from '@/test-utils/config';
+import { mockProduct } from '@/test-utils/mocks';
+
+const meta: Meta<typeof ProductCard> = {
+    title: 'Components/ProductCard',
+    component: ProductCard,
+    tags: ['autodocs', 'interaction'],
+    decorators: [
+        (Story) => (
+            <ConfigProvider config={mockConfig}>
+                <Story />
+            </ConfigProvider>
+        ),
+    ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ProductCard>;
+
+export const Default: Story = {
+    args: {
+        product: mockProduct,
+    },
+    play: async ({ canvasElement }) => {
+        await waitForStorybookReady(canvasElement);
+        const canvas = within(canvasElement);
+        await expect(canvas.getByText(mockProduct.productName)).toBeInTheDocument();
+    },
+};
+```
+
+See [Storybook Patterns Reference](references/STORYBOOK-PATTERNS.md) for advanced patterns.
+
+### Storybook Commands
+
+```bash
+pnpm storybook                              # Dev server (port 6006)
+pnpm build-storybook                        # Build static Storybook
+pnpm test-storybook:snapshot                # Snapshot tests
+pnpm test-storybook:snapshot:update         # Update snapshots
+pnpm test-storybook:interaction             # Interaction tests
+pnpm test-storybook:a11y                    # Accessibility tests
+pnpm generate:story-tests:coverage          # Story coverage report
+```
+
+### Story Tags
+
+| Tag | Purpose |
+|-----|---------|
+| `autodocs` | Enable automatic documentation |
+| `interaction` | Include in interaction test runs |
+| `skip-a11y` | Exclude from a11y tests (use sparingly) |
+
+## Route Testing
+
+Mock loaders, actions, and React Router context:
+
+```typescript
+// src/routes/_app.product.$productId.test.tsx
+import { describe, test, expect, vi } from 'vitest';
+import { render } from '@testing-library/react';
+
+vi.mock('@/components/product-view', () => ({
+    default: ({ product }: any) => (
+        <div data-testid="product-view">
+            <div data-testid="product-name">{product?.name}</div>
+        </div>
+    ),
+}));
+```
+
+## Test Organization
+
+```
+src/
+├── components/
+│   ├── product-card/
+│   │   ├── index.tsx              # Component
+│   │   ├── index.test.tsx         # Unit tests
+│   │   └── stories/
+│   │       └── index.stories.tsx  # Stories
+├── routes/
+│   ├── _app.product.$productId.tsx
+│   └── _app.product.$productId.test.tsx
+└── test-utils/                    # Shared utilities
+    ├── config.ts
+    └── context-provider-utils.ts
+```
+
+## Best Practices
+
+1. **Colocate tests** — Keep test files next to source files
+2. **Use test utilities** — Leverage `@/test-utils` for mocks and providers
+3. **Mock external dependencies** — Use `vi.mock()` for API clients and context
+4. **Test interactions** — Use `@testing-library/user-event` and Storybook play functions
+5. **Test accessibility** — Use Storybook a11y addon
+6. **Multiple story variants** — Create stories for Default, Loading, Error states
+7. **Use viewport toolbar** — Test responsive layouts via Storybook's built-in viewport toolbar
+
+## Related Skills
+
+- `storefront-next:sfnext-components` - Component patterns that need testing
+- `storefront-next:sfnext-data-fetching` - Mocking loaders and actions in tests
+- `storefront-next:sfnext-page-designer` - Testing Page Designer components
+
+## Reference Documentation
+
+- [Storybook Patterns Reference](references/STORYBOOK-PATTERNS.md) - Advanced story patterns and testing

package/node_modules/@salesforce/b2c-agent-plugins/storefront-next/skills/sfnext-testing/references/STORYBOOK-PATTERNS.md

@@ -0,0 +1,118 @@
+# Storybook Patterns Reference
+
+## Story File Structure
+
+```typescript
+// src/components/my-component/stories/index.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { within, expect, userEvent } from 'storybook/test';
+import { waitForStorybookReady } from '@storybook/test-utils';
+import { MyComponent } from '../my-component';
+import { ConfigProvider } from '@/config/context';
+import { mockConfig } from '@/test-utils/config';
+
+const meta: Meta<typeof MyComponent> = {
+    title: 'Components/MyComponent',
+    component: MyComponent,
+    tags: ['autodocs', 'interaction'],
+    decorators: [
+        (Story) => (
+            <ConfigProvider config={mockConfig}>
+                <Story />
+            </ConfigProvider>
+        ),
+    ],
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+```
+
+## Story Variants
+
+Create stories for different component states:
+
+```typescript
+export const Default: Story = {
+    args: { title: 'Default Title' },
+};
+
+export const Loading: Story = {
+    args: { isLoading: true },
+};
+
+export const Error: Story = {
+    args: { error: 'Something went wrong' },
+};
+
+export const Empty: Story = {
+    args: { items: [] },
+};
+```
+
+## Interaction Tests (Play Functions)
+
+```typescript
+export const WithInteraction: Story = {
+    args: { title: 'Interactive' },
+    play: async ({ canvasElement }) => {
+        await waitForStorybookReady(canvasElement);
+        const canvas = within(canvasElement);
+
+        // Assert initial state
+        await expect(canvas.getByText('Interactive')).toBeInTheDocument();
+
+        // Simulate user interaction
+        const button = canvas.getByRole('button');
+        await userEvent.click(button);
+
+        // Assert result
+        await expect(canvas.getByText('Clicked!')).toBeInTheDocument();
+    },
+};
+```
+
+## Decorators
+
+Wrap stories with required providers:
+
+```typescript
+// Single provider
+decorators: [
+    (Story) => (
+        <ConfigProvider config={mockConfig}>
+            <Story />
+        </ConfigProvider>
+    ),
+],
+
+// Multiple providers
+decorators: [
+    (Story) => (
+        <ConfigProvider config={mockConfig}>
+            <AuthProvider auth={mockAuth}>
+                <Story />
+            </AuthProvider>
+        </ConfigProvider>
+    ),
+],
+```
+
+## Responsive Testing
+
+Use Storybook's built-in viewport toolbar instead of creating separate Mobile/Tablet/Desktop stories. The viewport selector in the toolbar lets you test components at different screen sizes interactively.
+
+## Accessibility Testing
+
+Stories with the `autodocs` tag are automatically included in a11y test runs. Use `skip-a11y` only for stories that intentionally violate a11y rules (e.g., testing error states):
+
+```typescript
+export const ErrorState: Story = {
+    tags: ['skip-a11y'],
+    args: { error: 'Missing required field' },
+};
+```
+
+## Story Coverage
+
+Run `pnpm generate:story-tests:coverage` to check which components have stories and which need them. Every reusable component in `src/components/` should have a corresponding `.stories.tsx` file.

package/node_modules/@salesforce/b2c-agent-plugins/storefront-next-figma/.codex-plugin/plugin.json

@@ -0,0 +1,40 @@
+{
+  "name": "storefront-next-figma",
+  "version": "1.3.3",
+  "description": "Figma design-kit skills for Storefront Next verticals — duplicate the kit, sync brand variables, and publish Code Connect. Requires the Figma MCP server.",
+  "author": {
+    "name": "Salesforce"
+  },
+  "homepage": "https://salesforcecommercecloud.github.io/b2c-developer-tooling/",
+  "repository": "https://github.com/SalesforceCommerceCloud/b2c-developer-tooling",
+  "license": "Apache-2.0",
+  "keywords": [
+    "salesforce",
+    "storefront-next",
+    "figma",
+    "design-system",
+    "b2c-commerce",
+    "commerce-cloud"
+  ],
+  "skills": "./skills/",
+  "interface": {
+    "displayName": "Storefront Next Figma",
+    "shortDescription": "Sync Storefront Next brand tokens with the Figma design kit.",
+    "longDescription": "Skills for keeping the Storefront Next design system in sync with Figma — duplicate the official kit for a new vertical, update Brand variable collections from brand.css, edit components at the correct layer, and publish Figma Code Connect mappings. Requires the Figma MCP server to be configured in your AI tool.",
+    "developerName": "Salesforce",
+    "category": "Productivity",
+    "capabilities": [
+      "Read"
+    ],
+    "logo": "./assets/logo.svg",
+    "composerIcon": "./assets/logo.svg",
+    "brandColor": "#0D9DDA",
+    "websiteURL": "https://salesforcecommercecloud.github.io/b2c-developer-tooling/",
+    "defaultPrompt": [
+      "Duplicate the Storefront Next Figma kit for a new vertical",
+      "Sync my brand.css tokens into the Figma Brand variables",
+      "Update a component in the Figma kit and publish Code Connect",
+      "Set up the Figma kit for my new storefront brand"
+    ]
+  }
+}

package/node_modules/@salesforce/b2c-agent-plugins/storefront-next-figma/README.md

@@ -0,0 +1,45 @@
+# storefront-next-figma
+
+Agent skills for keeping a Salesforce B2C **Storefront Next** project in sync with its **Figma** design kit — duplicate the official kit for a new vertical, sync Brand variable collections from `brand.css`, edit components at the correct layer, and publish Figma Code Connect mappings.
+
+Part of the [B2C Developer Tooling](https://github.com/SalesforceCommerceCloud/b2c-developer-tooling) marketplace. This is the design-kit companion to the [`storefront-next`](../storefront-next) plugin — use them together when theming a vertical.
+
+## ⚠️ Prerequisite: Figma MCP server
+
+**These skills require the [Figma MCP server](https://www.figma.com/developers) to be configured in your AI tool.** The workflow reads and edits Figma files through MCP tools. Without it, the skill can only act as a manual checklist.
+
+Before using this plugin:
+
+1. Add the Figma MCP server to your AI tool's MCP configuration (see your IDE's MCP docs).
+2. Have a Figma URL with a `node-id` parameter for the frame or component you want to work with — in Figma, right-click a frame → **Copy/Paste as → Copy link**; the URL contains `node-id=<value>`.
+3. Confirm you have edit access to the target Figma file.
+
+If the Figma MCP server is not connected, stop and configure it first.
+
+## Installation
+
+```bash
+# Claude Code
+claude plugin marketplace add SalesforceCommerceCloud/b2c-developer-tooling
+claude plugin install storefront-next-figma@b2c-developer-tooling
+
+# GitHub Copilot CLI
+copilot plugin marketplace add SalesforceCommerceCloud/b2c-developer-tooling
+copilot plugin install storefront-next-figma@b2c-developer-tooling
+```
+
+**VS Code (GitHub Copilot):** Command Palette → **Chat: Install Plugin From Source** → enter the repo `SalesforceCommerceCloud/b2c-developer-tooling`.
+
+**Codex:** open the repo as a workspace, restart Codex, then install from the **B2C Developer Tooling** marketplace in the plugin directory.
+
+For file-copy install to any supported IDE, use `b2c setup skills storefront-next-figma`. See the [install guide](https://salesforcecommercecloud.github.io/b2c-developer-tooling/guide/agent-skills) for details.
+
+## What's included
+
+- **`sfnext-create-figma-kit`** — duplicate the official Storefront Next Figma kit for a new vertical, update Brand variables from `src/theme/tokens/brand.css`, edit components at the correct layer (primitive vs composition), and publish Code Connect stubs
+
+See [`skills/`](./skills/) for the full list.
+
+## License
+
+Apache-2.0. See the [repo LICENSE](https://github.com/SalesforceCommerceCloud/b2c-developer-tooling/blob/main/LICENSE.txt).

package/node_modules/@salesforce/b2c-agent-plugins/storefront-next-figma/assets/logo.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 64">
+  <defs>
+    <style>
+      .cls-1, .cls-2 {
+        fill: #fff;
+      }
+
+      .cls-3 {
+        fill: #0d9dda;
+      }
+
+      .cls-2 {
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path class="cls-3" d="m38.33,6.98c2.95-3.07,7.05-4.98,11.59-4.98,6.04,0,11.3,3.37,14.11,8.36,2.44-1.09,5.14-1.7,7.97-1.7,10.89,0,19.71,8.9,19.71,19.89s-8.83,19.89-19.71,19.89c-1.33,0-2.63-.13-3.88-.39-2.47,4.4-7.18,7.38-12.58,7.38-2.26,0-4.4-.52-6.3-1.45-2.5,5.89-8.34,10.02-15.13,10.02s-13.11-4.48-15.43-10.76c-1.01.21-2.06.33-3.14.33-8.43,0-15.26-6.9-15.26-15.42,0-5.71,3.07-10.69,7.63-13.36-.94-2.16-1.46-4.55-1.46-7.05C6.45,7.94,14.4,0,24.21,0,29.97,0,35.09,2.74,38.33,6.98Z"/>
+  <g>
+    <path class="cls-1" d="m13.53,33.19c-.06.15.02.18.04.21.17.12.35.21.52.32.93.49,1.81.64,2.73.64,1.88,0,3.04-1,3.04-2.6v-.03c0-1.48-1.32-2.02-2.55-2.41l-.16-.05c-.93-.3-1.73-.56-1.73-1.18v-.03c0-.52.47-.91,1.2-.91.81,0,1.77.27,2.38.61,0,0,.18.12.25-.06.04-.1.35-.94.38-1.03.04-.1-.03-.17-.09-.21-.71-.43-1.68-.72-2.69-.72h-.19c-1.72,0-2.92,1.04-2.92,2.52v.03c0,1.57,1.32,2.07,2.56,2.43l.2.06c.9.28,1.68.52,1.68,1.15v.03c0,.58-.51,1.01-1.32,1.01-.32,0-1.33,0-2.42-.7-.13-.08-.21-.13-.31-.19-.05-.03-.19-.09-.25.08l-.37,1.03Z"/>
+    <path class="cls-1" d="m40.98,33.19c-.06.15.02.18.04.21.17.12.35.21.52.32.93.49,1.81.64,2.73.64,1.88,0,3.04-1,3.04-2.6v-.03c0-1.48-1.31-2.02-2.55-2.41l-.16-.05c-.93-.3-1.73-.56-1.73-1.18v-.03c0-.52.47-.91,1.2-.91.81,0,1.77.27,2.38.61,0,0,.18.12.25-.06.04-.1.35-.94.38-1.03.04-.1-.03-.17-.09-.21-.71-.43-1.68-.72-2.69-.72h-.19c-1.72,0-2.92,1.04-2.92,2.52v.03c0,1.57,1.32,2.07,2.56,2.43l.2.06c.9.28,1.68.52,1.68,1.15v.03c0,.58-.51,1.01-1.32,1.01-.32,0-1.33,0-2.42-.7-.13-.08-.21-.13-.31-.19-.03-.02-.19-.08-.25.08l-.37,1.03Z"/>
+    <path class="cls-1" d="m61.29,28.36c-.15-.52-.39-.98-.71-1.36-.32-.38-.72-.69-1.2-.91-.48-.22-1.04-.34-1.68-.34s-1.2.11-1.68.34c-.48.22-.88.53-1.2.91-.32.38-.56.84-.71,1.36-.15.52-.23,1.08-.23,1.68s.08,1.17.23,1.68c.15.52.39.98.71,1.36.32.38.73.69,1.2.91.48.22,1.04.33,1.68.33s1.2-.11,1.68-.33c.48-.22.88-.52,1.2-.91.32-.38.56-.84.71-1.36.15-.52.23-1.08.23-1.68s-.08-1.17-.23-1.68m-1.57,1.68c0,.91-.17,1.62-.5,2.13-.33.5-.83.74-1.52.74s-1.19-.24-1.52-.74c-.33-.51-.5-1.22-.5-2.13s.17-1.62.49-2.12c.33-.5.82-.74,1.52-.74s1.19.24,1.52.74c.33.5.5,1.21.5,2.12"/>
+    <path class="cls-2" d="m74.15,32.67c-.05-.15-.2-.09-.2-.09-.23.09-.47.17-.73.21-.26.04-.55.06-.86.06-.76,0-1.36-.23-1.79-.67-.43-.45-.68-1.17-.67-2.14,0-.89.22-1.55.6-2.06.38-.51.96-.76,1.74-.76.65,0,1.14.07,1.66.24,0,0,.12.05.18-.11.14-.38.24-.65.39-1.07.04-.12-.06-.17-.1-.18-.2-.08-.68-.21-1.04-.26-.34-.05-.73-.08-1.17-.08-.66,0-1.24.11-1.75.34-.5.22-.92.53-1.26.91-.34.38-.59.84-.76,1.36-.17.52-.26,1.08-.26,1.69,0,1.3.35,2.35,1.04,3.12.69.77,1.73,1.16,3.09,1.16.8,0,1.62-.16,2.22-.4,0,0,.11-.05.06-.19l-.38-1.06Z"/>
+    <path class="cls-2" d="m82.16,28.07c-.13-.5-.46-1.01-.68-1.24-.34-.37-.67-.62-1.01-.77-.43-.19-.95-.31-1.52-.31-.66,0-1.26.11-1.75.34-.49.23-.9.54-1.22.93-.32.39-.56.85-.72,1.38-.15.52-.23,1.09-.23,1.69s.08,1.18.24,1.69c.16.52.42.97.77,1.35.35.38.8.68,1.33.88.53.21,1.18.31,1.92.31,1.53,0,2.34-.35,2.67-.53.06-.03.11-.09.05-.25l-.35-.97c-.05-.14-.2-.09-.2-.09-.38.14-.92.39-2.18.39-.82,0-1.43-.24-1.81-.62-.39-.39-.58-.96-.62-1.76h5.3s.14,0,.15-.13c0-.06.18-1.09-.16-2.28Zm-5.27,1.11c.07-.5.21-.92.43-1.25.32-.5.82-.77,1.52-.77s1.15.27,1.48.77c.22.33.31.76.35,1.25h-3.78Z"/>
+    <path class="cls-2" d="m39.72,28.07c-.13-.5-.46-1.01-.68-1.24-.34-.37-.67-.62-1.01-.77-.43-.19-.95-.31-1.52-.31-.66,0-1.26.11-1.75.34-.49.23-.9.54-1.22.93-.32.39-.56.85-.72,1.38-.15.52-.23,1.09-.23,1.69s.08,1.18.24,1.69c.16.52.42.97.77,1.35.35.38.8.68,1.33.88.53.21,1.18.31,1.92.31,1.53,0,2.34-.35,2.67-.53.06-.03.11-.09.04-.25l-.35-.97c-.05-.14-.2-.09-.2-.09-.38.14-.92.39-2.18.39-.82,0-1.43-.24-1.81-.62-.39-.39-.58-.96-.62-1.76h5.3s.14,0,.15-.13c0-.06.18-1.09-.16-2.28Zm-5.27,1.11c.07-.5.21-.92.43-1.25.33-.5.82-.77,1.52-.77s1.15.27,1.49.77c.22.33.31.76.35,1.25h-3.78Z"/>
+    <path class="cls-1" d="m25.1,28.92c-.22-.02-.49-.02-.83-.02-.45,0-.89.06-1.31.17-.41.11-.79.28-1.11.51-.32.23-.58.52-.77.87-.19.35-.28.76-.28,1.22s.08.88.24,1.21c.16.33.39.61.69.83.29.21.66.37,1.08.47.42.09.89.14,1.4.14.54,0,1.09-.05,1.61-.13.52-.09,1.16-.22,1.33-.26.18-.04.37-.09.37-.09.13-.03.12-.17.12-.17v-4.85c0-1.06-.29-1.85-.85-2.34-.56-.49-1.37-.73-2.43-.73-.4,0-1.04.05-1.42.13,0,0-1.16.22-1.63.6,0,0-.1.06-.05.21l.38,1.01c.05.13.17.09.17.09,0,0,.04-.02.09-.04,1.02-.55,2.31-.54,2.31-.54.57,0,1.01.12,1.31.34.29.22.44.56.44,1.26v.22c-.45-.07-.87-.1-.87-.1Zm-2.11,3.72c-.21-.17-.24-.21-.31-.31-.1-.16-.16-.39-.16-.69,0-.47.15-.8.47-1.03,0,0,.46-.4,1.54-.38.76,0,1.44.12,1.44.12v2.41h0s-.67.14-1.43.19c-1.08.06-1.56-.31-1.55-.31Z"/>
+    <path class="cls-2" d="m67.84,26.19c.04-.12-.04-.18-.08-.19-.09-.03-.54-.13-.89-.15-.67-.04-1.04.07-1.37.22-.33.15-.69.39-.9.66v-.65c0-.09-.06-.16-.15-.16h-1.36c-.09,0-.15.07-.15.16v7.91c0,.09.07.16.16.16h1.39c.09,0,.16-.07.16-.16v-3.95c0-.53.06-1.06.18-1.39.11-.33.27-.59.46-.78.19-.19.41-.32.65-.39.25-.08.52-.1.71-.1.28,0,.58.07.58.07.1.01.16-.05.19-.14.09-.24.35-.97.4-1.11Z"/>
+    <path class="cls-2" d="m54.77,22.53c-.17-.05-.32-.09-.52-.12-.2-.04-.45-.06-.72-.06-.96,0-1.71.27-2.24.81-.53.53-.89,1.34-1.06,2.4l-.06.36h-1.2s-.15,0-.18.15l-.2,1.1c-.01.11.03.17.17.17h1.17l-1.19,6.63c-.09.53-.2.97-.32,1.31-.12.33-.23.57-.37.75-.14.17-.26.3-.48.37-.18.06-.39.09-.62.09-.13,0-.3-.02-.43-.05-.13-.02-.19-.05-.29-.09,0,0-.14-.05-.19.09-.04.11-.36.97-.39,1.08-.04.1.02.19.08.21.16.06.27.09.48.14.29.07.54.07.78.07.49,0,.93-.07,1.3-.2.37-.13.69-.37.98-.68.31-.34.5-.7.69-1.19.18-.48.34-1.08.47-1.78l1.19-6.76h1.75s.15,0,.18-.15l.2-1.1c.01-.11-.03-.17-.17-.17h-1.69s.09-.63.28-1.2c.08-.24.24-.43.37-.57.13-.13.28-.22.44-.28.17-.05.36-.08.57-.08.16,0,.32.02.44.04.16.03.23.05.27.07.17.05.2,0,.23-.08l.41-1.11c.04-.12-.06-.17-.1-.18Z"/>
+    <path class="cls-2" d="m31.1,33.99c0,.09-.06.16-.15.16h-1.41c-.09,0-.15-.07-.15-.16v-11.31c0-.09.06-.16.15-.16h1.41c.09,0,.15.07.15.16v11.31Z"/>
+  </g>
+</svg>

package/node_modules/@salesforce/b2c-agent-plugins/storefront-next-figma/plugin.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://agent-plugins.org/schemas/1.0.0/plugin.schema.json",
+  "name": "storefront-next-figma",
+  "version": "1.3.3",
+  "description": "Figma design-kit skills for Storefront Next verticals — duplicate the kit, sync brand variables, and publish Code Connect. Requires the Figma MCP server.",
+  "author": {
+    "name": "Salesforce"
+  },
+  "homepage": "https://salesforcecommercecloud.github.io/b2c-developer-tooling/",
+  "repository": "https://github.com/SalesforceCommerceCloud/b2c-developer-tooling",
+  "license": "Apache-2.0",
+  "keywords": [
+    "salesforce",
+    "storefront-next",
+    "figma",
+    "design-system",
+    "b2c-commerce",
+    "commerce-cloud"
+  ],
+  "extensions": {
+    "com.openai": {
+      "interface": {
+        "displayName": "Storefront Next Figma",
+        "shortDescription": "Sync Storefront Next brand tokens with the Figma design kit.",
+        "longDescription": "Skills for keeping the Storefront Next design system in sync with Figma — duplicate the official kit for a new vertical, update Brand variable collections from brand.css, edit components at the correct layer, and publish Figma Code Connect mappings. Requires the Figma MCP server to be configured in your AI tool.",
+        "developerName": "Salesforce",
+        "category": "Productivity",
+        "capabilities": [
+          "Read"
+        ],
+        "logo": "./assets/logo.svg",
+        "composerIcon": "./assets/logo.svg",
+        "brandColor": "#0D9DDA",
+        "websiteURL": "https://salesforcecommercecloud.github.io/b2c-developer-tooling/",
+        "defaultPrompt": [
+          "Duplicate the Storefront Next Figma kit for a new vertical",
+          "Sync my brand.css tokens into the Figma Brand variables",
+          "Update a component in the Figma kit and publish Code Connect",
+          "Set up the Figma kit for my new storefront brand"
+        ]
+      }
+    }
+  }
+}

package/node_modules/@salesforce/b2c-agent-plugins/storefront-next-figma/skills/sfnext-create-figma-kit/SKILL.md

@@ -0,0 +1,133 @@
+---
+name: sfnext-create-figma-kit
+description: Build or sync a Storefront Next vertical's Figma design kit — duplicate the official kit, update Brand variable collections from brand.css, edit components at the correct layer, and publish Figma Code Connect mappings. Use when asked to set up, duplicate, or sync a Figma kit, update Figma brand variables, or keep design and code tokens aligned. Requires the Figma MCP server.
+---
+
+# Create a Figma Kit Skill
+
+This skill is the entrypoint for setting up or syncing the **Figma design kit** for a Storefront Next vertical, so the kit stays aligned with the brand tokens defined in code.
+
+It is the design-kit companion to `sfnext-create-vertical` (in the `storefront-next` plugin): create or change the brand tokens in code first, then run this skill to mirror them in Figma.
+
+## Step 0 — Verify prerequisites (required)
+
+This workflow uses the **Figma MCP server**. Before proceeding, confirm:
+
+- [ ] The Figma MCP server is connected in your AI tool's MCP configuration.
+- [ ] You have a Figma URL with a `node-id` parameter for the component or frame to work with.
+- [ ] You have edit access to the Figma file.
+
+**If the Figma MCP server is not connected, stop here.** Configure it (see your IDE's MCP docs), then return to this skill.
+
+**Getting a node-id:** in Figma, right-click any frame or component → **Copy/Paste as → Copy link**. The URL contains `node-id=<value>`.
+
+## Source kit
+
+Duplicate the official **Storefront Next Design System** community kit:
+<https://www.figma.com/community/file/1646023293012114166>
+
+Open the community file in Figma and use **Open in Figma → Duplicate** to copy it into your own drafts, then move it into your team project. Record the new file key in your project's design-system notes (e.g. `docs/design-system/FIGMA_FILE_KEYS.md`) so the mapping is reproducible.
+
+## Workflow
+
+### Phase 1 — Duplicate the official kit
+
+Do this in Figma (API duplication needs elevated OAuth scopes):
+
+1. Open the official kit.
+2. File menu → **Duplicate to your drafts**.
+3. Move the duplicate into the correct team project.
+4. Rename it: `Storefront NEXT — [Vertical Name]`.
+5. Copy the new file key from the URL (`figma.com/design/<FILE_KEY>/...`) and record it.
+
+### Phase 2 — Update variable collections (tokens first)
+
+Update **only** the Brand collection values to match `src/theme/tokens/brand.css`. Do not edit Semantic/Core values directly — they alias the Brand values.
+
+| CSS variable (`brand.css`) | Figma variable |
+|----------------------------|----------------|
+| `--brand-black` | `Brand / black` |
+| `--brand-white` | `Brand / white` |
+| `--brand-gray-50` … `--brand-gray-950` | `Brand / gray-*` |
+| `--brand-primary` | `Brand / primary` |
+
+**Non-negotiable color rule:** all fills/strokes/effects bind to variables. No raw hex/RGB. If no existing variable fits, stop, document the node and reason, propose a name/value, and get approval before creating it. See [Figma Component Editing Reference](references/FIGMA-COMPONENT-EDITING.md).
+
+### Phase 3 — Typography
+
+If the vertical uses custom fonts, update the text styles (`text/body`, `text/label`, `text/heading`) and make sure the fonts are available via the Figma Font Service or uploaded custom fonts.
+
+### Phase 4 — Component edits at the correct layer
+
+When a component needs to change, edit at the right layer and respect the instance/component boundary — you cannot append children to an instance; edit the source component. See [Figma Component Editing Reference](references/FIGMA-COMPONENT-EDITING.md) for the layer table and the extend-before-create rule, and [Vertical → Figma Kit Sync Reference](references/VERTICAL-FIGMA-SYNC.md) for tracing code changes to the right Figma node.
+
+### Phase 5 — Code Connect
+
+Maintain `.figma.ts` mappings for components and publish them after changes.
+
+```typescript
+// src/components/ui/<component>.figma.ts
+import { figma } from '@figma/code-connect'
+import { ComponentName } from './<component>'
+
+figma.connect(ComponentName, 'FIGMA_FILE_URL', {
+  props: {
+    variant: figma.enum('Variant', {
+      default: 'default',
+      secondary: 'secondary',
+    }),
+  },
+  example: ({ variant }) => <ComponentName variant={variant} />,
+})
+```
+
+Replace `FIGMA_FILE_URL` with the full Figma URL including `node-id`, then publish:
+
+```bash
+FIGMA_ACCESS_TOKEN=<your-token> npx figma connect publish
+```
+
+### Phase 6 — Publish and maintain
+
+1. Publish the Figma library.
+2. Notify the design team to accept updates.
+
+Ongoing: token change in `brand.css` → update Brand variables → republish. Component prop/variant change → update `.figma.ts` → republish Code Connect.
+
+## Execution modes
+
+- **Assisted (Figma MCP automation):** validate target nodes before mutation (component vs instance), apply one logical batch at a time (tokens → logo → components), screenshot after each batch, keep every color operation variable-bound. Best for bulk token updates and repeated component edits.
+- **Manual:** use this workflow as a checklist while editing directly in Figma; keep a change log (file key · pages/components changed · variables touched · publish timestamp); run Code Connect publish from the terminal. Best for one-off or design-led sessions without MCP access.
+
+## Required outcomes
+
+- Vertical Figma file duplicated, renamed, and its key recorded.
+- Brand variables synced from `src/theme/tokens/brand.css`; no detached hex/RGB.
+- Source component edits propagate to instances (verified by screenshot).
+- Code Connect mappings updated and published when components changed.
+- Library republished and announced to the design team.
+
+## Verification
+
+If you changed `.figma.ts` mappings or component code as part of the sync, run from the monorepo root:
+
+```bash
+pnpm typecheck
+pnpm lint
+pnpm test-storybook:snapshot:agent
+```
+
+All three must pass with zero errors and zero warnings.
+
+## Related Skills
+
+- `storefront-next:sfnext-create-vertical` - Define the brand tokens in code (run this first)
+- `storefront-next:sfnext-create-component` - Author the React component a Code Connect mapping points to
+
+## Reference Documentation
+
+- [Vertical → Figma Kit Sync Reference](references/VERTICAL-FIGMA-SYNC.md) - Tracing code changes to Figma nodes, logo and propagation steps
+- [Figma Component Editing Reference](references/FIGMA-COMPONENT-EDITING.md) - Edit layers, variable binding, instance vs component, plugin API gotchas
+- [Token System Reference](references/TOKEN-SYSTEM.md) - The brand/semantic token model shared with code
+- [Project Structure Reference](references/PROJECT-STRUCTURE.md) - Where brand tokens and `.figma.ts` mappings live
+- [Troubleshooting Reference](references/TROUBLESHOOTING.md) - Token and sync pitfalls

package/node_modules/@salesforce/b2c-agent-plugins/storefront-next-figma/skills/sfnext-create-figma-kit/evals/trigger-evals.json

@@ -0,0 +1,12 @@
+[
+  {"query": "I just finished defining the brand tokens for our new beauty vertical in brand.css. Now I need to duplicate the official Storefront Next Figma kit and update its Brand variable collection to match. How do I do that?", "should_trigger": true},
+  {"query": "Our brand.css primary color changed. How do I sync that into the Figma kit's Brand variables and republish the library so designers pick it up?", "should_trigger": true},
+  {"query": "Set up a Figma design kit for my new storefront brand — duplicate the base kit, swap the logo wordmark, and bind all fills to variables instead of raw hex.", "should_trigger": true},
+  {"query": "I edited the Button component and added a variant. How do I update the Figma Code Connect mapping (.figma.ts) and publish it so the Figma component links to the code?", "should_trigger": true},
+  {"query": "How do I keep my Storefront Next design tokens and the Figma kit in sync when I create a new vertical, using the Figma MCP server?", "should_trigger": true},
+  {"query": "I need to change the primary color of my storefront. Which token file in the code do I edit for a new vertical?", "should_trigger": false},
+  {"query": "Author a new ProductTile React component with CVA variants, data-slot attributes, and a Storybook story.", "should_trigger": false},
+  {"query": "How do I deploy my storefront bundle to Managed Runtime?", "should_trigger": false},
+  {"query": "Add an extension that injects a promo banner into the header target point.", "should_trigger": false},
+  {"query": "How do I set up i18next namespaces for a new locale in my storefront?", "should_trigger": false}
+]