Template and best practices for building embedded Shopify apps.
Install
mkdir -p .claude/skills/shopify-apps-p9393 && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/15693" && unzip -o skill.zip -d .claude/skills/shopify-apps-p9393 && rm skill.zipInstalls to .claude/skills/shopify-apps-p9393
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Modern Shopify app template with React RouterKey capabilities
- →Set up a modern Shopify app template with React Router.
- →Render an app embedded in the Shopify Admin.
- →Process webhooks securely with HMAC verification.
- →Use GraphQL for all new code.
- →Implement all GDPR handlers.
How it works
This skill provides patterns for building modern Shopify apps, including React Router setup, embedded App Bridge integration, and secure webhook handling, while also identifying anti-patterns.
Inputs & outputs
When to use shopify-apps
- →Set up a new Shopify app project
- →Configure embedded Shopify admin views
- →Implement secure webhook handling
- →Migrate from REST to GraphQL in Shopify
About this skill
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 |
When to Use
This skill is applicable to execute the workflow or actions described in the overview.
When not to use it
- →Using REST API for new apps.
- →Processing webhooks before sending a response.
- →Polling instead of using webhooks.
How it compares
This skill offers a specific template and best practices for Shopify app development, focusing on modern tools like React Router and GraphQL, unlike general web development guidance.
Compared to similar skills
shopify-apps side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| shopify-apps (this skill) | 0 | 4mo | No flags | Intermediate |
| shopify-expert | 0 | 6mo | No flags | Advanced |
| ai-model-web | 1 | 2mo | Review | Intermediate |
| flowglad-pricing-ui | 1 | 5mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
shopify-expert
fulfon
Use when building Shopify themes, apps, custom storefronts, or e-commerce solutions. Invoke for Liquid templating, Storefront API, app development, checkout customization, Shopify Plus features.
ai-model-web
TencentCloudBase
Use this skill when developing browser/Web applications (React/Vue/Angular, static websites, SPAs) that need AI capabilities. Features text generation (generateText) and streaming (streamText) via @cloudbase/js-sdk. Built-in models include Hunyuan (hunyuan-2.0-instruct-20251111 recommended) and DeepSeek (deepseek-v3.2 recommended). NOT for Node.js backend (use ai-model-nodejs), WeChat Mini Program (use ai-model-wechat), or image generation (Node SDK only).
flowglad-pricing-ui
flowglad
Build pricing pages, pricing cards, and plan displays with Flowglad. Use this skill when creating pricing tables, displaying subscription options, or building plan comparison interfaces.
podcast-generation
microsoft
Generate AI-powered podcast-style audio narratives using Azure OpenAI's GPT Realtime Mini model via WebSocket. Use when building text-to-speech features, audio narrative generation, podcast creation from content, or integrating with Azure OpenAI Realtime API for real audio output. Covers full-stack implementation from React frontend to Python FastAPI backend with WebSocket streaming.
convex-realtime
waynesutton
Patterns for building reactive apps including subscription management, optimistic updates, cache behavior, and paginated queries with cursor-based loading
wagmi-development
wevm
Creates Wagmi features across all layers - core actions, query options, framework bindings. Use when adding new actions, hooks, or working across packages/core, packages/react, packages/vue.