liquid-skills

Q: How to install liquid-skills?

Create the skills directory: mkdir -p .claude/skills. Then run: mkdir -p .claude/skills && curl -o .claude/skills/liquid-skills.md https://raw.githubusercontent.com/Shopify/liquid-skills/main/plugins/liquid-skills/SKILL.md. Finally, /liquid-skills in Claude Code.

Q: What is liquid-skills best for?

liquid-skills is categorized under Development.

New

18Official PluginDevelopmentby Shopify

Liquid language fundamentals, CSS/JS/HTML coding standards, and WCAG accessibility patterns for Shopify themes

4 forksUpdated 6/15/2026First seen 5/22/2026

Summary

This skill provides expert guidance on Liquid templating fundamentals, CSS/JS/HTML coding standards, and WCAG accessibility patterns for building Shopify themes.

It helps developers write cleaner, more accessible, and maintainable Shopify theme code by enforcing best practices and avoiding common pitfalls.

Install & Usage

Create the skills directory

mkdir -p .claude/skills

Download the skill file

mkdir -p .claude/skills && curl -o .claude/skills/liquid-skills.md https://raw.githubusercontent.com/Shopify/liquid-skills/main/plugins/liquid-skills/SKILL.md

Invoke in Claude Code

/liquid-skills

Use Cases

Generate a Liquid snippet for a product card that meets Shopify coding standards and includes accessible markup.

Review a Shopify theme section for WCAG compliance and suggest fixes for color contrast and keyboard navigation.

Convert a raw HTML/CSS component into a reusable Liquid snippet with proper theme settings and schema.

Debug a Liquid template that is not rendering correctly due to missing or misused objects and filters.

Optimize a Shopify theme's JavaScript and CSS for performance while maintaining cross-browser compatibility.

Create a custom Shopify section with responsive design and ARIA attributes for screen reader support.

Usage Examples

/liquid-skills Create a Liquid snippet for a featured collection grid with hover effects, lazy loading images, and proper heading hierarchy.

Check this Shopify section for accessibility issues: [paste section code]

Convert this HTML card component into a Liquid snippet with settings for background color and text alignment.

View source on GitHub

Security Audits

LicenseUnknownSourcePassRepositoryPass

Frequently Asked Questions

What is liquid-skills?

This skill provides expert guidance on Liquid templating fundamentals, CSS/JS/HTML coding standards, and WCAG accessibility patterns for building Shopify themes. It helps developers write cleaner, more accessible, and maintainable Shopify theme code by enforcing best practices and avoiding common pitfalls.

How to install liquid-skills?

To install liquid-skills: create the skills directory (mkdir -p .claude/skills), then run: mkdir -p .claude/skills && curl -o .claude/skills/liquid-skills.md https://raw.githubusercontent.com/Shopify/liquid-skills/main/plugins/liquid-skills/SKILL.md. Finally, /liquid-skills in Claude Code.

What is liquid-skills best for?

liquid-skills is a skill categorized under Development. Created by Shopify.

What can I use liquid-skills for?

liquid-skills is useful for: Generate a Liquid snippet for a product card that meets Shopify coding standards and includes accessible markup.; Review a Shopify theme section for WCAG compliance and suggest fixes for color contrast and keyboard navigation.; Convert a raw HTML/CSS component into a reusable Liquid snippet with proper theme settings and schema.; Debug a Liquid template that is not rendering correctly due to missing or misused objects and filters.; Optimize a Shopify theme's JavaScript and CSS for performance while maintaining cross-browser compatibility.; Create a custom Shopify section with responsive design and ARIA attributes for screen reader support..