playbooks

home / skills / sickn33 / antigravity-awesome-skills / shopify-apps

shopify-apps skill

/skills/shopify-apps

This skill helps you implement and audit Shopify app patterns including embedded apps, App Bridge, webhooks, and GraphQL APIs.

This is most likely a fork of the shopify-apps skill from xfstudio
npx playbooks add skill sickn33/antigravity-awesome-skills --skill shopify-apps

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
1.2 KB
---
name: shopify-apps
description: "Expert patterns for Shopify app development including Remix/React Router apps, embedded apps with App Bridge, webhook handling, GraphQL Admin API, Polaris components, billing, and app extensions. Use when: shopify app, shopify, embedded app, polaris, app bridge."
source: vibeship-spawner-skills (Apache 2.0)
---

# Shopify Apps

## Patterns

### React Router App Setup

Modern Shopify app template with React Router

### Embedded App with App Bridge

Render app embedded in Shopify Admin

### Webhook Handling

Secure webhook processing with HMAC verification

## Anti-Patterns

### ❌ REST API for New Apps

### ❌ Webhook Processing Before Response

### ❌ Polling Instead of Webhooks

## ⚠️ Sharp Edges

| Issue | Severity | Solution |
|-------|----------|----------|
| Issue | high | ## Respond immediately, process asynchronously |
| Issue | high | ## Check rate limit headers |
| Issue | high | ## Request protected customer data access |
| Issue | medium | ## Use TOML only (recommended) |
| Issue | medium | ## Handle both URL formats |
| Issue | high | ## Use GraphQL for all new code |
| Issue | high | ## Use latest App Bridge via script tag |
| Issue | high | ## Implement all GDPR handlers |

Overview

This skill captures expert patterns for building robust Shopify apps, combining modern React/Remix routing, embedded Admin UI with App Bridge, secure webhook handling, GraphQL Admin API usage, Polaris components, billing, and app extensions. It focuses on practical, production-ready choices and warns about common anti-patterns. Use it to accelerate architecture and implementation decisions for new or migrated Shopify apps.

How this skill works

The skill documents recommended setups (React Router/Remix) for frontend routing and how to render apps embedded in the Shopify Admin using App Bridge. It describes secure webhook processing (HMAC verification and immediate 200 response with async processing), GraphQL-first interactions with the Admin API, Polaris component usage for consistent UI, and billing/app extension patterns. It also lists anti-patterns and operational sharp edges that must be handled before launch.

When to use it

  • Starting a new Shopify app or modernizing an existing app to use GraphQL and Polaris
  • Building an embedded app that must live inside Shopify Admin using App Bridge
  • Implementing webhook handlers and needing a secure, scalable processing flow
  • Adding billing, app extensions, or preparing for GDPR/compliance requirements
  • Auditing an app for performance, rate limits, and latest App Bridge usage

Best practices

  • Prefer GraphQL Admin API for new features; avoid introducing REST for new endpoints
  • Embed the app with the latest App Bridge (script tag or SDK) for session/authorization consistency
  • Respond to webhooks immediately (200) and process payloads asynchronously after HMAC verification
  • Use Polaris components for Admin UI consistency and accessibility
  • Check rate-limit headers and implement backoff/retry logic for API calls
  • Implement GDPR handlers and request any protected_customer_data scopes only when needed

Example use cases

  • A Remix-based app that mounts routes via React Router and renders inside Shopify Admin with App Bridge
  • Webhook receiver that verifies HMAC, returns 200 fast, and enqueues work for background workers
  • GraphQL-driven billing flow that creates subscriptions and manages pricing via Admin API
  • Migrating a legacy REST app to GraphQL and replacing polling with event-driven webhooks
  • Building an app extension that injects UI into Shopify storefront or Admin with Polaris styling

FAQ

Should I use REST or GraphQL for new Shopify app code?

Use GraphQL for new features. It offers more efficient queries and aligns with Shopify's recommended practices.

How should webhooks be processed for reliability?

Verify HMAC, return a 200 response immediately, then process the webhook payload asynchronously to avoid timeouts and retries.