# shopify-polaris-checkout-extensions

Writes Shopify checkout UI extension code: searches the docs, validates the result and scaffolds new extensions through Shopify CLI.

- skill · `type=skill` · Codex, ChatGPT · ★ 7596
- Author: Shopify · official OpenAI repository
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/openai/plugins/tree/HEAD/plugins/shopify/skills/shopify-polaris-checkout-extensions/SKILL.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/skills/shopify-polaris-checkout-extensions

## What it 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.

## Install

### Codex (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add openai/plugins --skill shopify-polaris-checkout-extensions -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/shopify-polaris-checkout-extensions/SKILL.md` — For all projects use ~/.agents/skills/

### Claude Code

1. **Skills CLI (Vercel)**
```bash
npx skills add openai/plugins --skill shopify-polaris-checkout-extensions -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/shopify-polaris-checkout-extensions/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/shopify-polaris-checkout-extensions/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/shopify-polaris-checkout-extensions/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install openai/plugins shopify-polaris-checkout-extensions
```

2. **Manually: put the files in place**
- File: `.github/skills/shopify-polaris-checkout-extensions/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/openai/plugins --path plugins/shopify/skills/shopify-polaris-checkout-extensions
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/shopify-polaris-checkout-extensions/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/openai/plugins/tree/HEAD/plugins/shopify/skills/shopify-polaris-checkout-extensions/SKILL.md

## When to use it
- 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
- Write an extension for `purchase.checkout.block.render` that shows the delivery date
- Add a marketing consent checkbox to the checkout footer
- Scaffold a checkout extension and validate the code

## Similar
- [shopify-polaris-admin-extensions](https://affpapa.org/en/nevibecode/skills/shopify-shopify-polaris-admin-extensions.md) — skill · 9700 installs
- [shopify-checkout-customization](https://affpapa.org/en/nevibecode/skills/shopify-checkout-customization.md) — skill · 1000 installs
- [ecommerce-checkout-optimization](https://affpapa.org/en/nevibecode/skills/ecommerce-checkout-optimization.md) — skill · 1200 installs
- [shopify](https://affpapa.org/en/nevibecode/skills/mrgoonie-shopify.md) — skill · 450 installs
- [shopify-apps](https://affpapa.org/en/nevibecode/skills/sickn33-shopify-apps.md) — skill · 1000 installs
- [shopify-onboarding-merchant](https://affpapa.org/en/nevibecode/skills/shopify-shopify-onboarding-merchant.md) — skill · 8100 installs

## Other versions with the same name
- [shopify-polaris-checkout-extensions · shopify](https://affpapa.org/en/nevibecode/skills/shopify-shopify-polaris-checkout-extensions.md) — 9600 installs

From the same set: [openai/plugins](https://affpapa.org/en/nevibecode/by/openai/plugins.md) — 337 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md