liquid-theme-a11y — скилл для Claude Code: доступность Liquid
Добавляет паттерны WCAG 2.2 для тем Shopify Liquid. Пригодится при сборке компонентов, проверке ARIA и исправлении проблем с клавиатурой.
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-a11y -a claude-codeЧто делает liquid-theme-a11y
Скилл помогает писать доступные компоненты Shopify Liquid: карточки товаров, карусели, корзину в выдвижной панели, цены, формы, фильтры и модальные окна. Он охватывает разметку страницы, ссылки пропуска к содержимому, заголовки и видимые индикаторы фокуса.
Для каждого элемента предлагается подходящий HTML-паттерн и ARIA-атрибуты. Например, карточка товара строится на <article>, карусель получает регион и элементы управления, а модальное окно использует <dialog> с возвратом фокуса к вызвавшей кнопке. Скилл прямо советует начинать с семантического HTML и добавлять ARIA, когда нативной семантики недостаточно.
Отдельно разобраны ловушка фокуса в диалогах, работа с Escape, скрытие неактивных слайдов и поддержка уменьшенного движения. Для автоматически меняющейся карусели нужна кнопка паузы, а интервал автопрокрутки задан не меньше 5 секунд. Это повод проверить уже существующие .liquid-компоненты, где есть диалоги или слайдеры.
Какие задачи решает
- добавить ссылку пропуска к основному содержимому
- разметить карточку товара с понятным названием
- настроить карусель для клавиатуры и скринридера
- вернуть фокус после закрытия модального окна
- показать ошибки формы через
aria-invalid
Примеры запросов агенту
- Проверь
sections/product-card.liquidна доступность и исправь разметку карточки товара. - Собери доступную карусель в
sections/slideshow.liquidс паузой и управлением с клавиатуры. - Переработай
snippets/cart-drawer.liquidв диалог с ловушкой фокуса.
Как установить liquid-theme-a11y
1Через Skills CLI (Vercel)
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-a11y -a claude-code2Вручную: положить файлы
~/.claude/skills/liquid-theme-a11y/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/liquid-theme-a11y/
1Через Skills CLI (Vercel)
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-a11y -a codex2Вручную: положить файлы
.agents/skills/liquid-theme-a11y/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-a11y -a cursor2Вручную: положить файлы
.cursor/skills/liquid-theme-a11y/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install benjaminsehl/liquid-skills liquid-theme-a11y2Вручную: положить файлы
.github/skills/liquid-theme-a11y/SKILL.md1Через Skills CLI (Vercel)
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-a11y -a gemini-cli2Командой платформы
gemini skills install https://github.com/benjaminsehl/liquid-skills --path skills/liquid-theme-a11yВручную: положить файлы
.devin/skills/liquid-theme-a11y/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-a11y -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора3
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о liquid-theme-a11y
Как установить liquid-theme-a11y в Claude Code?
Выполните npx skills add benjaminsehl/liquid-skills --skill liquid-theme-a11y -a claude-code, затем повторите npx skills add benjaminsehl/liquid-skills --skill liquid-theme-a11y -a claude-code. Файл скилла находится в ~/.claude/skills/liquid-theme-a11y/SKILL.md.
Что делает liquid-theme-a11y?
Скилл даёт паттерны WCAG 2.2 для компонентов Shopify Liquid. Он охватывает семантическую разметку, ARIA, фокус, формы, карточки, карусели и диалоги.
Как скилл предлагает размечать модальные окна?
Для модального окна используется нативный <dialog> с aria-modal="true" и связью с заголовком через aria-labelledby. При открытии фокус переходит внутрь, а после закрытия возвращается к элементу-вызову.
