display-design-studio

display-design-studio/skills

Skill Claude CodeCodex

Run a pre-submission compliance check against your Shopify app's codebase. Reviews App Store requirements and surfaces likely issues before you submit for official review.

display-design-studio/skills

Skill Claude CodeCodex

MUST be used first when prompts mention Metafields or Metaobjects. Use Metafields and Metaobjects to model and store custom data for your app. Metafields extend built-in Shopify data types like products or customers, Metaobjects are custom data types that can be used to store bespoke data structures. Metafield and…

display-design-studio/skills

Skill Claude CodeCodex

The Customer Account API allows customers to access their own data including orders, payment methods, and addresses.

display-design-studio/skills

Skill Claude CodeCodex

Search Shopify developer documentation across all APIs. Use only when no API-specific skill applies.

display-design-studio/skills

Skill Claude CodeCodex

Build Shopify apps, extensions, themes using GraphQL Admin API, Shopify CLI, Polaris UI, and Liquid. TRIGGER: "shopify", "shopify app", "checkout extension", "admin extension", "POS extension", "shopify theme", "liquid template", "polaris", "shopify graphql", "shopify webhook", "shopify billing", "app subscription"…

display-design-studio/skills

Skill Claude CodeCodex

Shopify Functions allow developers to customize the backend logic that powers parts of Shopify. Available APIs: Discount, Cart and Checkout Validation, Cart Transform, Pickup Point Delivery Option Generator, Delivery Customization, Fulfillment Constraints, Local Pickup Delivery Option Generator, Order Routing Location…

display-design-studio/skills

Skill Claude CodeCodex

Hydrogen storefront implementation cookbooks. Some of the available recipes are: B2B Commerce, Bundles, Combined Listings, Custom Cart Method, Dynamic Content with Metaobjects, Express Server, Google Tag Manager Integration, Infinite Scroll, Legacy Customer Account Flow, Markets, Partytown + Google Tag Manager…

display-design-studio/skills

Skill Claude CodeCodex

Liquid is an open-source templating language created by Shopify. It is the backbone of Shopify themes and is used to load dynamic content on storefronts. Keywords: liquid, theme, shopify-theme, liquid-component, liquid-block, liquid-section, liquid-snippet, liquid-schemas, shopify-theme-schemas.

display-design-studio/skills

Skill Claude CodeCodex

Get started building on Shopify. Use when a developer asks to build an app, build a theme, create a dev store, set up a partner account, scaffold a project, or get started developing for Shopify. NOT for merchants managing stores.

display-design-studio/skills

Skill Claude CodeCodex

Set up and connect a Shopify store from your AI assistant. Use when the user wants to start selling online, open a first Shopify store, try Shopify before they have an account, or get merchant-facing next steps after a preview store is created, including how to keep it, save it, or make it real. This is for store…

display-design-studio/skills

Skill Claude CodeCodex

The Partner API lets you programmatically access data about your Partner Dashboard, including your apps, themes, and affiliate referrals.

display-design-studio/skills

Skill Claude CodeCodex

The Payments Apps API enables payment providers to integrate their payment solutions with Shopify's checkout.

display-design-studio/skills

Skill Claude CodeCodex

Add custom actions and blocks from your app at contextually relevant spots throughout the Shopify Admin. Admin UI Extensions also supports scaffolding new adminextensions using Shopify CLI commands.

display-design-studio/skills

Skill Claude CodeCodex

Build your app's primary user interface embedded in the Shopify admin. If the prompt just mentions Polaris and you can't tell based off of the context what API they meant, assume they meant this API.

display-design-studio/skills

Skill Claude CodeCodex

Build custom functionality that merchants can install at defined points in the checkout flow, including product information, shipping, payment, order summary, and Shop Pay. Checkout UI Extensions also supports scaffolding new checkout extensions using Shopify CLI commands.

display-design-studio/skills

Skill Claude CodeCodex

Build custom functionality that merchants can install at defined points on the Order index, Order status, and Profile pages in customer accounts. Customer Account UI Extensions also supports scaffolding new customer account extensions using Shopify CLI commands.

display-design-studio/skills

Skill Claude CodeCodex

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.

display-design-studio/skills

Skill Claude CodeCodex

Answer a merchant's analytics and reporting questions with ShopifyQL — Shopify's query language for aggregated store metrics that the Admin GraphQL API cannot compute. Choose this (not admin) whenever the ask is for numbers, totals, trends, or breakdowns rather than fetching or mutating individual records: including…

display-design-studio/skills

Skill Claude CodeCodex

Use for custom storefronts requiring direct GraphQL queries/mutations for data fetching and cart operations. Choose this when you need full control over data fetching and rendering your own UI. NOT for Web Components - if the prompt mentions HTML tags like , , use storefront-web-components instead.

display-design-studio/skills

Skill Claude CodeCodex

Choose when the user needs Shopify CLI to run or fix something now: validate app or extension config on disk (shopify.app.toml, shopify.app. .toml, shopify.extension.toml); run or troubleshoot store workflows (shopify store auth, shopify store execute); or perform explicit store-scoped reads/writes on a named store…

display-design-studio/skills

Skill Claude CodeCodex

Tailwind CSS v4 best-practices skill covering utility-first patterns, @theme variables, responsive design, dark mode, custom styles, performance, accessibility, and a Figma-to-Tailwind theme generation workflow. Use when the user mentions Tailwind, tailwindcss, @theme, utility classes, Tailwind config, Figma design…

display-design-studio/skills

Skill Claude CodeCodex

Use when the user wants to use the UCP CLI to find, compare, buy, or track products from online merchants, or to set up and troubleshoot the local UCP profile required for merchant-scoped operations. Covers global catalog search ("find me X under $Y"), named-merchant transactions ("buy this from Z.com"), order…

display-design-studio/skills

Skill Claude CodeCodex

Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.

display-design-studio/skills

Skill Claude CodeCodex

Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive.