Add Storefront Next design-system skills + storefront-next-figma plugin#489
Conversation
…ugin Adds the design-system / theming / Figma layer that the existing storefront-next plugin did not cover: - storefront-next: new sfnext-create-vertical skill (brand token theming, typography, dark-mode contrast, fixtures, extension-vs-base decision) - storefront-next: new sfnext-create-component skill (design-system authoring: layer model, CVA, data-slot, a11y, Storybook; complements the existing engineering-focused sfnext-components) - storefront-next: enhance sfnext-extensions with a base-audit decision gate (extend vs token/variant override vs base slot) + BASE-AUDIT.md - new storefront-next-figma plugin with sfnext-create-figma-kit (duplicate kit, sync Brand variables from brand.css, Code Connect; requires the Figma MCP server) Each new skill ships references/ (UPPERCASE naming) and an evals/trigger-evals.json. Registers the new plugin in both marketplace manifests and adds a changeset. Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
|
|
||
| ```tsx | ||
| // ❌ WRONG — creating LushPrimaryButton when Button already exists | ||
| export function LushPrimaryButton({ children }: Props) { |
There was a problem hiding this comment.
Is this Lush the brand or the adjective? I know some folks have used them as examples. If so we should probably not reference it and make something up.
There was a problem hiding this comment.
Good catch — yes, that was the real Lush cosmetics brand. Rather than swap in another brand, I removed the brand reference entirely and made the examples vertical-agnostic, since this guidance (extend before create, don't duplicate the base, prefer a CVA variant over a new component) applies to any vertical. Specifically: LushPrimaryButton → BrandPrimaryButton, the lush CVA variant → brand, the brand-green hex → a generic #2e7d32, and if lush / if furniture → if verticalA / if verticalB. Zero Lush references remain. Fixed in edaced9.
There was a problem hiding this comment.
Update on the final state (commit 85eaa0e): I've aligned this reference with our canonical component-authoring guidance, so it's now fully vertical-agnostic with no brand reference remaining. The button example uses BrandPrimaryButton with a brand CVA variant and a generic green hex, and the shared-component anti-pattern reads if brandA / if brandB. Confirmed zero Lush (or any other brand) references anywhere in the PR.
|
|
||
| Do this in Figma (API duplication needs elevated OAuth scopes): | ||
|
|
||
| 1. Open the official kit. |
There was a problem hiding this comment.
Does this skill need any guidance for the official kit? It's this right? https://www.figma.com/community/file/1646023293012114166
Maybe just drop that link here.
There was a problem hiding this comment.
Yes — that's the right one. I've updated the Source kit section to point at the public Storefront Next Design System community kit (https://www.figma.com/community/file/1646023293012114166) and framed it as the official kit to duplicate. I also removed the internal file key reference entirely, since an internal Figma key shouldn't be exposed in a public repo. Fixed in edaced9.
There was a problem hiding this comment.
Confirmed in the final state (commit 85eaa0e): the Source kit section now points at the public Storefront Next Design System community kit (https://www.figma.com/community/file/1646023293012114166) and is framed as the official kit to duplicate. The internal Figma file key has been removed entirely — an internal key shouldn't be exposed in a public repo. Verified there are zero occurrences of the old internal key anywhere in the PR.
…Figma community kit - Remove brand-specific "Lush" references from component-authoring guidance; examples are now vertical-agnostic (BrandPrimaryButton, brand CVA variant, generic green hex, neutral if verticalA / if verticalB prose). - Point the Figma kit Source kit section at the public Storefront Next Design System community file instead of an internal file reference. Co-authored-by: Cursor <cursoragent@cursor.com>
…ference Align the packaged COMPONENT-AUTHORING references with the canonical vertical-agnostic guidance: vertical-neutral examples (ProductDetailsExtension, Specifications/Care Instructions/Shipping & Returns/Warranty Info, BrandPrimaryButton, brand CVA variant, if brandA/if brandB) with no brand-specific flavor. Co-authored-by: Cursor <cursoragent@cursor.com>
2 participants
Summary
Adds the design-system / theming / Figma layer that the existing
storefront-nextplugin does not cover. Four authoring skills, transformed to match this repo's conventions (singleSKILL.md+references/with UPPERCASE names +evals/trigger-evals.json,name/descriptionfrontmatter only — nopathsfield).1. New skill —
sfnext-create-vertical(storefront-next)Create a new brand theme / storefront variant through the brand token layer:
brand.cssediting, typography, dark-mode contrast checks, fixture-based local dev, and the extension-vs-base decision. Folds the original multi-doc WORKFLOW/EXECUTION-ADAPTERS content into oneSKILL.md.2. New skill —
sfnext-create-component(storefront-next)Design-system component authoring discipline: layer model, extend-before-create gate, CVA variants bound to semantic tokens,
data-slot, accessibility checklist, Storybook coverage. The description explicitly distinguishes it from the existing engineering-focusedsfnext-components(createPage / Suspense / shadcn) so they don't read as redundant.3. Enhancement —
sfnext-extensionsIntegrates only the unique value of our extend-page material: a base-audit decision gate (scan the base first; decide extend vs token/variant override vs base slot) plus a new
references/BASE-AUDIT.md. Does not duplicate thetarget-config.jsonmechanics already documented, and no standalone extend-page skill was added.4. New plugin —
storefront-next-figmaSibling to
storefront-next, modeled on the existing plugin layout (.codex-plugin/plugin.json,README.md,assets/logo.svg,skills/). Containssfnext-create-figma-kit: duplicate the kit, sync Brand variables frombrand.css, edit components at the correct layer, publish Code Connect. The README prominently notes the Figma MCP server prerequisite.Registration / discoverability
storefront-next-figmainskills/plugins.jsonso the release workflow packages and uploadsstorefront-next-figma-skills.zipautomatically — no workflow edits required. (storefront-nextis already listed, so the two new skills inside it are already covered.)storefront-next-figmato.claude-plugin/marketplace.jsonand.agents/plugins/marketplace.jsonfor discovery (entries mirror thestorefront-nextsibling exactly).skills/storefront-next/README.md(new skills + extensions note + companion-plugin link).@salesforce/b2c-agent-plugins(minor).evals/trigger-evals.jsonfor each new skill, matching the existing schema (auto-discovered byskills/eval/run_eval.py).Branch state
Synced with
main(clean merge, no conflicts) so it includes theskills/plugins.jsonmanifest mechanism.Test plan
plugin.json, both marketplace manifests,skills/plugins.json, alltrigger-evals.json).SKILL.mdhas validname+descriptionfrontmatter; nopathsfield (matches sibling skills).pnpm skills:eval(orrun_eval.py --discover skills/) to confirm the new skills trigger on positive prompts and stay quiet on negatives.storefront-next-figma-skills.zipis produced by the release workflow (driven by theskills/plugins.jsonentry).Made with Cursor