# liquid-theme-standards

Defines frontend coding conventions for Shopify Liquid themes. Guides the agent to write consistent markup, styles, and scripts in theme files.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2900 installs · ★ 121
- Author: benjaminsehl
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/benjaminsehl/liquid-skills/tree/HEAD/skills/liquid-theme-standards/SKILL.md
- Updated: 2026-07-16
- HTML: https://affpapa.org/en/nevibecode/skills/liquid-theme-standards

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-standards -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/liquid-theme-standards/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/liquid-theme-standards/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-standards -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/liquid-theme-standards/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-standards -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/liquid-theme-standards/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install benjaminsehl/liquid-skills liquid-theme-standards
```

2. **Manually: put the files in place**
- File: `.github/skills/liquid-theme-standards/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-standards -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/benjaminsehl/liquid-skills --path skills/liquid-theme-standards
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/liquid-theme-standards/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-standards -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/benjaminsehl/liquid-skills/tree/HEAD/skills/liquid-theme-standards/SKILL.md

## When to use it
- 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
- 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

## Similar
- [shopify-theme-dev-liquid](https://affpapa.org/en/nevibecode/rules/shopify-theme-dev-liquid.md) — rule · ★ 41011
- [shopify-theme-optimization](https://affpapa.org/en/nevibecode/skills/shopify-theme-optimization.md) — skill · 1100 installs
- [css](https://affpapa.org/en/nevibecode/skills/css.md) — skill · 1200 installs
- [sass-best-practices](https://affpapa.org/en/nevibecode/skills/sass-best-practices.md) — skill · 845 installs
- [Frontend Responsive Design Standards](https://affpapa.org/en/nevibecode/skills/frontend-responsive-design-standards.md) — skill · 1200 installs
- [shopify-expert](https://affpapa.org/en/nevibecode/skills/shopify-expert.md) — skill · 5000 installs

From the same set: [benjaminsehl/liquid-skills](https://affpapa.org/en/nevibecode/by/benjaminsehl/liquid-skills.md) — 3 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md