Skip to main content
affpapa.org
RU EN
skill

shopify-apps · davila7 — Claude Code skill: what it does, how to install

Supplies Claude Code with development patterns for Shopify apps, covering React Router, App Bridge integration, webhook HMAC verification, and GraphQL.

Install into Claude Code · claude-code-templates All methods and platforms ↓ 
npx claude-code-templates@latest --skill web-development/shopify-apps
Open on GitHub

What shopify-apps does

This skill guides Claude Code through building modern Shopify apps. It establishes workflows for embedded admin views with App Bridge, secure HMAC checking on incoming webhooks, and Polaris UI integration.

The skill explicitly flags common architectural mistakes. It rejects REST endpoints in favor of the GraphQL Admin API and forbids polling where webhooks are appropriate. Incoming webhooks must return an immediate HTTP status before asynchronous background tasks run. It also enforces GDPR compliance endpoints and rate limit tracking.

What it helps with

  • scaffold an embedded Shopify app using React Router and App Bridge
  • verify HMAC signatures on incoming Shopify webhooks
  • implement required GDPR compliance webhook endpoints
  • replace legacy REST API calls with GraphQL Admin queries

Example prompts for the agent

  • Set up HMAC verification for incoming Shopify order webhooks
  • Scaffold an embedded Shopify admin app with React Router and App Bridge
  • Show the required GDPR compliance handlers for our Shopify app

How to install shopify-apps

1claude-code-templates

npx claude-code-templates@latest --skill web-development/shopify-apps

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill shopify-apps -a claude-code

3Manually: put the files in place

~/.claude/skills/shopify-apps/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/shopify-apps/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about shopify-apps

How to install shopify-apps in Claude Code?

Run npx claude-code-templates@latest --skill web-development/shopify-apps in your terminal. Alternatively, place the file directly at ~/.claude/skills/shopify-apps/SKILL.md.

What does shopify-apps do?

It teaches Claude Code how to develop Shopify applications following current guidelines. This covers embedded interfaces via App Bridge, Polaris components, and GraphQL queries.

Which practices does this skill reject?

It blocks the use of REST API for new development and bans polling instead of webhooks. It also warns against running heavy processing before returning an HTTP response to a webhook.

Similar skills

All skills for Frontend and UI →

shopify-apps by other authors comes first.

shopify-apps sickn33 Patterns for Shopify app development with Remix and React Router. Guides App Bridge setups, Polaris UI components, billing flows, and webhooks. CX Codex +1 1,000installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set804

The whole set →
archive A slash command that stores completed orchestrations with their metrics and lessons, so you can look back at them later. 228installs game-performance-profiler Audits a game project for frame rate, memory and rendering bottlenecks, then hands back a prioritized optimization list. 227installs publisher-linkedin Drafts LinkedIn posts from blog articles or local files and attaches media via API. Useful for developers sharing written content. 226installs hotfix-deploy This command lays out an emergency hotfix workflow, from incident triage and testing to production checks and rollback. Use it to plan a fix for a critical issue. 225installs computer-use-agents Guides the setup of desktop automation agents using vision models. Helps assemble screen-capture loops and hardened container sandboxes. 222installs future-scenario-generator Builds scenarios for a chosen time horizon, scores their plausibility, and connects them to strategic decisions. Use it to explore risks and possible outcomes. 222installs testing_plan_integration Generates integration testing plans, assesses code testability, and suggests refactoring steps like dependency injection. 221installs agents-llamaindex Equips Claude Code with patterns for building RAG systems and data agents using LlamaIndex. 220installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor