shopify-polaris-checkout-extensions · openai — Claude skill: checkout UI
Writes Shopify checkout UI extension code: searches the docs, validates the result and scaffolds new extensions through Shopify CLI.
npx skills add openai/plugins --skill shopify-polaris-checkout-extensions -a codexWhat shopify-polaris-checkout-extensions does
The skill walks an agent through building checkout UI extensions with the Shopify UI Framework. Two scripts sit inside: scripts/search_docs.mjs searches the developer docs before any code is written, and scripts/validate.mjs checks the code before it reaches you. Both must run in every response, so what comes back has already passed validation.
For new extensions the skill pushes you to the CLI: shopify app generate extension --template checkout_ui --name my-checkout-ui-extension. CLI templates track the current version and break less often. Validation needs --target with the extension target the code runs in, such as purchase.checkout.block.render — without it the check fails.
The validator treats HTML comments <!-- ... --> as invalid custom components, so keep them out of the code. Node.js is required. When validation fails, the agent searches for the error, fixes it and retries, up to three times.
What it helps with
- build an extension block on the checkout page
- pick the right target for a checkout step
- validate extension code before handing it back
- scaffold a new checkout UI extension with Shopify CLI
- find the Polaris component a target supports
Example prompts for the agent
- Write an extension for
purchase.checkout.block.renderthat shows the delivery date - Add a marketing consent checkbox to the checkout footer
- Scaffold a checkout extension and validate the code
How to install shopify-polaris-checkout-extensions
1Skills CLI (Vercel)
npx skills add openai/plugins --skill shopify-polaris-checkout-extensions -a codex2Manually: put the files in place
.agents/skills/shopify-polaris-checkout-extensions/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add openai/plugins --skill shopify-polaris-checkout-extensions -a claude-code2Manually: put the files in place
~/.claude/skills/shopify-polaris-checkout-extensions/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/shopify-polaris-checkout-extensions/
Manually: put the files in place
.cursor/skills/shopify-polaris-checkout-extensions/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install openai/plugins shopify-polaris-checkout-extensions2Manually: put the files in place
.github/skills/shopify-polaris-checkout-extensions/SKILL.mdPlatform CLI
gemini skills install https://github.com/openai/plugins --path plugins/shopify/skills/shopify-polaris-checkout-extensionsManually: put the files in place
.devin/skills/shopify-polaris-checkout-extensions/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-polaris-checkout-extensions
How do I install shopify-polaris-checkout-extensions in Claude?
Run npx skills add openai/plugins --skill shopify-polaris-checkout-extensions -a codex; the skill lands in .agents/skills/shopify-polaris-checkout-extensions/SKILL.md.
What does shopify-polaris-checkout-extensions do?
It helps write Shopify checkout UI extension code: searches the docs, validates the code and points to the right extension targets.
What do I need to run the skill?
Node.js and the Shopify CLI. Code is validated with the --target flag, and validation fails without it.
Similar skills
Everything for Frontend and UI →shopify-polaris-checkout-extensions by other authors comes first.
