shopify-polaris-admin-extensions · openai — Claude skill
A skill that steers Claude through building Shopify admin UI extensions: look up the docs, write Polaris code, then validate it before you get an answer.
npx skills add openai/plugins --skill shopify-polaris-admin-extensions -a codexWhat shopify-polaris-admin-extensions does
The skill covers the four extension types Shopify apps can add to the admin: action, block, link and print action. Before writing anything the agent searches the docs with scripts/search_docs.mjs. The generated code is then checked by scripts/validate.mjs, which expects --model, --client-name, --client-version, --artifact-id, --revision and --target; leave out the target and validation fails.
Scaffolding goes through Shopify CLI, one template per type: admin_action, admin_block, admin_link, admin_print. Hand-written boilerplate is off the table, since the CLI template tracks the current API version.
The validator rejects HTML comments in the code, so <!-- ... --> has to go. Node.js is required for the scripts. To get the skill into Claude, run the npx skills add line with -a codex; the file lands at .agents/skills/shopify-polaris-admin-extensions/SKILL.md.
What it helps with
- scaffold an admin action extension with Shopify CLI
- build a product page block out of Polaris web components
- run validation on extension code before handing it over
- find which API fits a given extension target
- add a print action for order documents
Example prompts for the agent
- Generate an admin block for the product page and validate it with
--target admin.product-details.block.render - Look up in the docs how to add a resource picker to an admin action, then write the code
- Build a print action for an invoice and run
scripts/validate.mjsbefore returning
How to install shopify-polaris-admin-extensions
1Skills CLI (Vercel)
npx skills add openai/plugins --skill shopify-polaris-admin-extensions -a codex2Manually: put the files in place
.agents/skills/shopify-polaris-admin-extensions/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add openai/plugins --skill shopify-polaris-admin-extensions -a claude-code2Manually: put the files in place
~/.claude/skills/shopify-polaris-admin-extensions/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/shopify-polaris-admin-extensions/
Manually: put the files in place
.cursor/skills/shopify-polaris-admin-extensions/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install openai/plugins shopify-polaris-admin-extensions2Manually: put the files in place
.github/skills/shopify-polaris-admin-extensions/SKILL.mdPlatform CLI
gemini skills install https://github.com/openai/plugins --path plugins/shopify/skills/shopify-polaris-admin-extensionsManually: put the files in place
.devin/skills/shopify-polaris-admin-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-admin-extensions
How do I install shopify-polaris-admin-extensions in Claude?
Run npx skills add openai/plugins --skill shopify-polaris-admin-extensions -a codex. The skill file ends up at .agents/skills/shopify-polaris-admin-extensions/SKILL.md.
What does shopify-polaris-admin-extensions do?
It makes the agent write Shopify admin extensions in a fixed order: docs search first, code second, validator last. Nothing comes back to you until validation passes.
What does the skill need to run?
Node.js, because both helper scripts run on it. Extensions themselves are generated with Shopify CLI so the template matches the API version in use.
Similar skills
All skills for Frontend and UI →shopify-polaris-admin-extensions by other authors comes first.
