Liquid Theme Standards

This is the rulebook for teams building production Shopify themes who want to avoid the CSS soup and jQuery spaghetti that plagues most Liquid projects. It enforces BEM naming, design token systems with CSS custom properties, and Web Components instead of framework dependencies. The progressive enhancement approach is solid: semantic HTML first, then CSS, then JavaScript with native browser APIs only. Worth noting it handles the gotcha that `{% stylesheet %}` tags don't process Liquid variables, so you need inline styles for dynamic values. The defensive CSS patterns and logical properties for RTL support show this was written by someone who's debugged merchant storefronts at 2am. If you're building themes that need to scale across brands or survive a few years of maintenance, this keeps things sane.

skills.sh installs: 3.1K
GitHub stars: 120
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add benjaminsehl/liquid-skills --skill liquid-theme-standards --agent claude-code

Installs into .claude/skills of the current project.

Files

CSS, JS & HTML Standards for Shopify Liquid Themes

Core Principles

Progressive enhancement — semantic HTML first, CSS second, JS third
No external dependencies — native browser APIs only for JavaScript
Design tokens — never hardcode colors, spacing, or fonts
BEM naming — consistent class naming throughout
Defensive CSS — handle edge cases gracefully

CSS in Liquid Themes

Where CSS Lives

Location	Liquid?	Use For
`{% stylesheet %}`	No	Component-scoped styles (one per file)
`{% style %}`	Yes	Dynamic values needing Liquid (e.g., color settings)
`assets/*.css`	No	Shared/global styles

Critical: {% stylesheet %} does NOT process Liquid. Use inline style attributes for dynamic values:

{%- comment -%} Do: inline variables {%- endcomment -%}
<div
  class="hero"
  style="--bg-color: {{ section.settings.bg_color }}; --padding: {{ section.settings.padding }}px;"
>

{%- comment -%} Don't: Liquid inside stylesheet {%- endcomment -%}
{% stylesheet %}
  .hero { background: {{ section.settings.bg_color }}; } /* Won't work */
{% endstylesheet %}

SKILL.md on GitHub