shopify-pos-ui

Scaffold and validate Shopify POS UI extensions with Preact or Polaris components.

491|60|Updated Apr 1, 2026
One-click install
npx skills add https://github.com/Shopify/Shopify-AI-Toolkit --skill shopify-pos-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shopify-pos-ui
Source: https://github.com/Shopify/Shopify-AI-Toolkit/tree/main/skills/shopify-pos-ui
Command: npx skills add https://github.com/Shopify/Shopify-AI-Toolkit --skill shopify-pos-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires typescript, and includes scripts (resource) components.

What problem does it solve?

Help developers build, validate, and scaffold Shopify POS UI Extensions with consistent UI components and CLI-driven workflows so extensions conform to platform targets and type requirements.

Core Features & Use Cases

  • CLI-driven scaffolding: Guides developers to scaffold new POS extensions with the Shopify CLI and enforces never manually creating extension configuration.
  • Search-first, validate-later workflow: Requires searching Shopify docs for component and target details, authoring Preact/Polaris web-component code, then validating with the included scripts before returning code.
  • Targets and examples: Supports many POS targets (tiles, modals, action menu items, receipt header/footer, customer/order/register blocks) and is suited for workflows like age verification modals, custom home tiles, and line-item actions.

Quick Start

Generate a pos.home.modal.render extension that shows an age verification banner, run the search_docs.mjs lookup for the used components, write the extension file, and validate it with scripts/validate.mjs.

Frequently Asked Questions about shopify-pos-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold a Shopify POS UI extension using the CLI?▼

To scaffold a Shopify POS UI extension, use the Shopify CLI to generate the project structure and target configurations automatically. Never manually create extension configuration files; rely entirely on the CLI scaffolding to ensure platform compliance.

What POS UI extension targets are available for custom point-of-sale workflows?▼

Available POS UI extension targets include pos.home.tile.render, pos.product-details.block.render, and pos.cart.line-item-details.action.render. These targets support workflows across cart, customer, order, receipt, and register surfaces.

Can I use Preact and Polaris web components for Shopify POS extensions?▼

Yes, you can build Shopify POS UI extensions using Preact or Polaris web components. The skill guides you through authoring code with these specific UI components to ensure point-of-sale interfaces render correctly.

How do I validate POS extension code for type and API requirements?▼

Validate POS extension code by running the included scripts/validate.mjs script. This enforces strict type-and-API validation against Shopify's platform requirements before returning production-ready code.

Do I need TypeScript to build Shopify POS UI extensions?▼

Yes, TypeScript is a required dependency for building Shopify POS UI extensions. The strict type-and-API validation process relies on TypeScript to ensure your Preact or Polaris code meets platform standards.

Why does my Shopify POS extension component need a documentation search?▼

A documentation search using scripts/search_docs.mjs is required to retrieve exact component and target details before authoring code. This search-first, validate-later workflow ensures your extension code conforms to current Shopify API specifications.