liquid-theme-standards — Claude Code skill: overview and install
Defines frontend coding conventions for Shopify Liquid themes. Guides the agent to write consistent markup, styles, and scripts in theme files.
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-standards -a claude-codeWhat liquid-theme-standards does
This skill guides coding assistants through front-end development inside Shopify store themes. It enforces safe scoping practices: because {% stylesheet %} tags never parse template tags, dynamic settings are passed via inline CSS custom properties on container elements instead.
It restricts CSS specificity by disallowing ID selectors and !important. Classes follow flat BEM rules without chained child elements. Layout rules favor rem units, logical box properties for right-to-left scripts, container queries, and protective rules against layout shifts.
What it helps with
- enforce BEM class naming without nested selector bloat
- prevent Liquid syntax errors inside static stylesheet tags
- structure design tokens through CSS variables in root and component scopes
- implement logical CSS properties for RTL layout support
Example prompts for the agent
- Refactor this product card markup to follow theme BEM conventions
- Add responsive styles for the banner section using CSS variables for theme settings
- Check this theme stylesheet for high specificity selectors and physical padding properties
How to install liquid-theme-standards
1Skills CLI (Vercel)
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-standards -a claude-code2Manually: put the files in place
~/.claude/skills/liquid-theme-standards/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/liquid-theme-standards/
1Skills CLI (Vercel)
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-standards -a codex2Manually: put the files in place
.agents/skills/liquid-theme-standards/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-standards -a cursor2Manually: put the files in place
.cursor/skills/liquid-theme-standards/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install benjaminsehl/liquid-skills liquid-theme-standards2Manually: put the files in place
.github/skills/liquid-theme-standards/SKILL.md1Skills CLI (Vercel)
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-standards -a gemini-cli2Platform CLI
gemini skills install https://github.com/benjaminsehl/liquid-skills --path skills/liquid-theme-standardsManually: put the files in place
.devin/skills/liquid-theme-standards/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-standards -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about liquid-theme-standards
How to install liquid-theme-standards in Claude Code?
Run npx skills add benjaminsehl/liquid-skills --skill liquid-theme-standards -a claude-code in your terminal.
What does liquid-theme-standards do?
It teaches coding assistants standard frontend practices for Shopify themes, covering BEM syntax, CSS token hierarchy, and template limitations.
Why should dynamic settings stay out of stylesheet tags?
Shopify themes do not evaluate Liquid tags inside {% stylesheet %} blocks. Dynamic variables must be declared in inline styles on the wrapping element.
