# shopify-pos-ui

Generates Preact components and extensions for Shopify retail point-of-sale systems. Helps developers scaffold modules through the CLI and validate code against UI targets.

- skill · `type=skill` · Codex, ChatGPT · 2 installs · ★ 7604
- 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-pos-ui/SKILL.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/skills/shopify-pos-ui

## What it does

This skill guides the agent through creating Shopify POS UI extensions. The assistant uses the official Shopify CLI to scaffold extensions using templates like `pos_action`, `pos_block`, or `pos_smart_grid`. Direct file creation without the CLI is blocked by the skill rules to preserve the expected app structure.

Before returning any code, the agent runs mandatory internal scripts. It calls `scripts/search_docs.mjs` to look up component properties, generates type-safe Preact code, and tests it with `scripts/validate.mjs`. If checks fail, the assistant attempts up to 3 repair retries.

Node.js must be installed on your machine. Validation fails outright if the `--target` flag is omitted, because every POS component requires a defined extension surface.

## Install

### Codex (native platform)

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

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

### Claude Code

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

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

### Cursor

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install openai/plugins shopify-pos-ui
```

2. **Manually: put the files in place**
- File: `.github/skills/shopify-pos-ui/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/openai/plugins --path plugins/shopify/skills/shopify-pos-ui
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/shopify-pos-ui/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-pos-ui/SKILL.md

## When to use it
- Scaffold POS extensions with the Shopify CLI
- Build customer details blocks using Preact components
- Add custom modal actions to cart line items
- Verify extension code against 34 point-of-sale targets

## Example prompts
- Create a customer loyalty details block for Shopify POS
- Scaffold a new cart line item action extension using Shopify CLI
- Validate our Preact code for target pos.customer-details.block.render

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [openai/plugins](https://affpapa.org/en/nevibecode/by/openai/plugins.md) — 528 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