shopify-pos-ui

What this skill does

<!-- AUTO-GENERATED — do not edit directly.
     Edit src/data/raw-api-instructions/{api}.md in shopify-dev-tools,
     then run: npm run generate_agent_skills (outputs to distributed-agent-skills/) -->
---
name: shopify-pos-ui
description: "Build retail point-of-sale applications using Shopify's POS UI components. These components provide a consistent and familiar interface for POS applications. POS UI Extensions also supports scaffolding new POS extensions using Shopify CLI commands. Keywords: POS, Retail, smart grid"
compatibility: Claude Code, Claude Desktop, Cursor
metadata:
  author: Shopify
---

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">
  Determine if Shopify CLI is installed
  <step id="1.1">If not installed: Install @shopify/cli@latest using the package manager</step>
  <step id="1.2">If installed: Run `shopify --version` to verify the CLI is above 3.85.3. If it's not, upgrade to @shopify/cli@latest using the package manager</step>
</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: **34**

---

### pos.cart-update

#### `pos.cart-update.event.observe`

### pos.cart.line-item-details

#### `pos.cart.line-item-details.action.render`

Renders a full-screen modal interface launched from cart line item menu items. Use this target for complex line item workflows that require forms, multi-step processes, or detailed information displays beyond what a simple button can provide. Extensions at this target have access to detailed line item data through the Cart Line Item API and support workflows with multiple screens, navigation, and interactive components.

### pos.cart.line-item-details.action

#### `pos.cart.line-item-details.action.menu-item.render`

Renders a single interactive button component as a menu item in the cart line item action menu. Use this target for item-specific operations like applying discounts, adding custom properties, or launching verification workflows for individual cart items. Extensions at this target can access detailed line item information including title, quantity, price, discounts, properties, and product metadata through the Cart Line Item API. Menu items typically invoke `shopify.action.presentModal()` to launch the companion modal for complete workflows.

### pos.cash-tracking-session-complete

#### `pos.cash-tracking-session-complete.event.observe`

### pos.cash-tracking-session-start

#### `pos.cash-tracking-session-start.event.observe`

### pos.customer-details

#### `pos.customer-details.action.render`

Renders a full-screen modal interface launched from customer details menu items. Use this target for complex customer workflows that require forms, multi-step processes, or detailed information displays beyond what a simple button can provide. Extensions at this target have access to customer data through the Customer API and support workflows with multiple screens, navigation, and interactive components.

#### `pos.customer-details.block.render`

Renders a custom information section within the customer details screen. Use this target for displaying supplementary customer data like loyalty status, points balance, or personalized information alongside standard customer details. Extensions at this target appear as persistent blocks within the customer details interface and support interactive elements that can launch modal workflows using `shopify.action.presentModal()` for more complex customer operations.

### pos.customer-details.action

#### `pos.customer-details.action.menu-item.render`

Renders a single interactive button component as a menu item in the customer details action menu. Use this target for customer-specific operations like applying customer discounts, processing loyalty redemptions, or launching profile update workflows. Extensions at this target can access the customer identifier through the Customer API to perform customer-specific operations. Menu items typically invoke `shopify.action.presentModal()` to launch the companion modal for complete customer workflows.

### pos.draft-order-details

#### `pos.draft-order-details.action.render`

Renders a full-screen modal interface launched from draft order details menu items. Use this target for complex draft order workflows that require forms, multi-step processes, or detailed information displays beyond what a simple button can provide. Extensions at this target have access to draft order data through the Draft Order API and support workflows with multiple screens, navigation, and interactive components.

#### `pos.draft-order-details.block.render`

Renders a custom information section within the draft order details screen. Use this target for displaying supplementary order information like processing status, payment status, or workflow indicators alongside standard draft order details. Extensions at this target appear as persistent blocks within the draft order interface and support interactive elements that can launch modal workflows using `shopify.action.presentModal()` for more complex draft order operations.

### pos.draft-order-details.action

#### `pos.draft-order-details.action.menu-item.render`

Renders a single interactive button component as a menu item in the draft order details action menu. Use this target for draft order-specific operations like sending invoices, updating payment status, or launching custom workflow processes for pending orders. Extensions at this target can access draft order information including order ID, name, and associated customer through the Draft Order API. Menu items typically invoke `shopify.action.presentModal()` to launch the companion modal for complete draft order workflows.

### pos.exchange.post

#### `pos.exchange.post.action.render`

Renders a full-screen modal interface launched from post-exchange menu items. Use this target for complex post-exchange workflows that require forms, mult