sfnext-create-vertical
Installation
SKILL.md
Create a Vertical Skill
This skill is the entrypoint for creating a new Storefront Next vertical — a brand theme or storefront variant (e.g. Beauty, Furniture, Grocery) layered on top of the shared template without forking shared code.
A vertical is built almost entirely from design tokens. The golden rule of the token system makes the whole approach possible:
Never use a raw hex value, RGB value, or hardcoded color in any component or CSS file. Always use a semantic Tailwind utility that maps to a CSS variable.
See Token System Reference for the full token map and semantic class meanings.
What a vertical is — and is not
| A vertical is | A vertical is not |
|---|---|
Token value changes in src/theme/tokens/brand.css |
Forking src/components/ui/ primitives |
Optional vertical composition in src/components/ and src/extensions/<vertical>/ |
Editing core.css, header.css, status.css, swatch.css, or components.css |
| Optional typography and i18n content | Adding if (vertical) branches to shared components |
Only src/theme/tokens/brand.css changes between verticals. Everything else is shared infrastructure.