saleor-storefront — скилл для Claude Code: что делает и как установить
Скилл даёт правила и паттерны для разработки витрин интернет-магазинов на базе Saleor GraphQL API. Помогает настраивать корзину, атрибуты товаров и многоканальные продажи.
npx skills add saleor/agent-skills --skill saleor-storefront -a claude-codeЧто делает saleor-storefront
Скилл содержит набор архитектурных правил для взаимодействия с GraphQL API платформы Saleor. Он охватывает работу с нуллабельными полями в схеме, двухуровневую модель проверки прав доступа и типизацию с генерацией кода. Подход не привязан к конкретному веб-фреймворку. Правила подходят для проектов на Next.js или Remix.
Внутри выделены четыре приоритетные категории: api-, products-, checkout- и channels-. Скилл разбирает логику вариантов товаров, отличия между атрибутами выбора и простыми характеристиками, а также жизненный цикл сессии оформления заказа и частые ошибки платежей. Начиная с Saleor 3.23, меняются режимы проверки остатков на складах через флаг useLegacyShippingZoneStockAvailability.
Без точного учёта каналов витрина часто возвращает пустые поля или ошибки прав. Инструкции объясняют разницу между доступностью товара к покупке и доставке в конкретном регионе. Полная версия руководства скомпилирована в файле AGENTS.md.
Какие задачи решает
- настроить выбор вариантов товара в каталоге с учётом цен
- реализовать жизненный цикл чекаута и отладку ошибок при оплате
- поддержать продажи в нескольких валютах и каналах без сбоев доступности
- устранить ошибки прав доступа и пустых ответов в GraphQL-запросах витрины
- адаптировать логику складских остатков под режим
useLegacyShippingZoneStockAvailabilityв Saleor 3.23+
Примеры запросов агенту
- Сделай GraphQL-запрос для карточки товара с выбором вариантов и цен для канала 'default-channel'.
- Помоги отладить ошибку доступности товара в чекауте: почему позиция отмечена как недоступная для покупки?
- Настрой логику проверки остатков с учётом режима useLegacyShippingZoneStockAvailability в Saleor 3.23.
Как установить saleor-storefront
1Через Skills CLI (Vercel)
npx skills add saleor/agent-skills --skill saleor-storefront -a claude-code2Вручную: положить файлы
~/.claude/skills/saleor-storefront/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/saleor-storefront/
1Через Skills CLI (Vercel)
npx skills add saleor/agent-skills --skill saleor-storefront -a codex2Вручную: положить файлы
.agents/skills/saleor-storefront/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add saleor/agent-skills --skill saleor-storefront -a cursor2Вручную: положить файлы
.cursor/skills/saleor-storefront/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install saleor/agent-skills saleor-storefront2Вручную: положить файлы
.github/skills/saleor-storefront/SKILL.md1Через Skills CLI (Vercel)
npx skills add saleor/agent-skills --skill saleor-storefront -a gemini-cli2Командой платформы
gemini skills install https://github.com/saleor/agent-skills --path skills/saleor-storefrontВручную: положить файлы
.devin/skills/saleor-storefront/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add saleor/agent-skills --skill saleor-storefront -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о saleor-storefront
Как установить saleor-storefront в Claude Code?
Выполните команду npx skills add saleor/agent-skills --skill saleor-storefront -a claude-code. Также можно сохранить файл напрямую в ~/.claude/skills/saleor-storefront/SKILL.md.
Что делает скилл saleor-storefront?
Он снабжает агента практическими правилами для работы с GraphQL API платформы Saleor. Скилл помогает строить интерфейсы каталогов, настраивать выбор вариантов товаров и управлять оформлением заказа.
Зависит ли скилл от используемого фронтенд-фреймворка?
Нет, правила полностью универсальны. Они описывают логику взаимодействия с API Saleor и подходят для Next.js, Remix, Nuxt или любого другого стека.
Исходный текст
SKILL.md · MIT
--- name: saleor-storefront description: > Saleor e-commerce API patterns for building storefronts. Use when working with Saleor's GraphQL API, products, variants, checkout, channels, permissions, or debugging API behavior. Framework-agnostic — applies to any Saleor storefront. license: MIT metadata: author: saleor version: "1.0.0" --- # Saleor Storefront Universal guide for building storefronts on the Saleor e-commerce platform. Covers the Saleor GraphQL API data model, permission system, checkout lifecycle, channel architecture, and product/variant patterns. Framework-agnostic — these rules apply whether you're using Next.js, Remix, Nuxt, or a custom setup. ## When to Apply Reference these guidelines when: - Querying Saleor's GraphQL API for products, categories, or collections - Building product detail pages with variant selection - Implementing checkout and payment flows - Working with multi-channel and multi-currency setups - Debugging "product not purchasable" or permission errors - Working with Saleor 3.23+ stock availability modes (`useLegacyShippingZoneStockAvailability`) - Investigating Saleor API behavior via source code ## Rule Categories | Priority | Category | Impact | Prefix | | -------- | --------- | -------- | ------------ | | 1 | API | CRITICAL | `api-` | | 2 | Products | HIGH | `products-` | | 3 | Checkout | HIGH | `checkout-` | | 4 | Channels | MEDIUM | `channels-` | ## Quick Reference ### 1. API (CRITICAL) - `api-data-model` — Nullable fields, pricing structure, automatic storefront filtering - `api-permissions` — Token types, permission errors, two-tier query pattern - `api-graphql-patterns` — Channel-scoped queries, variant attributes, filtering, codegen - `api-investigation` — How to investigate Saleor API behavior via types and source ### 2. Products (HIGH) - `products-variants` — Variant model, selection vs non-selection attributes, pricing, UX patterns ### 3. Checkout (HIGH) - `checkout-lifecycle` — Session lifecycle, common errors, debugging payment issues ### 4. Channels (MEDIUM) - `channels-purchasability` — Stock availability modes (legacy vs direct, 3.23+), purchasability vs shippability, fulfillment triangle, mode-aware checklists, channel-scoped queries, stock webhooks ## How to Use Read individual rule files for detailed explanations and code examples: ``` rules/api-data-model.md rules/products-variants.md ``` Each rule file contains: - Brief explanation of why it matters - Code examples (correct and incorrect patterns) - Anti-patterns to avoid ## Full Compiled Document For the complete guide with all rules expanded: `AGENTS.md`
© saleor · MIT · saleor/agent-skills