liquid-theme-standards — скилл для Claude Code: как установить
Скилл задаёт правила вёрстки и клиентских скриптов для тем Shopify. Помогает писать предсказуемый код в файлах .liquid и ресурсах ассетов.
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-standards -a claude-codeЧто делает liquid-theme-standards
Инструкции скилла обучают агента соглашениям по стилям и разметке в шаблонах Liquid. Модель перестаёт ставить теги шаблонизатора внутрь {% stylesheet %}, потому что движок платформы их там попросту игнорирует. Вместо этого динамические значения передаются через инлайновые CSS-переменные в блоках секций.
Скилл жёстко ограничивает специфичность селекторов: запрещает !important и обращения по идентификаторам, требуя плоский БЭМ без глубокой вложенности. Разметка ориентируется на относительные величины rem, логические свойства для поддержки двунаправленного текста и защитные стили против выпадения контента.
Какие задачи решает
- настроить единую сетку дизайн-токенов через CSS-переменные
- исключить поломку стилей из-за передачи Liquid в тег
{% stylesheet %} - выстроить БЭМ-классы без лишней специфичности и идентификаторов
- добавить логические свойства для корректного отображения RTL
Примеры запросов агенту
- Оформи секцию карточки товара по БЭМ, вынеси динамический фон в инлайновые переменные
- Проверь CSS в asset-файле темы на специфичность и замени физические отступы на логические
- Добавь стили кнопки с модификаторами и поддержкой режима prefers-reduced-motion
Как установить liquid-theme-standards
1Через Skills CLI (Vercel)
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-standards -a claude-code2Вручную: положить файлы
~/.claude/skills/liquid-theme-standards/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/liquid-theme-standards/
1Через Skills CLI (Vercel)
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-standards -a codex2Вручную: положить файлы
.agents/skills/liquid-theme-standards/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-standards -a cursor2Вручную: положить файлы
.cursor/skills/liquid-theme-standards/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install benjaminsehl/liquid-skills liquid-theme-standards2Вручную: положить файлы
.github/skills/liquid-theme-standards/SKILL.md1Через Skills CLI (Vercel)
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-standards -a gemini-cli2Командой платформы
gemini skills install https://github.com/benjaminsehl/liquid-skills --path skills/liquid-theme-standardsВручную: положить файлы
.devin/skills/liquid-theme-standards/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add benjaminsehl/liquid-skills --skill liquid-theme-standards -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора2
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о liquid-theme-standards
Как установить liquid-theme-standards в Claude Code?
Выполните команду npx skills add benjaminsehl/liquid-skills --skill liquid-theme-standards -a claude-code.
Что делает liquid-theme-standards?
Скилл задаёт системные требования к вёрстке тем Shopify: форматирование стилей, работу с БЭМ, правила дизайн-токенов и ограничения селекторов.
Почему нельзя писать Liquid внутри тега stylesheet?
Блок {% stylesheet %} не обрабатывает синтаксис Liquid. Динамические цвета и параметры секций нужно прокидывать через пользовательские CSS-свойства в атрибуте style.
