К основному содержанию
скилл CX Codex

saleor-storefront — скилл для Claude Code: что делает и как установить

Скилл даёт правила и паттерны для разработки витрин интернет-магазинов на базе Saleor GraphQL API. Помогает настраивать корзину, атрибуты товаров и многоканальные продажи.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add saleor/agent-skills --skill saleor-storefront -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/saleor-storefront/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/saleor-storefront/

По шагам, с командами для каждой платформы: Как установить скилл в 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

Похожие скиллы

Все скиллы по теме «Фронтенд и UI» →
shopify-storefront-graphql официальный Shopify Пишет GraphQL-запросы и мутации к Storefront API Shopify, но сначала ищет их в документации и проверяет валидатором. CX Codex GP ChatGPT 1установок vtex-io-storefront-theme-versioning vtex Инструктирует агента по обновлению, публикации и откату тем оформления в VTEX IO без потери контента из Site Editor при смене мажорной версии. CX Codex +1 777установок storefront-best-practices medusajs Скилл задаёт правила для разработки витрин интернет-магазина: от карточек товаров до корзины и оформления заказа. Нужен при создании или доработке интерфейса магазина. CX Codex +1 4 600установок vtex-io-storefront-theme-app vtex Скилл помогает собирать и настраивать приложения витрины VTEX IO: объявлять маршруты, компоновать блоки шаблонов и связывать тему с Site Editor. CX Codex +1 1 000установок amazon-storefront-design nexscope-ai Скилл для сборки витрины Amazon Store: раскладка страниц, история бренда, кликабельные изображения и работа с конверсией. Пригодится, когда страницу магазина нужно собрать по шагам, а не наугад. CX Codex +1 1 100установок building-storefronts medusajs Скилл для разработки витрины на Medusa: подсказывает, как вызывать API через SDK и React Query, чтобы не сломать запросы. CX Codex +1 4 200установок

Из того же набора3

Спонсоры проекта

Компании, которые помогают держать аналитику открытой