AIKraft/AI/Войти
AIKraft/Skills/shopify

shopify

Expert Shopify theme development guidelines for Liquid, Online Store 2.0, CSS, JavaScript, and UX best practices

mindrally official Дизайн

Что делает навык

Навык предоставляет экспертное руководство по разработке тем Shopify, охватывая Liquid, Online Store 2.0, CSS, JavaScript и лучшие практики UX. Он помогает создавать производительные, доступные и модульные темы, оптимизированные для Core Web Vitals. Навык обеспечивает следование архитектурным паттернам и стандартам e-commerce.

Когда применять

  • Разработка новых тем Shopify с использованием архитектуры Online Store 2.0 и JSON-шаблонов.
  • Оптимизация существующих тем для улучшения показателей Core Web Vitals (LCP, FID, CLS) и скорости загрузки.
  • Создание кастомных секций и сниппетов с использованием Liquid, включая работу с метаполями и настройками.
  • Реализация интерактивных функций, таких как добавление в корзину через Fetch API, с использованием ES6+ и делегирования событий.

Как работает

  1. Следовать принципам чистого и поддерживаемого кода Liquid, используя осмысленные имена переменных и эффективные фильтры.
  2. Применять архитектуру Online Store 2.0: создавать модульные секции с схемами, использовать блоки для повторяемого контента и JSON-шаблоны для гибкой верстки.
  3. Оптимизировать производительность: использовать {% render %} вместо {% include %}, кэшировать дорогие операции, лениво загружать скрипты и изображения, а также использовать CDN Shopify.
  4. Реализовать доступность (accessibility) через семантический HTML, ARIA-атрибуты, навигацию с клавиатуры и проверку контрастности цветов.
  5. Использовать современные CSS-техники: CSS-переменные, mobile-first подход, Grid/Flexbox и логические свойства для интернационализации.
  6. Тестировать тему на кроссбраузерность, валидность Liquid, соответствие стандартам доступности и корректность потока оформления заказа.

Примеры запросов агенту

Создай секцию 'Featured Collection' для Shopify Online Store 2.0 с настройкой количества отображаемых товаров и использованием метаполей.
Напиши функцию на JavaScript для добавления товара в корзину через Fetch API, следуя лучшим практикам ES6+.
Оптимизируй вывод изображения продукта в Liquid, используя CDN Shopify, ленивую загрузку и адаптивные размеры.

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «shopify» из репозитория: # https://github.com/mindrally/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r shopify/ ~/.claude/skills/shopify/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.