# Shopify Liquid Theme Skills
A collection of Claude Agent Skills for Shopify Liquid theme development. Three skills organized by scope — Liquid language fundamentals, coding standards, and accessibility.
## Installation
```bash
claude skill install --plugin shopify-theme-skills benjaminsehl/liquid-skills
```
## Skills Overview
| Skill | Scope | SKILL.md | What Claude learns |
|-------|-------|----------|-------------------|
| [`skills/shopify-liquid-themes/`](#shopify-liquid-themes) | All Liquid themes | 318 lines | Schema JSON, LiquidDoc, filters, tags, objects, translations |
| [`skills/liquid-theme-standards/`](#liquid-theme-standards) | All Liquid themes | 420 lines | BEM in `{% stylesheet %}`, design tokens, Web Components, defensive CSS |
| [`skills/liquid-theme-a11y/`](#liquid-theme-a11y) | All Liquid themes | 448 lines | WCAG patterns for e-commerce components |
### How they relate
```
┌──────────────────────────────────────────────────┐
│ shopify-liquid-themes (Liquid language) │
│ liquid-theme-standards (CSS/JS/HTML patterns) │
│ liquid-theme-a11y (Accessibility) │
└──────────────────────────────────────────────────┘
```
All three skills work with any Shopify Liquid theme.
---
## shopify-liquid-themes
Liquid language fundamentals: schema format, 33 setting types, 152 filters, 30 tags, 137 objects, LiquidDoc, and translation patterns.
```
skills/shopify-liquid-themes/
├── SKILL.md
└── references/
├── filters-language.md # 77 filters: array, string, math, date, default, format (auto-generated)
├── filters-html-media.md # 45 filters: color, font, html, media, hosted file (auto-generated)
├── filters-commerce.md # 30 filters: cart, collection, money, payment, etc. (auto-generated)
├── tags.md # 30 tags with syntax/examples (auto-generated)
├── objects-commerce.md # 5 core commerce objects: product, variant, cart, order, line_item (auto-generated)
├── objects-content.md # 10 content/theme objects: collection, customer, page, shop, etc. (auto-generated)
├── objects-tier2.md # 69 objects with property lists (auto-generated)
├── objects-tier3.md # 53 simple objects with access paths (auto-generated)
├── schema-and-settings.md # Schema format, 33 setting types
└── examples.md # Full snippet/block/section examples
```
## liquid-theme-standards
CSS, JavaScript, and HTML coding standards for Shopify themes. Covers BEM naming inside `{% stylesheet %}` tags, design tokens with CSS custom properties, Web Component patterns, defensive CSS, logical properties for RTL, and progressive enhancement.
```
skills/liquid-theme-standards/
├── SKILL.md
└── references/
├── css-patterns.md # Layout, animation, print styles
└── javascript-patterns.md # Web Components, events, data loading
```
## liquid-theme-a11y
WCAG 2.2 accessibility patterns for e-commerce components: product cards, carousels, cart drawers, forms, filters, price display, modals, navigation, and color swatches.
```
skills/liquid-theme-a11y/
├── SKILL.md
└── references/
├── component-patterns.md # Color swatches, breadcrumbs, tables, sliders
└── focus-and-keyboard.md # Focus trapping, roving tabindex, announcements
```
