shopify-apps
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.
Profile →npx skills add sickn33/agentic-awesome-skills --skill shopify-apps --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Provides expert patterns for Shopify app development across multiple areas: app setup with React Router, embedding in Shopify Admin via App Bridge, handling webhooks securely, querying and mutating via the GraphQL Admin API, using Polaris components, integrating billing, and developing app extensions.
How it works
- Describes project structure and templates for a new Shopify app, including files like shopify.server.ts and app/shopify.server.ts for server-side setup and authentication.
- Illustrates an Embedded App with App Bridge: wrapping the app with AppProvider and exposing API key, along with a sample App Bridge-enabled router and error boundary.
- Webhook Handling: shows an action function that authenticates webhooks via HMAC, logs events, processes topics, and responds with a 200 status; includes functions to queue heavy work and perform GDPR-related handling.
- GraphQL Admin API: provides loader and action examples to query and mutate shop data, including pagination for products, product updates, and a bulk operation pattern; emphasizes using authenticated admin client.
- Billing API Integration: demonstrates a Remix route that lists plans, creates subscriptions via GraphQL, handles responses, and redirects to a confirmation URL for merchant approval.
- App Extension Development: includes a sample shopify.extension.toml configuration and a sample UI extension component mapping in the Admin context.
When to use it
- When starting a new Shopify app or extending an existing one with embedded Admin UI, webhooks, GraphQL Admin API interactions, billing, or app extensions.
What it can touch
- Files and code blocks shown include: app/shopify.server.ts, // app/routes/webhooks.tsx, // GraphQL queries with authenticated admin client, // app/routes/app.billing.tsx, and shopify.extension.toml with extension source snippets.
- Declared tools available: claude-code, codex, cursor.
Caveats
- Webhooks require 5-second response; processing can be queued for heavy work.
- GDPR webhooks are noted as mandatory for App Store.
- Some notes indicate template details and default behaviors (e.g., App Bridge requirements, embedded auth strategy) but no guarantees of success outside described patterns.
- No licensing or usage restrictions beyond the MIT license for the skill itself; guidance references Shopify and related tooling in examples.
# Shopify Apps 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. ## Patterns ### React Router App Setup Modern Shopify app template with React Router **When to use**: Starting a new Shopify app ### Template # Create new Shopify app with CLI npm init @shopify/app@latest my-shopify-app # Project structure # my-shopify-app/ # ├── app/ # │ ├── routes/ # │ │ ├── app._index.tsx # Main app page # │ │ ├── app.tsx # App layout with providers # │ │ ├── auth.$.tsx # Auth callback # │ │ └── webhooks.tsx # Webhook handler # │ ├── shopify.server.ts # Server configuration # │ └── root.tsx # Root layout # ├── extensions/ # App extensions # ├── shopify.app.toml # App configuration # └── package.json // shopify.app.toml name = "my-shopify-app" client_id = "your-client-id" application_url = "https://your-app.example.com" [access_scopes] scopes = "read_products,write_products,read_orders" [webhooks] api_version = "2024-10" [webhooks.subscriptions] topics = ["orders/create", "products/update"] uri = "/webhooks" [auth] redirect_urls = ["https://your-app.exampl
- Patterns
- React Router App Setup
- Template
- Notes
- Embedded App with App Bridge
- Webhook Handling
- GraphQL Admin API
- Billing API Integration
- App Extension Development
- Sharp Edges
- Webhook Must Respond Within 5 Seconds
- Respond immediately, process asynchronously
- For simple operations, be quick
- Monitor webhook performance
Webhooks registered on deploy shopify app deploy Test without slash curl -X POST https://your-app.com/webhooks Test with slash curl -X POST https://your-app.com/webhooks/
What does the shopify-apps skill do?
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.
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill shopify-apps --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.