Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add finsilabs/awesome-ecommerce-skills --skill storefront-theminggit clone --depth 1 https://github.com/finsilabs/awesome-ecommerce-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/finsilabs/awesome-ecommerce-skills/storefront-theming)<a href="https://agentmods.dev/skills/finsilabs/awesome-ecommerce-skills/storefront-theming"><img src="https://agentmods.dev/badge/skills/finsilabs/awesome-ecommerce-skills/storefront-theming/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/finsilabs/awesome-ecommerce-skills/storefront-theming"><img src="https://agentmods.dev/badge/skills/finsilabs/awesome-ecommerce-skills/storefront-theming.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00031 | $0.02740 |
| Opus 5 | $0.00015 | $0.01370 |
| Sonnet 5 | $0.00006 | $0.00548 |
| Haiku 4.5 | $0.00003 | $0.00274 |
Grade A, and why
storefront-theming scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 7d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 265 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Storefront Theming
Overview
Architect a theming system using design tokens and CSS custom properties that allows a storefront to be re-skinned for multiple brands without modifying component code. Covers the token taxonomy (color, typography, spacing, radius), runtime theme switching for dark mode, and white-label multi-tenant architecture where each tenant supplies their own token overrides.
When to Use This Skill
- When building a platform that will power multiple branded storefronts from a single codebase
- When implementing dark mode for a storefront
- When a rebrand requires changing colors across thousands of component instances without hunt-and-replace
- When handing off a design system to a team that needs to maintain brand consistency
Core Instructions
Step 1: Determine the merchant's platform and choose the right approach
| Platform | Recommended Approach | Why |
|---|---|---|
| Shopify | Use the Theme Editor's Color scheme system + edit config/settings_schema.json and assets/base.css to add custom CSS variables |
Shopify OS2.0 themes expose all brand colors, fonts, and border radii as Theme Editor settings that write to CSS variables automatically; no build step required |
| WooCommerce | Use the WordPress Global Styles system (WordPress 5.9+) with a block theme, or configure CSS variables in Appearance → Customize → Additional CSS for classic themes | Block themes using theme.json support a full design token system natively; classic themes need CSS custom properties added manually |
| BigCommerce | Configure theme settings in Storefront → My Themes → Customize — Cornerstone exposes colors, fonts, and spacing as Theme Editor variables; advanced customization via config.json and SCSS |
Cornerstone compiles SCSS with Handlebars template variables; custom CSS variables can be added to the global stylesheet |
| Custom / Headless | Build a three-tier token system (global → semantic → component) using CSS custom properties, compiled from JSON using Style Dictionary | Full control over token taxonomy, dark mode, and multi-tenant overrides; see implementation below |
What ships with it
7 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- evals/dark-mode-implementation/criteria.json 2.8 KB
- evals/dark-mode-implementation/task.md 2.5 KB
- evals/multi-tenant-theme-injection/criteria.json 2.5 KB
- evals/multi-tenant-theme-injection/task.md 2.2 KB
- evals/token-taxonomy-and-build-pipeline/criteria.json 2.7 KB
- evals/token-taxonomy-and-build-pipeline/task.md 1.9 KB
- tile.json 238 B
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 7d ago First seen · 265 lines · 31 tokens per session scan A a57f0c10750b
storefront-theming is a skill published in the GitHub repository finsilabs/awesome-ecommerce-skills (52 stars, last pushed 6mo ago), licensed MIT. It adds 31 tokens to every session and 2,740 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
Dark Mode Bug Finder
Detect dark mode rendering issues including contrast failures, missing theme tokens, image inversions, and transition glitches across components.
typography
Generate a type scale token file (CSS variables, tailwind config, or JS module) anchored on the type ratio detected by /scan. Use when the user wants to formalize their typography system, extract a scale from existing code, or scaffold typography tokens. Defaults to dry-run preview; pass --apply to write. Auto-picks…
color
Generate a color palette token file (CSS variables, tailwind config, or JS module) from the palette detected by /scan. Uses inferred role names (foreground, background, accent, danger, etc.) where possible, numeric fallback otherwise. Use when the user wants to formalize color tokens, extract a palette from existing…
motion
Generate motion tokens (durations + easings) using values detected by /scan, falling back to material-quality defaults when nothing was detected. Produces fast/normal/slow durations and standard/enter/exit easings. Use when the user wants to formalize motion tokens or scaffold a motion system. Defaults to dry-run…
tailwind
Generate one consolidated tailwind.config.js combining colors, spacing, fontFamily, fontSize, borderRadius, transitionDuration, and transitionTimingFunction from the manifest. Single file instead of four separate token cjs files. Use when setting up tailwind for the first time or refreshing the config after major…
css-in-js-architect
Architect scalable styling systems with Tailwind v4, CSS Modules, design tokens, dynamic theming, and container queries. Activate on: design tokens, theming system, Tailwind config, CSS architecture, container queries, dark mode. NOT for: component library creation (use design-system-creator), animation systems (use…