Create a Component Skill

This skill is the authoring discipline for adding a new component to a Storefront Next storefront: choosing the right layer, reusing before creating, and meeting the token / a11y / Storybook requirements that keep the design system consistent.

It complements sfnext-components. That skill covers engineering patterns — createPage, Suspense/Await streaming, shadcn/ui setup, the cn() utility. This skill covers design-system authoring — the layer model, the extend-before-create gate, CVA variants bound to semantic tokens, data-slot, accessibility, and story coverage. Use both together when building UI.

Before you start — scan first (extend before create)

Do not create a new component file until you have run this scan:

1. Search src/components/ for components with a similar name or behaviour.
2. Search src/components/ui/ for Shadcn primitives — run npx shadcn@latest add <name> to check whether it exists before hand-rolling one.
3. Apply the REUSE / EXTEND / CREATE decision:
   • REUSE — an existing component already does this → use it as-is.
   • EXTEND — an existing component is close → add a new CVA variant (cheaper than a new file).
   • CREATE — nothing exists → proceed with this skill.

See Component Authoring Reference for the full layer model and the extend-before-create rule.