Project-specific patterns for the Saleor Paper storefront built with Next.js 16, TypeScript, and Tailwind CSS. Use when working with product pages, checkout flow, caching, variant selection, filtering, SEO, or UI components. For universal Saleor API patterns, see the saleor-storefront dependency.
Project-specific guide for the Saleor Paper storefront — a Next.js 16 e-commerce application with TypeScript, Tailwind CSS, and the Saleor GraphQL API. Contains 11 rules across 6 categories covering caching, PDP architecture, checkout components, UI patterns, and SEO.
Prerequisite: This skill depends on
saleor-storefrontfor universal Saleor API knowledge (data model, permissions, checkout lifecycle, channels). Install it alongside this skill.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Data Layer | CRITICAL | data- |
| 2 | Product Pages | HIGH | product- |
| 3 | Checkout Flow | HIGH | checkout- |
| 4 | UI & Channels | MEDIUM | ui- |
| 5 | SEO | MEDIUM | seo- |
| 6 | Development | MEDIUM | dev- |
data-caching - Cache Components (PPR), cache tags, revalidation, price flowdata-graphql - Two codegen setups, permission patterns, nullable fieldsproduct-pdp - PDP architecture, gallery, data flow, add-to-cart, ErrorBoundaryproduct-variants - Variant selection state machine, option states, discount badgesproduct-filtering - Server vs client filtering, category slug resolutioncheckout-management - Checkout lifecycle, cookie storage, payment debuggingcheckout-components - Reusable checkout UI (SignInForm, AddressSelector, PaymentMethodSelector)ui-components - Design tokens, shadcn/ui primitives, component locationsui-channels - Multi-channel URLs, fulfillment model, purchasability debugging, channel selectorseo-metadata - JSON-LD structured data, metadata helpers, OG image generationdev-investigation - Saleor API source code investigation methodologyRead individual rule files for detailed explanations and code examples:
rules/data-caching.md
rules/product-variants.md
Each rule file contains:
For the complete guide with all rules expanded: AGENTS.md