SkillFoxx

Shopify Liquid Theme Skills

Three skills for Shopify Liquid themes: language and schema, CSS and JavaScript standards, WCAG 2.2 accessibility

  • 121 ★ on the repository
  • Last commit
Skill

Minimal access

Why this level

  • The skills hold only instructions and references; they run nothing and call nothing themselves
All reasons and checks

benjaminsehl/liquid-skillsAuthor:benjaminsehl

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/shopify-liquid-theme-skills

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Minimal accessThe tool runs nothing and makes no network calls.

  • The skills hold only instructions and references; they run nothing and call nothing themselves

This is third-party code. Review the repository files before installing.

What it does

A set of three skills for Shopify theme development. `shopify-liquid-themes` explains the Liquid language and theme architecture: sections, blocks and snippets, the JSON schema format with 33 setting types, LiquidDoc and translations. Its references cover 152 filters, 30 tags and 137 objects with examples. `liquid-theme-standards` sets code rules: BEM inside the `{% stylesheet %}` tag, design tokens on CSS variables, Web Components, defensive CSS, logical properties for RTL and progressive enhancement. `liquid-theme-a11y` gathers WCAG 2.2 patterns for a storefront: product cards, carousels, a cart drawer, forms, filters, prices, modals, navigation and color swatches. The main skill files run 318, 420 and 448 lines, and the rest sits in `references/` subfolders. All three work with any Shopify Liquid theme.

Who it is for. Shopify theme developers and agencies who write sections and snippets with an agent and want one code style and accessible storefront components.

Good fit when

  • The agent creates a section with `{% schema %}`, and mistakes in the JSON schema or translation keys break the theme editor
  • A new snippet needs a LiquidDoc header and tidy BEM inside `{% stylesheet %}`
  • A cart drawer or product carousel is going through a WCAG 2.2 accessibility audit
  • A theme has to support RTL and its styles move to logical properties

Not a fit when

  • The store runs on another platform: the skills know only Liquid and Shopify theme structure
  • You need the full Shopify toolset such as API queries and apps: this set has no such coverage, see the official Shopify AI Toolkit plugin
  • You need a ready store design: the skills give code standards and contain no visual theme

Example request

Create a "Featured products" section with schema settings, a LiquidDoc header and an accessible carousel

Limitations

The skills describe Liquid themes with sections, blocks and JSON templates, and for older themes without blocks some advice will not fit. Reference files for filters, tags and objects are generated automatically and updated with the repository, so check API freshness against Shopify documentation yourself. The repository has no license file: GitHub detected no license. The last commit was made in July 2026, the project has no description or website, and no Shopify support is claimed.

How to disable. Remove the plugin with `claude plugin uninstall shopify-theme-skills` or delete the `shopify-liquid-themes`, `liquid-theme-standards` and `liquid-theme-a11y` folders from the skills directory by hand.

FAQ

How do I install Shopify Liquid Theme Skills in Claude Code?

Run `claude skill install --plugin shopify-theme-skills benjaminsehl/liquid-skills`. The command installs a plugin with three skills.

How do the three skills differ?

`shopify-liquid-themes` covers language and schema, `liquid-theme-standards` covers CSS, JavaScript and HTML style, and `liquid-theme-a11y` covers accessibility. All three apply to any Shopify Liquid theme.

Which patterns does the accessibility skill cover?

Product cards, carousels, a cart drawer, forms, filters, prices, modals, navigation and color swatches per WCAG 2.2. A separate reference covers focus trapping, arrow-key movement and screen reader announcements.

How many Liquid filters and objects are documented?

The references cover 152 filters, 30 tags and 137 objects, split into files for commerce, content and media. The author generates most of these files automatically.

Do I have to install all three skills?

The install command installs a plugin with all three skills at once. Each covers its own area, so for schema, styles or accessibility the agent relies on the matching one.

Discussion

No questions or reviews yet.

Skills

An Apple-style web design skill: a light ground, one white panel instead of scattered cards, glass only where layers overlap.

SkillMinimal access290

The Ludi Design System skill teaches an agent to choose components and build B2B interface pages by rules, with TSX templates

SkillMinimal access90

A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles

SkillMinimal access3.6K

A skill for interfaces without the generic AI look: typography, color, motion, component states and a critique of the result.

SkillMinimal access95

A skill that re-themes desktop AI apps such as Codex and WorkBuddy from a reference image and can restore the original look

SkillBroad access251

A Claude Code skill collection for copywriting, advertising, SEO and interface design: Ogilvy, editing, rules and CSS techniques.

SkillMinimal access469

README in short

The README introduces the three skills in a table, shows how they relate and gives each a file tree with notes. Installation is a single line and the text lists no environment requirements.

README badge

Original SKILL.md

---
name: shopify-liquid-themes
description: "Generate Shopify Liquid theme code (sections, blocks, snippets) with correct schema JSON, LiquidDoc headers, translation keys, and CSS/JS patterns. Use when creating or editing .liquid files for Shopify themes, working with schema, doc, stylesheet, javascript tags, or Shopify Liquid objects/filters/tags."
---

# Shopify Liquid Themes

## Theme Architecture

```
.
├── sections/    # Full-width page modules with {% schema %} — hero, product grid, testimonials
├── blocks/      # Nestable components with {% schema %} — slides, feature items, text blocks
├── snippets/    # Reusable fragments via {% render %} — buttons, icons, image helpers
├── layout/      # Page wrappers (must include {{ content_for_header }} and {{ content_for_layout }})
├── templates/   # JSON files defining which sections appear on each page type
├── config/      # Global theme settings (settings_schema.json, settings_data.json)
├── locales/     # Translation files (en.default.json, fr.json, etc.)
└── assets/      # Static CSS, JS, images (prefer {% stylesheet %}/{% javascript %} instead)
```

### When to use what

| Need | Use | Why |
|------|-----|-----|
| Full-width customizable module | **Section** | Has `{% schema %}`, appears in editor, renders blocks |
| Small nestable component with editor settings | **Block** | Has `{% schema %}`, can nest inside sections/blocks |
| Reusable logic, not editable by merchant | **Snippet** | No schema, rendered via `{% render %}`, takes params |
| Logic shared across blocks/snippets | **Snippet** | Blocks can't `{% render %}` other blocks |

## Liquid Syntax

### Delimiters

- `{{ ... }}` — Output (prints a value)
- `{{- ... -}}` — Output with whitespace trimming
- `{% ... %}` — Logic tag (if, for, assign) — prints nothing
- `{%- ... -%}` — Logic tag with whitespace trimming

### Operators

**Comparison:** `==`, `!=`, `>`, `<`, `>=`, `<=`
**Logical:** `and`, `or`, `contains`

### Critical Gotchas

Report a problem