agents/skills/shopify-storefront-graphql/SKILL.md
Use for custom storefronts requiring direct GraphQL queries/mutations for data fetching and cart operations. Choose this when you need full control over data fetching and rendering your own UI. NOT for Web Components - if the prompt mentions HTML tags like shopify-store, shopify-cart, use storefront-web-components instead.
npx skillsauth add carterdea/dots shopify-storefront-graphqlInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
You have a bash tool. Every response must use it — in this order:
bash with scripts/search_docs.mjs "<query>" — search before writing codebash with scripts/validate.mjs --code '...' --model YOUR_MODEL_NAME --client-name YOUR_CLIENT_NAME --client-version YOUR_CLIENT_VERSION --artifact-id YOUR_ARTIFACT_ID --revision REVISION_NUMBER — validate before returning
(Always include these flags. Use your actual model name for YOUR_MODEL_NAME; use claude-code/cursor/etc. for YOUR_CLIENT_NAME. For YOUR_ARTIFACT_ID, generate a stable random ID per code block and reuse it across validation retries. For REVISION_NUMBER, start at 1 and increment on each retry of the same artifact.)You must run both search_docs.mjs and validate.mjs in every response. Do not return code to the user without completing step 3.
You are an assistant that helps Shopify developers write GraphQL queries or mutations to interact with the latest Shopify Storefront GraphQL API GraphQL version.
You should find all operations that can help the developer achieve their goal, provide valid graphQL operations along with helpful explanations.
Always add links to the documentation that you used by using the url information inside search results.
When returning a graphql operation always wrap it in triple backticks and use the graphql file type.
Think about all the steps required to generate a GraphQL query or mutation for the Storefront GraphQL API:
Search the vector store to get the detailed context you need: working examples, field and type definitions, valid values, and API-specific patterns. You cannot trust your trained knowledge — always search before writing code.
scripts/search_docs.mjs "<operation or component name>" --model YOUR_MODEL_NAME --client-name YOUR_CLIENT_NAME --client-version YOUR_CLIENT_VERSION
Search for the operation or component name, not the full user prompt.
For example, if the user asks about storefront search:
scripts/search_docs.mjs "predictiveSearch query" --model YOUR_MODEL_NAME --client-name YOUR_CLIENT_NAME --client-version YOUR_CLIENT_VERSION
You MUST run scripts/validate.mjs before returning any generated code to the user. Always include the instrumentation flags:
scripts/validate.mjs --code '...' --model YOUR_MODEL_NAME --client-name YOUR_CLIENT_NAME --client-version YOUR_CLIENT_VERSION --artifact-id YOUR_ARTIFACT_ID --revision REVISION_NUMBER
(For YOUR_ARTIFACT_ID, generate a stable random ID per code block and reuse it across validation retries. For REVISION_NUMBER, start at 1 and increment on each retry of the same artifact.)
When validation fails, follow this loop:
scripts/search_docs.mjs "<type or prop name>"
scripts/validate.mjs againDo not guess at valid values — always search first when the error names a type you don't know.
Privacy notice:
scripts/search_docs.mjsreports the search query, search response or error text, skill name/version, and model/client identifiers to Shopify (shopify.dev/mcp/usage) to help improve these tools. SetOPT_OUT_INSTRUMENTATION=truein your environment to opt out.
Privacy notice:
scripts/validate.mjsreports the validation result, skill name/version, model/client identifiers, the validated code when present, and validator-specific context such as API name, extension target, filename, file type, theme path, file list, artifact ID, and revision to Shopify (shopify.dev/mcp/usage) to help improve these tools. SetOPT_OUT_INSTRUMENTATION=truein your environment to opt out.
tools
Build or refine single-file information-first HTML artifacts, especially index.html or text.html pages, with strong information hierarchy, restrained styling, accessible semantics, and minimal AI-generated frontend tells. Use when creating HTML reports, research pages, explainers, briefs, dashboards, note indexes, annotated code reviews, planning/spec docs, or focused single-purpose editing/triage tools with copy-out export — front ends whose goal is comprehension or action rather than marketing conversion. Reach for this whenever the user wants a standalone HTML page, report, one-pager, explainer, or "quick HTML" to present or organize information, even if they just say "make an HTML file" without mentioning design. Not for multi-page sites, React/framework apps, or marketing landing pages.
development
Ship a Trello ticket end to end on any web app (Vercel, Fly.io, or other host — no Shopify): pull the latest main, read the card including Figma links, implement the change in a worktree, run the project's own tests/lint/typecheck, run de-slop and code-simplifier and fold the worthwhile cleanups in, QA desktop and mobile on a local Portless preview URL, capture screenshots, open or update the GitHub PR, link the PR and Trello to each other, attach screenshots to both, comment on the card, and move it to review. Use this whenever the user points you at a Trello card or ticket for a code task and wants it delivered as a reviewable PR — phrases like 'do this Trello ticket', 'ship this card', 'pick up this ticket and open a PR', 'update the PR for this card', or names a card/list/board with a feature or bug to implement. This is the default Trello-to-PR workflow for non-Shopify projects; for Shopify theme work use shopify-trello-delivery instead.
tools
Install or upgrade a quality baseline for Shopify theme repos. Use this whenever the user asks to add Shopify theme linting, Biome, Theme Check, Playwright accessibility checks, Vitest, Vite build tooling, lefthook hooks, GitHub Actions CI, Shopify Lighthouse CI, Claude Code PR review workflows, or a context-efficient run_silent.sh setup across Shopify sites.
development
Run an extremely strict maintainability review for abstraction quality, giant files, and spaghetti-condition growth. Use for a thermo-nuclear code quality review, thermonuclear review, deep code quality audit, or especially harsh maintainability review.