sfnext-theming
Re-brand and re-skin a Storefront Next storefront: change the color palette, corner radius and shadows (shape tokens), header and footer colors, typography and web fonts, logo, favicon, hero scrims, and brand copy, with WCAG contrast checks. Use when asked to rebrand or restyle the storefront, change the primary color, swap the font, make the header dark, make cards rounded or flat, replace the logo, edit src/theme, core.css, header.css, brand.css, tailwind.css, base.css, or src/lib/fonts.ts, or verify a theme change in the Design System Storybook stories. Do not use for building or styling an individual component (use storefront-next:sfnext-components), Figma kit sync (use storefront-next-figma:sfnext-create-figma-kit), or site configuration (use storefront-next:sfnext-configuration).
Pinned to revision 0d6b966d3aa9, so it is the text this page describes rather than whatever the author pushed since.
Files
- skills/sfnext-theming/SKILL.md
- skills/sfnext-theming/evals/trigger-evals.json
- skills/sfnext-theming/references/REBRAND-CHECKLIST.md
Every link opens the file at its source, pinned to the revision this page describes.