liquid-theme-a11y — Claude Code skill: accessible Liquid
Adds WCAG 2.2 patterns for Shopify Liquid themes. Use it when building components, reviewing ARIA, or fixing keyboard accessibility issues.
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-a11y -a claude-codeWhat liquid-theme-a11y 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.
What it helps with
- 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 for the agent
- Review
sections/product-card.liquidfor accessibility and fix the product card markup. - Build an accessible carousel in
sections/slideshow.liquidwith pause control and keyboard support. - Turn
snippets/cart-drawer.liquidinto a dialog with a focus trap.
How to install liquid-theme-a11y
1Skills CLI (Vercel)
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-a11y -a claude-code2Manually: put the files in place
~/.claude/skills/liquid-theme-a11y/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/liquid-theme-a11y/
1Skills CLI (Vercel)
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-a11y -a codex2Manually: put the files in place
.agents/skills/liquid-theme-a11y/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-a11y -a cursor2Manually: put the files in place
.cursor/skills/liquid-theme-a11y/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install benjaminsehl/liquid-skills liquid-theme-a11y2Manually: put the files in place
.github/skills/liquid-theme-a11y/SKILL.md1Skills CLI (Vercel)
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-a11y -a gemini-cli2Platform CLI
gemini skills install https://github.com/benjaminsehl/liquid-skills --path skills/liquid-theme-a11yManually: put the files in place
.devin/skills/liquid-theme-a11y/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-a11y -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-a11y
How do I install liquid-theme-a11y in Claude Code?
Run npx skills add benjaminsehl/liquid-skills --skill liquid-theme-a11y -a claude-code, then run npx skills add benjaminsehl/liquid-skills --skill liquid-theme-a11y -a claude-code again. The skill file is at ~/.claude/skills/liquid-theme-a11y/SKILL.md.
What does liquid-theme-a11y do?
It provides WCAG 2.2 patterns for Shopify Liquid theme components. Its coverage includes semantic markup, ARIA, focus behaviour, forms, product cards, carousels, and dialogs.
How does the skill handle modal dialogs?
It uses the native <dialog> element with aria-modal="true" and aria-labelledby pointing to the dialog title. Focus moves inside when the dialog opens and returns to the trigger after it closes.
