# liquid-theme-a11y

Adds WCAG 2.2 patterns for Shopify Liquid themes. Use it when building components, reviewing ARIA, or fixing keyboard accessibility issues.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2800 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-a11y/SKILL.md
- Updated: 2026-07-16
- HTML: https://affpapa.org/en/nevibecode/skills/liquid-theme-a11y

## What it does

This skill guides accessible Shopify Liquid work for product cards, carousels, cart drawers, price displays, forms, filters, and modal dialogs. It also covers page landmarks, skip links, heading order, and visible focus indicators.

It maps component types to HTML patterns and ARIA attributes. A product card uses `<article>`, a carousel gets a labelled region and controls, while a modal uses `<dialog>` and restores focus to its trigger. The skill takes a clear stance: start with semantic HTML, then add ARIA only when native elements do not cover the need.

It also addresses focus traps, Escape handling, inactive carousel slides, and reduced-motion preferences. Auto-rotating carousels need a pause button and use an interval of at least 5 seconds. That makes existing `.liquid` dialogs and sliders worth checking.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

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

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-a11y -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-a11y/SKILL.md

## When to use it
- add a skip link to main content
- mark up a product card with an accessible name
- build a keyboard-operable carousel
- restore focus after a modal closes
- expose form errors with `aria-invalid`

## Example prompts
- Review `sections/product-card.liquid` for accessibility and fix the product card markup.
- Build an accessible carousel in `sections/slideshow.liquid` with pause control and keyboard support.
- Turn `snippets/cart-drawer.liquid` into a dialog with a focus trap.

## Similar
- [shopify-theme-dev-liquid](https://affpapa.org/en/nevibecode/rules/shopify-theme-dev-liquid.md) — rule · ★ 41011
- [a11y-audit](https://affpapa.org/en/nevibecode/plugins/a11y-audit.md) — plugin · ★ 28733
- [a11y](https://affpapa.org/en/nevibecode/skills/a11y.md) — skill · 561 installs
- [frontend-a11y](https://affpapa.org/en/nevibecode/skills/frontend-a11y.md) — skill · 4800 installs
- [shopify-theme-optimization](https://affpapa.org/en/nevibecode/skills/shopify-theme-optimization.md) — skill · 1100 installs
- [a11y-debugging](https://affpapa.org/en/nevibecode/skills/a11y-debugging.md) — skill · 3600 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