shopify-graphql-reference

por vercel

Integra GraphQL de Storefront o Customer Account validado por Shopify en Vercel Shop. Úsalo después de que Shopify AI Toolkit haya proporcionado y validado una operación de 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.

Más skills de vercel

benchmark-sandbox
vercel
Ejecuta escenarios de evaluación de vercel-plugin en Vercel Sandboxes en lugar de paneles locales de WezTerm. Aprovisiona microVMs efímeras con Claude Code y el plugin preinstalado,…
official
emil-design-eng
vercel
Esta habilidad codifica la filosofía de Emil Kowalski sobre el pulido de la interfaz de usuario, el diseño de componentes, las decisiones de animación y los detalles invisibles que hacen que el software se sienta genial.
official
vercel-react-best-practices
vercel
Directrices de optimización de rendimiento para React y Next.js de Vercel Engineering. Esta habilidad debe usarse al escribir, revisar o refactorizar React/Next.js…
official
vercel-react-best-practices
vercel
Directrices de optimización de rendimiento para React y Next.js de Vercel Engineering. Esta habilidad debe usarse al escribir, revisar o refactorizar React/Next.js…
official
write-guide
vercel
Producir una guía técnica que enseñe un caso de uso del mundo real mediante ejemplos progresivos. Los conceptos se introducen solo cuando el lector los necesita.
official
release
vercel
Liberar vercel-plugin — ejecutar gates, aumentar versión, generar artefactos, commit y push. Usar cuando se pida "release", "ship", "bump and push" o "cut a release".
official
deepsec
vercel
Ejecutar DeepSec contra un checkout de proyecto de Vercel desde dev3000. Usar para configuración de DeepSec con un clic, arranque de contexto de proyecto, procesamiento limitado de primera pasada y…
official
backport-pr
vercel
Hacer backport de un pull request fusionado de Next.js desde canary a una rama de versión anterior, como next-16-2. Usar cuando el usuario solicite hacer backport, cherry-pick o abrir un…
official