Shopify Pos Ui
Scaffold and implement Shopify POS UI extensions with CLI-backed components and mandatory doc search plus validation before shipping retail POS screens.
Overview
Shopify POS UI is an agent skill for the Build phase that guides creation of Shopify POS UI extensions using doc search, POS components, CLI scaffolding, and scripted validation per extension target.
Install
npx skills add https://github.com/shopify/shopify-ai-toolkit --skill shopify-pos-uiWhat is this skill?
- Mandatory workflow: search Shopify docs via scripts/search_docs.mjs before writing any code
- POS UI components and smart-grid patterns for consistent retail point-of-sale interfaces
- Shopify CLI scaffolding for new POS UI extensions
- validate.mjs gate with --target (e.g. pos.customer-details.block.render), artifact id, and up to 3 retry loops
- Requires Node.js; bash tool must run search then validate on every response
- Up to 3 validation retries per artifact after search-driven fixes
- Metadata version 1.9.0 in skill frontmatter
Adoption & trust: 4.5k installs on skills.sh; 373 GitHub stars; 1/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need a compliant Shopify POS extension UI but risk wrong APIs, missing extension targets, or unvalidated code that breaks on real registers.
Who is it for?
Indie devs or small teams building Shopify POS UI extensions who want the agent to always search docs and validate against a specific pos.* render target.
Skip if: Builders only customizing Online Store themes, headless storefronts without POS extensions, or teams that cannot run Node/bash validation scripts in the agent environment.
When should I use this skill?
Building retail point-of-sale UI with Shopify POS UI components, scaffolding POS extensions via Shopify CLI, or implementing smart-grid POS experiences.
What do I get? / Deliverables
You get POS UI extension code that was searched against Shopify docs and passed validate.mjs for your declared POS target before handoff to deploy or merchant testing.
- POS UI extension source validated for a declared --target
- Doc-informed component usage aligned with Shopify POS UI patterns
Recommended Skills
Journey fit
POS UI extensions are built when the product layer connects to Shopify’s in-store stack—not during idea research or launch SEO. Canonical shelf is integrations because the skill wires Shopify POS UI targets, CLI scaffolding, and extension-specific validation—not generic web UI alone.
How it compares
Use instead of free-form Shopify POS snippets without target-aware validation or separate from generic React storefront skills.
Common Questions / FAQ
Who is shopify-pos-ui for?
Solo and indie builders (and small Shopify partners) implementing POS UI extensions with Node.js, Shopify CLI, and agent workflows that can execute bash search and validate scripts.
When should I use shopify-pos-ui?
During Build when you scaffold or implement POS smart-grid blocks, customer-detail surfaces, or other point-of-sale extension targets; also when an agent must re-validate after doc-driven fixes before you merge or publish an extension.
Is shopify-pos-ui safe to install?
Treat it like any third-party agent skill: review the Security Audits panel on this Prism page and restrict bash/network permissions in your agent to trusted project scripts only.
SKILL.md
READMESKILL.md - Shopify Pos Ui
## Required Tool Calls (do not skip) You have a `bash` tool. Every response must use it — in this order: 1. Call `bash` with `scripts/search_docs.mjs "<query>"` — search before writing code 2. Write the code using the search results 3. Call `bash` 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 --target <extension-target>` — 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.) Pass `--target` with the point-of-sale extension target this code runs in (e.g. `pos.customer-details.block.render`); validation will fail without it. 4. If validation fails: search for the error type, fix, re-validate (max 3 retries) 5. Return code only after validation passes **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 UI Framework code to interact with the latest Shopify pos-ui UI Framework version. You should find all operations that can help the developer achieve their goal, provide valid UI Framework code along with helpful explanations.<system-instructions> You are an expert Shopify POS UI Extensions developer generating production-ready, type-safe Preact code that extends POS functionality while maintaining performance, security, and user experience standards. All code examples in this document are illustrative only. ALWAYS verify actual API documentation before using any method, component, or property 🚨 MANDATORY: ALWAYS USE THE CLI TO SCAFFOLD A NEW EXTENSION AND NEVER MANUALLY CREATE THE APP STRUCTURE OR CONFIGURATION FILES. ALWAYS use CLI to scaffold new extensions. NEVER manually create app structure or configuration files. If any CLI command fails (non-zero exit code) or environment is non-interactive, STOP, print the exact command, and instruct the user to run it locally. # Create POS UI extension flow <pos-extension-todo-flow> <step id="1"> Ensure Shopify CLI is installed and up to date. For installation or upgrade steps, use `shopify-use-shopify-cli`. </step> <step id="2"> Determine if working with new app or existing app <step id="2.1"> If existing app: <step id="2.1.1">`cd` into the app directory</step> </step> <step id="2.2"> If no existing app: <step id="2.2.1">Run `shopify app init --template=none --name={{appropriate-app-name}}`</step> <step id="2.2.2">`cd` into the app directory</step> </step> <step id="2.3"> <step id="2.3.1">Ignore all existing extensions in the app. Only generate new extension. DO NOT modify existing extensions.</step> <step id="2.3.2">Run `shopify app generate extension --name="{{appropriate-extension-name}}" --template="{{appropriate-template|default-pos_smart_grid}}"` (template options: pos_action|pos_block|pos_smart_grid) ⚠️ `--yes` is NOT a flag. DO NOT use it. Run the command as is.</step> </step> </step> </pos-extension-todo-flow> </system-instructions> If no extension target is specified, search the documentation to determine the appropriate target for the user's use case before generating code. ## Available Extension Targets for pos-ui Surface: **point-of-sale** Total Targets: