shopify-graphql-reference

bởi vercel

Tích hợp GraphQL Storefront hoặc Customer Account đã được Shopify xác thực vào Vercel Shop. Sử dụng sau khi Shopify AI Toolkit đã cung cấp và xác thực một thao tác API,…

npx skills add https://github.com/vercel/shop --skill shopify-graphql-reference

Integrate Shopify GraphQL

Treat Shopify AI Toolkit as authoritative for Shopify documentation, schemas, fields, arguments, enum values, API versions, operation design, and validation. This skill owns only the Vercel Shop integration layer.

Read references/REFERENCE.md before editing.

Delegate Shopify facts first

  1. Choose the Shopify API:
    • Use Shopify AI Toolkit's Storefront GraphQL skill for catalog, search, menus, cart, and public metaobject reads.
    • Use its Customer skill for profiles, orders, addresses, and other authenticated customer data.
    • Use its custom-data skill first for metafields or metaobjects.
  2. Search current Shopify documentation and validate the complete operation with that skill.
  3. Do not copy schema snapshots, field catalogs, or generated API reference into this plugin.
  4. If Shopify AI Toolkit is unavailable, use official Shopify documentation and validation tooling; do not guess.

Apply the Vercel Shop conventions

  1. Inspect the consuming route before choosing cache behavior. Classify the read as static-shell content, request-time shared content, or private/request-scoped data.
  2. Add the operation to the closest file in lib/shopify/operations/; create a file only for a genuinely new domain.
  3. Keep #graphql documents static, end them with as const, and use variables for dynamic values so codegen can validate them.
  4. Reuse the smallest existing fragment that fits. Extend a shared fragment only when multiple operations need the same selection.
  5. Pass locale context through existing country and language helpers when Shopify localizes the result.
  6. Keep raw Shopify response types under lib/shopify/**; transform them into provider-independent domain types before presentation.
  7. Preserve cache tags and the existing webhook invalidation hierarchy. Do not cache mutations.
  8. Call invalidateCartCache() after every successful cart mutation.

Revalidate both boundaries

  1. Validate the final GraphQL document again with Shopify AI Toolkit after fragment and variable changes.
  2. Run pnpm --filter template codegen and the local lint, typecheck, build, and affected commerce flows.
  3. Report separately:
    • Shopify validation performed;
    • Vercel Shop cache and route role;
    • domain transform and invalidation changes.

Do not present this skill as a Shopify schema source. Shopify AI Toolkit determines what Shopify supports; this skill determines how validated operations fit Vercel Shop.

Thêm skills từ vercel

benchmark-sandbox
vercel
Chạy các kịch bản đánh giá vercel-plugin trong Vercel Sandboxes thay vì các bảng WezTerm cục bộ. Cung cấp các microVM tạm thời với Claude Code và plugin được cài đặt sẵn,…
official
emil-design-eng
vercel
Kỹ năng này mã hóa triết lý của Emil Kowalski về trau chuốt giao diện người dùng, thiết kế thành phần, quyết định hoạt ảnh và những chi tiết vô hình giúp phần mềm mang lại cảm giác tuyệt vời.
official
vercel-react-best-practices
vercel
Hướng dẫn tối ưu hiệu suất React và Next.js từ Vercel Engineering. Kỹ năng này nên được sử dụng khi viết, xem xét hoặc tái cấu trúc mã React/Next.js…
official
vercel-react-best-practices
vercel
Hướng dẫn tối ưu hiệu suất React và Next.js từ Vercel Engineering. Kỹ năng này nên được sử dụng khi viết, xem xét hoặc tái cấu trúc mã React/Next.js…
official
write-guide
vercel
Tạo một hướng dẫn kỹ thuật dạy một trường hợp sử dụng thực tế thông qua các ví dụ tiến dần. Các khái niệm chỉ được giới thiệu khi người đọc cần đến chúng.
official
release
vercel
Phát hành vercel-plugin — chạy các cổng, tăng phiên bản, tạo tạo phẩm, commit và push. Sử dụng khi được yêu cầu "phát hành", "ship", "tăng và push", hoặc "cắt một bản phát hành".
official
deepsec
vercel
Chạy DeepSec trên bản checkout dự án Vercel từ dev3000. Sử dụng để thiết lập DeepSec một chạm, khởi tạo ngữ cảnh dự án, xử lý lần đầu có giới hạn, và…
official
backport-pr
vercel
Backport một pull request Next.js đã được merge từ canary sang một nhánh phát hành trước đó như next-16-2. Sử dụng khi người dùng yêu cầu backport, cherry-pick, hoặc mở một…
official