liquid-skills — Claude Code plugin: Liquid and Shopify
This plugin teaches Claude Code Shopify Liquid, frontend conventions, and accessibility patterns. Use it when building Shopify themes.
/plugin install liquid-skills@claude-plugins-official
/plugin marketplace add anthropics/claude-plugins-officialWhat liquid-skills does
liquid-skills adds three skills for Shopify theme work in Claude Code. shopify-liquid-themes covers JSON schema, LiquidDoc, filters, tags, objects, and translations. liquid-theme-standards guides CSS, JavaScript, and HTML work with BEM, design tokens, Web Components, and defensive CSS techniques.
liquid-theme-a11y focuses on WCAG patterns for ecommerce components. The plugin is tied to Shopify theme development, so its guidance is centered on Liquid and the structure of Shopify themes.
What it helps with
- understand Shopify JSON schema and LiquidDoc
- write Liquid templates with the right filters and tags
- structure theme CSS with BEM inside
{% stylesheet %} - apply WCAG patterns to a store component
Example prompts for the agent
- Create a Shopify theme section and review its Liquid, JSON schema, and LiquidDoc.
- Rewrite this component’s styles using BEM, design tokens, and Web Components.
- Check this store component against relevant WCAG patterns.
How to install liquid-skills
Plugin marketplace
/plugin install liquid-skills@claude-plugins-official/plugin marketplace add anthropics/claude-plugins-officialStep by step, with commands for each platform: Claude Code plugins: marketplaces, installing, and building your own
Questions about liquid-skills
How do I install liquid-skills in Claude Code?
Add the marketplace with /plugin marketplace add anthropics/claude-plugins-official, then install the plugin with /plugin install liquid-skills@claude-plugins-official.
What does liquid-skills do?
It gives Claude Code guidance for Shopify Liquid, CSS/JS/HTML conventions, and accessibility patterns used in theme components.
Which skills are included in liquid-skills?
The plugin includes shopify-liquid-themes, liquid-theme-standards, and liquid-theme-a11y. They cover Liquid language features, frontend conventions, and WCAG patterns for ecommerce components.
