Shopify Claude Code Kit

A collection of 56 Skills designed to supercharge your AI coding assistant for Shopify app development and beyond.

Quick Start

Installation

npm install -g shopify-cc-kit

Setup

npx shopify-cc-kit@latest

This syncs skills into .claude/ in your project, then installs official Shopify and Matt Pocock skills on top.

Features

Skills (56 Total)

Located in .claude/skills/, organized by category:

Shopify Ecosystem (12 skills)

| Skill | Description | |-------|-------------| | shopify-remix-template | Official Shopify Remix template | | shopify-billing | App monetization (subscriptions, charges) | | shopify-webhooks | Webhook handling & HMAC verification | | shopify-extensions | Admin, Checkout, Theme extensions overview | | shopify-app-bridge | Embed apps in Shopify Admin | | shopify-polaris-design | Polaris Design System patterns | | shopify-polaris-icons | Polaris Icons usage | | shopify-polaris-viz | Data visualizations | | shopify-testing | Unit, integration, E2E testing | | shopify-app-i18n | Multi-language support | | shopify-app-logo | App Store logo creation & validation | | shopify-feature-image | App Store feature images |

Frontend & Design (8 skills)

| Skill | Description | |-------|-------------| | frontend-design | Production-grade frontend interfaces | | design | UI mockups and design | | canvas-design | Static visual art & design | | algorithmic-art | p5.js generative art | | remotion-best-practices | Video creation in React | | vercel-react-best-practices | React/Next.js optimization (45 rules) | | vercel-ai-sdk | Vercel AI SDK integration | | email-template-design | HTML email templates |

Three.js Suite (10 skills)

| Skill | Description | |-------|-------------| | threejs-fundamentals | Scene setup, cameras, renderer | | threejs-geometry | Built-in shapes, BufferGeometry | | threejs-materials | PBR, basic, phong, shader materials | | threejs-lighting | Light types, shadows, environment | | threejs-animation | Keyframe animation, skeletal | | threejs-interaction | Raycasting, controls, events | | threejs-loaders | GLTF, textures, images | | threejs-textures | Texture types, UV mapping | | threejs-shaders | GLSL, ShaderMaterial, uniforms | | threejs-postprocessing | EffectComposer, bloom, etc. |

Backend & Languages (4 skills)

| Skill | Description | |-------|-------------| | typescript | TypeScript 5.x+ best practices | | remixjs-best-practices | Remix / React Router v7 | | mongoose | MongoDB ODM 8.x+ | | misoapps | Miso Apps SDK integration |

State, Forms & Security (4 skills)

| Skill | Description | |-------|-------------| | zustand-state | State management with Zustand | | form-validation | Zod + Conform for Remix forms | | security-hardening | OWASP, authentication, encryption | | resilience-engineering | Rate limits, retry, circuit breakers |

Documentation & Research (6 skills)

| Skill | Description | |-------|-------------| | docusaurus-generator | End-user documentation sites | | technical-writing | Internal technical docs | | docs-out | Documentation generation | | research | Research and synthesis | | brainstorm | Creative brainstorming | | rigorous-reasoning | Philosophical reasoning |

Git Workflow (4 skills)

| Skill | Description | |-------|-------------| | git-cm | Commit with conventional message | | git-pr | Generate PR description | | git-sync | Sync with remote (pull --rebase) | | git-undo | Undo last commit |

Meta-Skills (5 skills)

| Skill | Description | |-------|-------------| | agent-creator | Create new agents | | skill-creator | Create new skills | | rule-creator | Create behavior rules | | agent-browser | Browser automation | | code-investigator | Code analysis and audits |

Utilities (3 skills)

| Skill | Description | |-------|-------------| | app-listing | App Store listing content | | changelog | Changelog generation | | explain | Code explanation |

Slash Commands

| Command | Description | |---------|-------------| | /git-cm | Commit with conventional message | | /git-pr | Generate PR description | | /git-sync | Sync with remote (pull --rebase) | | /git-undo | Undo last commit | | /changelog | Generate changelog | | /explain | Explain code in detail | | /design | Create UI mockups | | /brainstorm | Facilitate brainstorming |

Project Structure

.claude/
└── skills/           # 56 Skills & Capabilities
    ├── shopify-remix-template/
    ├── shopify-billing/
    ├── vercel-react-best-practices/
    ├── threejs-*/
    └── ...

Usage

With Claude Code

1. Install the package
2. Copy .claude to your project
3. Skills are automatically loaded based on context

With Cursor

1. Copy .claude directory to your workspace
2. Use slash commands: /git-cm, /changelog, etc.

External Skills

The sync CLI automatically installs additional skills from:

| Source | Description | |--------|-------------| | Shopify/shopify-ai-toolkit | Official Shopify skills with validation scripts (Admin API, Functions, Liquid, Hydrogen, Polaris, POS) | | mattpocock/skills | Engineering methodology skills (TDD, PRDs, planning, debugging, codebase analysis) |

These are installed via npx skills@latest add during setup.

Contributing

Use the meta-skills to create new skills:

/skill-creator

License

ISC License - see LICENSE for details.

Package: shopify-cc-kit on npm