shopify-storefront-graphql — Claude skill: GraphQL for Shopify
Writes GraphQL queries and mutations against the Shopify Storefront API, searching the docs first and validating the code before it reaches you.
npx skills add openai/plugins --skill shopify-storefront-graphql -a codexWhat shopify-storefront-graphql does
The skill walks the agent through three steps. First scripts/search_docs.mjs "<query>" looks up the operation or resource in a vector store of the developer docs, then the code is written from what came back, and scripts/validate.mjs runs before anything is returned, with --model, --client-name, --client-version, --artifact-id and --revision flags. When validation fails, the agent searches for the type or value named in the error, fixes it and validates again, up to 3 retries.
Both scripts report to Shopify: the search query, the validation result, the skill name and version, model and client identifiers, and the code being checked. Set OPT_OUT_INSTRUMENTATION=true in your environment to opt out. Node.js is required.
This one is for a custom storefront where you render your own UI and fetch data over GraphQL. If the task mentions tags like <shopify-store>, <shopify-cart>, reach for storefront-web-components instead. Author is Shopify, version 1.9.1.
What it helps with
- write a Storefront API query from an operation name
- build a cart and checkout mutation
- validate GraphQL code before it lands in the project
- look up current fields and types instead of guessing
- fix a validation error by the type or value it names
Example prompts for the agent
- Write a Storefront API query for product variants
- Create a cart mutation and add a line item
- Validate this GraphQL query before returning it
How to install shopify-storefront-graphql
1Skills CLI (Vercel)
npx skills add openai/plugins --skill shopify-storefront-graphql -a codex2Manually: put the files in place
.agents/skills/shopify-storefront-graphql/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add openai/plugins --skill shopify-storefront-graphql -a claude-code2Manually: put the files in place
~/.claude/skills/shopify-storefront-graphql/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/shopify-storefront-graphql/
Manually: put the files in place
.cursor/skills/shopify-storefront-graphql/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install openai/plugins shopify-storefront-graphql2Manually: put the files in place
.github/skills/shopify-storefront-graphql/SKILL.mdPlatform CLI
gemini skills install https://github.com/openai/plugins --path plugins/shopify/skills/shopify-storefront-graphqlManually: put the files in place
.devin/skills/shopify-storefront-graphql/SKILL.mdThe legacy .windsurf/skills/ path still works
Claude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: Codex skills: how to install, where they live, how to call them
Questions about shopify-storefront-graphql
How do I install shopify-storefront-graphql in Claude?
Run npx skills add openai/plugins --skill shopify-storefront-graphql, then npx skills add openai/plugins --skill shopify-storefront-graphql -a codex. The skill file lands at .agents/skills/shopify-storefront-graphql/SKILL.md.
What does shopify-storefront-graphql do?
It helps write GraphQL queries and mutations for the Shopify Storefront API: the agent searches the docs for the operation, generates the code and runs it through a validator.
How is it different from storefront-web-components?
Use this skill for a custom storefront with direct GraphQL calls and your own UI. If the task mentions tags like <shopify-store>, <shopify-cart>, you want storefront-web-components.
