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.