shopify-apps

# Shopify Apps Development

Expert guidance for building Shopify Apps with modern architecture, authentication patterns, and best practices based on current Shopify documentation.

## Core Capabilities

This skill provides expertise in:

1. **App Architecture & Setup** - Initialize apps, configure authentication, set up development environment
2. **GraphQL API Integration** - Admin API and Storefront API queries/mutations with proper patterns
3. **App Extensions** - Build checkout UI extensions, theme extensions, product subscriptions, POS UI extensions
4. **Embedded App UI** - Create embedded admin interfaces using App Bridge and Polaris
5. **Webhooks & Events** - Implement webhook handlers, manage event subscriptions
6. **App Distribution** - Prepare apps for submission, handle billing, manage app listings

## Prerequisites & MCP Integration

**Shopify Dev MCP Server**: This skill assumes the Shopify Dev MCP server is available and connected. The MCP server provides:
- Access to latest Shopify documentation at https://shopify.dev
- Up-to-date API references and examples
- Current best practices and patterns

When documentation is needed, use the MCP server to fetch the latest information from Shopify's official docs.

## Quick Start Workflows

### Creating a New Shopify App

1. **Choose your stack**: Remix (recommended), Next.js, or other Node.js framework
2. **Initialize with Shopify CLI**:
   ```bash
   npm init @shopify/app@latest
   # or
   shopify app init
   ```
3. **Configure OAuth scopes** in `shopify.app.toml`
4. **Set up database** for storing session tokens and app data
5. **Deploy** to a publicly accessible URL (required for OAuth)

### Authentication Flow

Modern Shopify apps use **Session Tokens** (for embedded apps) and **OAuth** (for authorization):

```javascript
// Session token validation (embedded apps)
import { authenticate } from './shopify.server';

export async function loader({ request }) {
  const { session, admin } = await authenticate.a