Skills
.Work. You
Rest

liquid-theme-standards

Community

Shopify Liquid theme coding standards

Software Engineering#html#javascript#css#coding standards#web components#liquid#shopify
Authorbenjaminsehl
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: liquid-theme-standards
Download link: https://github.com/benjaminsehl/liquid-skills/archive/main.zip#liquid-theme-standards

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.