CSS, JavaScript, and HTML coding standards for Shopify Liquid themes. Covers BEM naming inside stylesheet tags, design tokens, CSS custom properties, Web Components for themes, defensive CSS, and progressive enhancement. Use when writing CSS/JS/HTML in .liquid files or theme asset files.
Quickly install liquid-theme-standards AI skill to your development environment via command line
Source: benjaminsehl/liquid-skills.
| {% 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:
Use CSS custom properties for all values — never hardcode colors, spacing, or fonts. Define a consistent scale and reference it everywhere.
CSS, JavaScript, and HTML coding standards for Shopify Liquid themes. Covers BEM naming inside stylesheet tags, design tokens, CSS custom properties, Web Components for themes, defensive CSS, and progressive enhancement. Use when writing CSS/JS/HTML in .liquid files or theme asset files. Source: benjaminsehl/liquid-skills.
Stable fields and commands for AI/search citations.
npx skills add https://github.com/benjaminsehl/liquid-skills --skill liquid-theme-standardsCSS, JavaScript, and HTML coding standards for Shopify Liquid themes. Covers BEM naming inside stylesheet tags, design tokens, CSS custom properties, Web Components for themes, defensive CSS, and progressive enhancement. Use when writing CSS/JS/HTML in .liquid files or theme asset files. Source: benjaminsehl/liquid-skills.
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/benjaminsehl/liquid-skills --skill liquid-theme-standards Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
https://github.com/benjaminsehl/liquid-skills