liquid-theme-standards

Enforce BEM, design tokens, and Web Component standards in Shopify Liquid themes.

115|15|Updated Feb 18, 2026

Search Tags:#html #javascript #css #coding standards #web components #liquid #shopify

Ready to run

npx skills add https://github.com/benjaminsehl/liquid-skills --skill liquid-theme-standards

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: liquid-theme-standards
Source: https://github.com/benjaminsehl/liquid-skills/tree/main/skills/liquid-theme-standards
Command: npx skills add https://github.com/benjaminsehl/liquid-skills --skill liquid-theme-standards

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of best practices and standards for writing CSS, JavaScript, and HTML within Shopify Liquid themes, ensuring consistency, maintainability, and performance.

Core Features & Use Cases

Coding Standards: Enforces BEM naming, design token usage, and CSS specificity rules.
JavaScript Best Practices: Guides on Web Component patterns, event handling, and efficient data loading.
HTML Structure: Promotes native elements and progressive enhancement for accessibility and robustness.
Use Case: When developing a new theme component, consult this Skill to ensure your CSS follows BEM conventions and uses design tokens for colors and spacing, and your JavaScript is structured as a Web Component.

Quick Start

Follow the BEM naming convention for all CSS classes in your theme.

Frequently Asked Questions about liquid-theme-standards

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

FAQPage Schema

What are the coding standards for CSS and JavaScript in Shopify Liquid themes?▼

Shopify Liquid theme coding standards enforce BEM naming conventions, design token usage, CSS custom properties, and Web Component patterns. They ensure theme consistency, maintainability, and performance by utilizing native browser APIs and avoiding external JavaScript dependencies.

How do I structure JavaScript for a Shopify theme using Web Components?▼

Structure JavaScript for Shopify themes by implementing Web Component patterns, handling events efficiently, and loading data natively. This approach utilizes native browser APIs, avoids external dependencies, and maintains robust frontend functionality within the Liquid environment.

When should I use BEM naming and design tokens in Shopify theme development?▼

Use BEM naming and design tokens when developing new Shopify theme components to ensure CSS follows structured conventions. This practice manages CSS specificity, standardizes colors and spacing, and maintains long-term theme maintainability.

Does this Shopify Liquid coding standards approach require external JavaScript libraries?▼

No, this Shopify Liquid coding standards approach does not require external JavaScript libraries. It guides developers to utilize native browser APIs and avoid external dependencies, ensuring lightweight, performant theme code without additional framework overhead.

How do I ensure HTML accessibility and robustness in Shopify Liquid themes?▼

Ensure HTML accessibility and robustness in Shopify Liquid themes by promoting native HTML elements and applying progressive enhancement. This structural approach guarantees that theme components remain functional and accessible across various browser environments.

What is the best way to manage CSS specificity in Shopify Liquid themes?▼

The best way to manage CSS specificity in Shopify Liquid themes is by following BEM naming conventions and utilizing CSS custom properties. This standardized approach prevents styling conflicts and maintains predictable cascading behavior across theme components.