antigravity-claudekit/skills/ck-shopify/SKILL.md

name, description

name	description
ck-shopify	Build Shopify apps, extensions, and themes with Shopify CLI. Use for GraphQL/REST Admin API, Polaris UI components, Liquid templates, checkout customization, webhooks, and billing integration.

Shopify Development

Build Shopify apps, extensions, and themes for the Shopify platform.

When to Use

• Building Shopify apps (OAuth, Admin API, webhooks, billing)
• Creating checkout UI, admin, or POS extensions
• Developing Liquid-based themes
• Integrating with GraphQL Admin API
• Setting up Shopify CLI workflows

Don't Use When

• Building for non-Shopify e-commerce platforms
• Simple storefront customizations that don't need an app or extension

Quick Start

npm install -g @shopify/cli@latest

# App development
shopify app init
shopify app dev        # Starts local server with tunnel
shopify app deploy

# Theme development
shopify theme init
shopify theme dev      # Preview at localhost:9292
shopify theme push --development

Build Decision Guide

Build	When
App	External service integration, multi-store functionality, complex logic, charging for features
Extension	Customize checkout, extend admin pages, POS actions, discount/shipping rules
Theme	Custom storefront design, brand-specific layouts, product/collection pages

Essential Patterns

GraphQL Product Query:

query GetProducts($first: Int!) {
  products(first: $first) {
    edges {
      node { id title handle variants(first: 5) { edges { node { id price } } } }
    }
    pageInfo { hasNextPage endCursor }
  }
}

Checkout Extension (React):

import { reactExtension, BlockStack, TextField } from '@shopify/ui-extensions-react/checkout';
export default reactExtension('purchase.checkout.block.render', () => <Extension />);

Liquid Product Display:

{% for product in collection.products %}
  <h3>{{ product.title }}</h3>
  <p>{{ product.price | money }}</p>
{% endfor %}

Best Practices

• Prefer GraphQL over REST for new development
• Store API credentials in environment variables — never hardcode
• Verify webhook HMAC signatures before processing
• Request minimal OAuth scopes
• Use bulk operations for large datasets
• Implement exponential backoff for rate limit errors

Reference Files

• references/app-development.md — OAuth, APIs, webhooks, billing
• references/extensions.md — Checkout, Admin, POS, Functions
• references/themes.md — Liquid, sections, deployment

Resources

• Shopify Dev Docs: https://shopify.dev/docs
• GraphQL API: https://shopify.dev/docs/api/admin-graphql
• Polaris: https://polaris.shopify.com
• Current API version: 2025-01