New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Shopify Reference Architecture

by jeremylongshore in jeremylongshore/tons-of-skills-marketplace

Implement Shopify app reference architecture with Remix, Prisma session storage, and the official app template patterns.

MITAuto-check passedDatabases

Install Shopify Reference Architecture

skills CLI
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill shopify-reference-architecture -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install jeremylongshore/tons-of-skills-marketplace shopify-reference-architecture --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/.curated/shopify-reference-architecture .claude/skills/shopify-reference-architecture && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
shopify-reference-architecture
GitHub stars
2.8k
Token cost
~1.2k tokens
SKILL.md length
283 words
Files
5 (incl. references)
Skills in repo
3,342
Repo updated
First seen
Licence
MIT

At a glance

Implement Shopify app reference architecture with Remix, Prisma session storage, and the official app template patterns.

  • Works in 5 steps: Official Project Structure (Remix… → Core App Configuration → Session Storage with Prisma → …
  • Setting up a new Shopify app
  • SKILL.md covers Overview, Prerequisites, Instructions and Output, plus 3 more sections
  • Calls shopify, npx and npm

What it does

Shopify Reference Architecture is an agent skill from jeremylongshore/tons-of-skills-marketplace. Implement Shopify app reference architecture with Remix, Prisma session storage, and the official app template patterns. Use when setting up a new Shopify app, structuring a Remix-based project, or configuring Prisma session storage for production. Trigger with phrases like "shopify architecture", "shopify app structure", "shopify project layout", "shopify Remix template", "shopify app design".

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including reference files (for example `references/authenticated-admin-route.md`, `references/core-app-configuration.md` and `references/prisma-session-storage.md`). Compatibility notes: Designed for Claude Code

It sits in Databases, covering ORMs and data access. It works with Shopify and Prisma. The repository describes itself as: Model-agnostic agent-skills platform with a harness-free canonical layer, verified adapters, and the ccpi package manager. Explore at tonsofskills.com. The licence is MIT.

When your agent uses it

  • Setting up a new Shopify app
  • Structuring a Remix-based project
  • Configuring Prisma session storage for production
  • With phrases like shopify architecture

Example prompts

  • “shopify architecture”
  • “shopify app structure”
  • “shopify project layout”
  • “/shopify-reference-architecture”

Requirements

  • Node.js
  • Compatibility (from SKILL.md): Designed for Claude Code
  • Pre-approved tools (allowed-tools): Read, Grep

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Official Project Structure (Remix Template)
  2. Core App Configuration
  3. Session Storage with Prisma
  4. Route Pattern — Authenticated Admin Page
  5. Theme App Extension

What it can do on your machine

Read from SKILL.md and the folder at commit cfae287. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Grep

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • shopify
    • npx
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • npmjs.com
    • github.com
    • polaris.shopify.com
    • shopify.dev

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Designed for Claude Code

    From compatibility in the SKILL.md frontmatter.

Context cost

Shopify Reference Architecture loads about 1.2k tokens when it runs, and up to ~2.5k if it reads all its reference files. Until then it costs about 107 tokens; SKILL.md has 283 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~107
When it runs · the whole SKILL.md, loaded when a task matches
~1.2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from jeremylongshore/tons-of-skills-marketplace at commit cfae287, republished under its MIT licence (© jeremylongshore). 283 words, ~1,162 tokens.

Download SKILL.mdSave it as .claude/skills/shopify-reference-architecture/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
shopify-reference-architecture
description
Implement Shopify app reference architecture with Remix, Prisma session storage, and the official app template patterns. Use when setting up a new Shopify app, structuring a Remix-based project, or configuring Prisma session storage for production. Trigger with phrases like "shopify architecture", "shopify app structure", "shopify project layout", "shopify Remix template", "shopify app design".
allowed-tools
Read, Grep
compatibility
Designed for Claude Code
version
2.7.0
license
MIT
author
Jeremy Longshore <jeremy@intentsolutions.io>
tags
saas, ecommerce, shopify

Shopify Reference Architecture

Overview

Production-ready architecture based on Shopify's official Remix app template. Covers project structure, session storage with Prisma, extension architecture, and the recommended app patterns.

Prerequisites

  • Understanding of Remix framework basics
  • Shopify CLI 3.x installed
  • Familiarity with Prisma ORM

Instructions

Step 1: Official Project Structure (Remix Template)
my-shopify-app/
├── app/
│   ├── routes/
│   │   ├── app._index.tsx          # Main app dashboard
│   │   ├── app.products.tsx        # Product management page
│   │   ├── app.settings.tsx        # App settings
│   │   ├── auth.$.tsx              # OAuth catch-all route
│   │   ├── auth.login/
│   │   │   └── route.tsx           # Login page
│   │   └── webhooks.tsx            # Webhook handler
│   ├── shopify.server.ts           # Shopify API config (singleton)
│   ├── db.server.ts                # Database connection
│   └── root.tsx
├── extensions/
│   ├── theme-app-extension/        # Theme blocks for Online Store
│   ├── checkout-ui/                # Checkout UI extension
│   └── product-discount/           # Shopify Function
├── prisma/
│   ├── schema.prisma               # Database schema
│   └── migrations/
├── shopify.app.toml                # App configuration
├── shopify.web.toml                # Web process config
├── remix.config.js
└── package.json
Step 2: Core App Configuration

The shopify.server.ts singleton configures the API client, session storage, webhooks, and auth hooks. It uses LATEST_API_VERSION from @shopify/shopify-api and exports all auth/session helpers.

See Core App Configuration for the complete implementation.

Step 3: Session Storage with Prisma

The Prisma schema defines the required Session model (matching Shopify's session fields) plus your app's custom models. Use SQLite for dev and PostgreSQL for production.

See Prisma Session Storage for the complete schema.

Step 4: Route Pattern — Authenticated Admin Page

Each app route calls authenticate.admin(request) to get a pre-authenticated GraphQL client, then renders with Polaris components. Data flows through Remix loaders.

See Authenticated Admin Route for the complete implementation.

Step 5: Theme App Extension

Theme app extensions add customizable blocks to the Online Store. Each block defines a Liquid template with a {% schema %} JSON block for merchant-facing settings.

See Theme App Extension for the complete implementation.

Output

  • Remix app with Shopify authentication
  • Prisma session storage (production-ready)
  • Authenticated admin routes with GraphQL data loading
  • Theme app extension for Online Store customization

Error Handling

IssueCauseSolution
Session not foundDB not migratedRun npx prisma migrate dev
Auth redirect loopMissing APP_UNINSTALLED handlerImplement webhook to clean sessions
Extension not showingNot deployedRun shopify app deploy
Polaris styles missingMissing providerWrap app in <AppProvider>

Examples

Quick Scaffold
bash
# Fastest way to start — uses official template
shopify app init --template remix

# Or clone directly
npx degit Shopify/shopify-app-template-remix my-shopify-app
cd my-shopify-app
npm install
shopify app dev

Resources

© jeremylongshore, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files (references) in skills/.curated/shopify-reference-architecture of jeremylongshore/tons-of-skills-marketplace.

  • SKILL.md
  • references/authenticated-admin-route.md
  • references/core-app-configuration.md
  • references/prisma-session-storage.md
  • references/theme-app-extension.md

Open the folder on GitHubat commit cfae287

Compare with similar skills

Shopify Reference Architecture next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Shopify Reference Architecture compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Shopify Reference Architecture this skilljeremylongshore/tons-of-skills-marketplace2.8k—~1.2kAutomated safety check: PassMIT
Content Create Hero Imageprisma/web1.1k—~6.9kAutomated safety check: PassNone
Better Drizzlealmeidazs/better-drizzle349—~1.7kAutomated safety check: PassApache-2.0
Prisma Database Setupcurvenote/curvenote1703 repos~1.4kAutomated safety check: PassMIT
Create Auth Skilldeadlock-mod-manager/deadlock-mod-manager4784 repos~3.4kAutomated safety check: PassGPL-3.0
Prisma Client APIcurvenote/curvenote1702 repos~1.6kAutomated safety check: PassMIT

Similar skills

  • Content Create Hero Image

    prisma/web

    Official

    A skill your agent uses when the operator wants a hero or meta image for a Prisma blog post; asks to create or generate a blog hero, cover, social card, Open Graph, or YouTube image; mentions cover…

    1.1k GitHub stars~6.9k tokensUpdated yesterday
    DatabasesAuto-check passed

  • Better Drizzle

    almeidazs/better-drizzle

    Write, review, and debug code that uses better-drizzle, the typed repository layer over Drizzle ORM 1.x (better(db), client.users.findMany, paginate, cursor, upsertMany, relation include/connect…

    349 GitHub stars~1.7k tokensUpdated 2 days ago
    DatabasesAuto-check passed

  • Prisma Database Setup

    curvenote/curvenote

    Guides for configuring Prisma with different database providers (PostgreSQL, MySQL, SQLite, MongoDB, etc.).

    170 GitHub starsUsed in 3 repos~1.4k tokens
    DatabasesAuto-check passed

  • Create Auth Skill

    deadlock-mod-manager/deadlock-mod-manager

    Scaffold and implement authentication in TypeScript/JavaScript apps using Better Auth.

    478 GitHub starsUsed in 4 repos~3.4k tokens
    DatabasesAuto-check passed

  • Prisma Client API

    curvenote/curvenote

    Prisma Client API reference covering model queries, filters, operators, and client methods.

    170 GitHub starsUsed in 2 repos~1.6k tokens
    DatabasesAuto-check passed

  • Add Backend

    ahpxex/open-dashboard

    Everything about the data layer — pick one of six ready-to-run backend templates (TanStack Start + Drizzle + better-auth, Hono + Drizzle + better-auth, Hono + Prisma + better-auth, Hono + Drizzle +…

    146 GitHub stars~3.6k tokensUpdated 3 mo ago
    DatabasesAuto-check passed

More from jeremylongshore/tons-of-skills-marketplace

All 3,342 skills in this repo

  • Performing Security Code Review

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to conduct a security-focused code review using the security-agent plugin.

    2.8k GitHub starsUsed in 2 repos~1.3k tokens
    Auto-check: notes

  • Adapting Transfer Learning Models

    jeremylongshore/tons-of-skills-marketplace

    Build this skill automates the adaptation of pre-trained machine learning models using transfer learning techniques.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Agent Context Loader

    jeremylongshore/tons-of-skills-marketplace

    Execute proactive auto-loading: automatically detects and loads agents.md files.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Aggregating Performance Metrics

    jeremylongshore/tons-of-skills-marketplace

    Aggregate and centralize performance metrics from applications, systems, databases, caches, and services.

    2.8k GitHub stars~1.2k tokensUpdated today
    Auto-check passed

  • Analyzing Capacity Planning

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to analyze capacity requirements and plan for future growth.

    2.8k GitHub stars~947 tokensUpdated today
    Auto-check passed

  • Analyzing Database Indexes

    jeremylongshore/tons-of-skills-marketplace

    Process use when you need to work with database indexing. An agent skill from jeremylongshore/tons-of-skills-marketplace.

    2.8k GitHub stars~2k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Shopify Reference Architecture

What does Shopify Reference Architecture do?

Implement Shopify app reference architecture with Remix, Prisma session storage, and the official app template patterns. Shopify Reference Architecture is an agent skill from jeremylongshore/tons-of-skills-marketplace. Implement Shopify app reference architecture with Remix, Prisma session storage, and the official app template patterns.

When should I use Shopify Reference Architecture?

Shopify Reference Architecture fits situations like: setting up a new Shopify app; structuring a Remix-based project; configuring Prisma session storage for production; with phrases like shopify architecture.

How do I install Shopify Reference Architecture in Claude Code?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill shopify-reference-architecture -a claude-code`. Or copy the skill folder (skills/.curated/shopify-reference-architecture in jeremylongshore/tons-of-skills-marketplace) into .claude/skills/shopify-reference-architecture in your project. Claude Code loads it when a task matches its description.

How do I install Shopify Reference Architecture in Codex?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill shopify-reference-architecture -a codex`. Or copy the skill folder (skills/.curated/shopify-reference-architecture in jeremylongshore/tons-of-skills-marketplace) into .agents/skills/shopify-reference-architecture in your project. Codex loads it when a task matches its description.

Can I use Shopify Reference Architecture in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill shopify-reference-architecture -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/shopify-reference-architecture, .gemini/skills/shopify-reference-architecture, .github/skills/shopify-reference-architecture and .opencode/skills/shopify-reference-architecture in your project.

What does Shopify Reference Architecture need to run?

Going by SKILL.md and its folder, Shopify Reference Architecture needs the command-line tools its instructions call (shopify, npx and npm). Our summary lists: Node.js. Its frontmatter pre-approves these tools: Read, Grep. Compatibility (from SKILL.md): Designed for Claude Code.

Does Shopify Reference Architecture access the network?

SKILL.md names 4 domains. As links in the text: npmjs.com, github.com, polaris.shopify.com and shopify.dev. This is read from the text; nothing was executed.

Is Shopify Reference Architecture safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Shopify Reference Architecture use?

Shopify Reference Architecture is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Shopify Reference Architecture use?

About 1.2k tokens (SKILL.md is roughly 4.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.3k tokens, read only when the agent opens those files.

What are the alternatives to Shopify Reference Architecture?

Skills that share tags, products or a category with Shopify Reference Architecture: Content Create Hero Image (prisma/web, 1.1k stars), Better Drizzle (almeidazs/better-drizzle, 349 stars), Prisma Database Setup (curvenote/curvenote, 170 stars) and Create Auth Skill (deadlock-mod-manager/deadlock-mod-manager, 478 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Shopify Reference Architecture?

jeremylongshore (a GitHub user) maintains it in jeremylongshore/tons-of-skills-marketplace, which has 2,827 GitHub stars. The repository holds 3,342 skills in this directory. The repository was last updated on October 10, 2026.

Source: jeremylongshore/tons-of-skills-marketplace on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.