skills.rest
tomtoto757
tomtoto757COMMUNITY
Explore all skills by this author →
GitHub

storefront-theming

Configure storefront theming with design tokens and CSS custom properties.

14|3|Updated Mar 22, 2026
Search Tags:#theming#multi-tenant#dark-mode#css-variables#design-tokens#style-dictionary
One-click install
npx skills add https://github.com/tomtoto757/ecomm-ai-skills-hub --skill storefront-theming-tomtoto757
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storefront-theming
Source: https://github.com/tomtoto757/ecomm-ai-skills-hub/tree/main/skills/storefront-shopping-experience/finsilabs/storefront-ui/storefront-theming
Command: npx skills add https://github.com/tomtoto757/ecomm-ai-skills-hub --skill storefront-theming-tomtoto757

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a repeatable theming architecture so teams can re-skin a single storefront codebase for multiple brands, enable dark mode, and apply per-tenant brand overrides without changing component code or rebuilding bundles.

Core Features & Use Cases

  • Design token taxonomy: Defines a three-tier token system (global → semantic → component) so values are authored once and referenced semantically across the UI.
  • Platform guidance: Prescriptive implementation patterns for Shopify, WooCommerce, BigCommerce, and custom/headless setups to wire tokens into theme editors or build pipelines.
  • Runtime theme switching & persistence: Patterns for data-theme attribute usage, media-query fallbacks, and synchronous initialization to prevent flash of unbranded content.
  • Multi-tenant white-labeling with safety: Server-side tenant CSS injection examples and a sanitization strategy that only permits safe CSS values (hex colors, lengths, font names) to mitigate injection risks.
  • Use Case: Power a SaaS storefront platform that serves hundreds of merchant brands from one deployable, letting each merchant supply a token override that is applied on first render.

Quick Start

Use the storefront-theming instructions to produce token JSON files, configure Style Dictionary with the prefix store, and implement server-side tenant CSS injection with a sanitizer to enable synchronous theme application.

Frequently Asked Questions about storefront-theming

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up multi-tenant storefront theming with runtime brand switching?▼

Multi-tenant storefront theming is set up using a three-tier design token taxonomy and CSS custom properties to enable runtime brand switching. Server-side tenant CSS injection applies per-tenant overrides on first render without rebuilding bundles.

How do I prevent FOUC when applying dark mode to a storefront?▼

To prevent FOUC during dark mode application, implement synchronous theme initialization using data-theme attributes and media-query fallbacks. This ensures styles are applied before the page renders, avoiding flash of unbranded content.

Does this theming approach work with Shopify, WooCommerce, and BigCommerce?▼

Yes, this theming approach works with Shopify, WooCommerce, BigCommerce, and headless storefronts. It provides prescriptive implementation patterns to wire design tokens into theme editors or build pipelines across these platforms.

What is a three-tier design token taxonomy for CSS variables?▼

A three-tier design token taxonomy for CSS variables defines values across global, semantic, and component tiers. This allows values to be authored once at the global level and referenced semantically across the UI without changing component code.

How do I sanitize server-side CSS injection for multi-tenant white-labeling?▼

Sanitizing server-side CSS injection for multi-tenant white-labeling requires a strategy that only permits safe CSS values like hex colors, lengths, and font names. This mitigates injection risks when applying merchant-supplied token overrides.

How do I configure Style Dictionary for multi-brand storefront themes?▼

Style Dictionary is configured for multi-brand storefront themes by processing token JSON files with a store prefix. This build pipeline outputs the CSS custom properties needed for semantic theming across different merchant brands.

Related Skills

Explore More Software Engineering Skills→
rp4rirp4ri

design-token-extractor

Extracts design tokens from CSS, SCSS, JavaScript, and Tailwind config files into CSS custom properties, Tailwind config, and Style Dictionary JSON.

Community
Advanced
EvanBaconEvanBacon
571

universal-theme

Automate cross-platform theme management for iOS, Android, and Web apps.

Community
Advanced
finsilabsfinsilabs
44

storefront-theming

Architect themeable storefronts with design tokens and CSS custom properties.

Official
Advanced
soeiroosoeiroo

theming-system

Develop scalable theming architectures with layered tokens for multi-brand applications.

Community
Advanced