Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

orcaqubits/shopify-performance

Name: shopify-performance
Author: orcaqubits

dist/codex/shopify-commerce/skills/shopify-performance/SKILL.md

npx skillsauth add orcaqubits/agentic-commerce-claude-plugins shopify-performance

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

Shopify Performance Optimization

Before writing code

Fetch live docs:

Web-search site:shopify.dev theme performance for theme optimization
Web-search site:shopify.dev hydrogen caching for Hydrogen caching strategies
Web-search site:web.dev core web vitals for current CWV guidelines and thresholds
Web-search site:shopify.dev image optimization cdn for image URL transforms
Web-search site:shopify.dev theme speed report for Shopify's built-in speed metrics

Liquid Rendering Performance

Template Optimization

Minimize Liquid logic — complex loops and conditionals slow server-side rendering
Use {% render %} (not {% include %}) — isolated scope prevents variable conflicts
Avoid nested loops — O(n²) in Liquid is expensive
Limit forloop iterations with limit: parameter
Pre-compute values with {% assign %} instead of repeating expressions

Object Access

Access specific properties: {{ product.title }} not {{ product | json }}
Avoid all_products[handle] in loops — each is a separate data lookup
Use section settings to pass data instead of global lookups
Minimize use of {{ content_for_header }} scripts (managed by Shopify — cannot remove, but minimize additional scripts)

Liquid Anti-Patterns

| Anti-Pattern | Why It's Slow | Better Approach | |-------------|--------------|-----------------| | Nested for loops | O(n²) rendering | Flatten data, use single loop | | all_products[handle] in loop | Data fetch per iteration | Pass products via section settings | | {% include %} with variables | Shared scope causes conflicts | Use {% render %} (isolated) | | Complex {% if %} chains | Evaluated every render | Simplify conditions, use {% case %} | | Unused sections in templates | Rendered even if hidden | Remove from JSON template |

Asset Optimization

CSS

Minimize CSS — remove unused styles
Use {{ 'style.css' | asset_url | stylesheet_tag }} for proper caching
Critical CSS: inline above-the-fold styles in <head>
Defer non-critical CSS: media="print" onload="this.media='all'"

JavaScript

Defer non-critical JS: <script defer> or dynamic import()
Minimize JS bundles — Shopify themes don't need frameworks for most UI
Use native browser APIs over jQuery
Load third-party scripts asynchronously (async attribute)
Avoid render-blocking scripts in <head>

Images

Shopify CDN image optimization:

# Responsive images with srcset
{{ image | image_url: width: 800 }}
{{ image | image_url: width: 400 }}

# Srcset pattern
<img
  srcset="{{ image | image_url: width: 400 }} 400w,
         {{ image | image_url: width: 800 }} 800w,
         {{ image | image_url: width: 1200 }} 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="{{ image | image_url: width: 800 }}"
  alt="{{ image.alt }}"
  loading="lazy"
  width="{{ image.width }}"
  height="{{ image.height }}"
>

Key image practices:

Use loading="lazy" for below-the-fold images
Use fetchpriority="high" for LCP image
Set explicit width and height to prevent layout shift
Shopify CDN automatically serves WebP/AVIF when supported
URL parameters: ?width=, ?height=, ?crop=, ?format=

Fetch live docs: Web-search site:shopify.dev image_url filter parameters for current CDN transform options — new parameters are added over time.

Core Web Vitals

LCP (Largest Contentful Paint)

Target: < 2.5 seconds

Preload hero/LCP image: <link rel="preload" as="image" href="{{ image | image_url: width: 1200 }}">
Use fetchpriority="high" on LCP image
Avoid lazy-loading above-the-fold images
Minimize render-blocking CSS and JS
Use server-side rendering (Liquid or Hydrogen SSR)

CLS (Cumulative Layout Shift)

Target: < 0.1

Set explicit width and height on all images and media
Reserve space for dynamic content (ads, embeds, lazy-loaded images)
Avoid inserting content above existing content after page load
Use aspect-ratio CSS property for responsive media containers
Avoid dynamically injected banners or pop-ups that shift content

INP (Interaction to Next Paint)

Target: < 200ms

Minimize main-thread blocking JavaScript
Break up long tasks with requestIdleCallback or setTimeout(fn, 0)
Use CSS for animations and transitions (not JS)
Debounce event handlers (scroll, resize, input)
Avoid synchronous layout thrashing (read-then-write DOM patterns)

Fetch live docs: CWV thresholds and measurement methodology evolve. Web-search site:web.dev core web vitals thresholds for current targets.

Hydrogen Caching

Cache Strategies

// Pattern: apply cache strategy to storefront query
const data = await storefront.query(QUERY, {
  cache: CacheLong(),  // products, collections
});

const cart = await storefront.query(CART_QUERY, {
  cache: CacheShort(), // dynamic data
});

| Strategy | Use For | |----------|---------| | CacheLong() | Products, collections, pages | | CacheShort() | Cart, personalized content | | CacheNone() | Customer-specific data | | CacheCustom({...}) | Fine-tuned scenarios |

Fetch live docs for exact TTL values — Hydrogen caching defaults may change across versions.

Streaming SSR

Use defer() in loaders for non-critical data
Critical data renders immediately, deferred data streams in
Show loading states with <Suspense> + <Await>
Preload routes with <Link prefetch="intent">

Shopify CDN

Shopify's global CDN:

Automatic for all theme assets and images
Cache-Control headers managed by Shopify
Image transformations via URL parameters
No manual CDN configuration needed for themes
Asset fingerprinting for cache busting

Measurement Tools

| Tool | What It Measures | |------|-----------------| | Shopify Theme Speed Report | Overall theme score in admin | | Google Lighthouse | CWV + performance audit | | WebPageTest | Real-world loading waterfall | | Chrome DevTools Performance | JS profiling, layout shifts | | Search Console CWV Report | Field data from real users |

Best Practices

Measure before optimizing — use Lighthouse, WebPageTest, Shopify's theme speed report
Focus on LCP image optimization first (biggest impact for most stores)
Lazy-load everything below the fold
Minimize third-party scripts (analytics, chat widgets, social embeds)
Use Shopify's built-in analytics over custom tracking scripts where possible
For Hydrogen: cache aggressively, stream non-critical data, preload routes
Test on real devices and slow connections (3G throttling)
Set explicit dimensions on all media to prevent CLS
Use font-display: swap for custom fonts

Fetch the Shopify performance documentation, Core Web Vitals guides, and Hydrogen caching docs for exact optimization techniques and current best practices before implementing.

orcaqubits/shopify-performance

dist/codex/shopify-commerce/skills/shopify-performance/SKILL.md

Optimize Shopify performance — Liquid rendering, asset optimization, CDN strategies, Core Web Vitals, Hydrogen caching, image optimization, preloading, and lazy loading. Use when improving Shopify store speed.

27 stars

development

Updated May 14, 2026

$ install --global

skillsauth

npx skillsauth add orcaqubits/agentic-commerce-claude-plugins shopify-performance

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: May 14, 2026, 6:04 AM165.1s1 file scanned

SKILL.md

name:: shopify-performance
description:: >

Shopify Performance Optimization

Before writing code

Fetch live docs:

Web-search site:shopify.dev theme performance for theme optimization
Web-search site:shopify.dev hydrogen caching for Hydrogen caching strategies
Web-search site:web.dev core web vitals for current CWV guidelines and thresholds
Web-search site:shopify.dev image optimization cdn for image URL transforms
Web-search site:shopify.dev theme speed report for Shopify's built-in speed metrics

Liquid Rendering Performance

Template Optimization

Minimize Liquid logic — complex loops and conditionals slow server-side rendering
Use {% render %} (not {% include %}) — isolated scope prevents variable conflicts
Avoid nested loops — O(n²) in Liquid is expensive
Limit forloop iterations with limit: parameter
Pre-compute values with {% assign %} instead of repeating expressions

Object Access

Access specific properties: {{ product.title }} not {{ product | json }}
Avoid all_products[handle] in loops — each is a separate data lookup
Use section settings to pass data instead of global lookups
Minimize use of {{ content_for_header }} scripts (managed by Shopify — cannot remove, but minimize additional scripts)

Liquid Anti-Patterns

Asset Optimization

CSS

Minimize CSS — remove unused styles
Use {{ 'style.css' | asset_url | stylesheet_tag }} for proper caching
Critical CSS: inline above-the-fold styles in <head>
Defer non-critical CSS: media="print" onload="this.media='all'"

JavaScript

Defer non-critical JS: <script defer> or dynamic import()
Minimize JS bundles — Shopify themes don't need frameworks for most UI
Use native browser APIs over jQuery
Load third-party scripts asynchronously (async attribute)
Avoid render-blocking scripts in <head>

Images

Shopify CDN image optimization:

# Responsive images with srcset
{{ image | image_url: width: 800 }}
{{ image | image_url: width: 400 }}

# Srcset pattern
<img
  srcset="{{ image | image_url: width: 400 }} 400w,
         {{ image | image_url: width: 800 }} 800w,
         {{ image | image_url: width: 1200 }} 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="{{ image | image_url: width: 800 }}"
  alt="{{ image.alt }}"
  loading="lazy"
  width="{{ image.width }}"
  height="{{ image.height }}"
>

Key image practices:

Use loading="lazy" for below-the-fold images
Use fetchpriority="high" for LCP image
Set explicit width and height to prevent layout shift
Shopify CDN automatically serves WebP/AVIF when supported
URL parameters: ?width=, ?height=, ?crop=, ?format=

Fetch live docs: Web-search site:shopify.dev image_url filter parameters for current CDN transform options — new parameters are added over time.

Core Web Vitals

LCP (Largest Contentful Paint)

Target: < 2.5 seconds

Preload hero/LCP image: <link rel="preload" as="image" href="{{ image | image_url: width: 1200 }}">
Use fetchpriority="high" on LCP image
Avoid lazy-loading above-the-fold images
Minimize render-blocking CSS and JS
Use server-side rendering (Liquid or Hydrogen SSR)

CLS (Cumulative Layout Shift)

Target: < 0.1

Set explicit width and height on all images and media
Reserve space for dynamic content (ads, embeds, lazy-loaded images)
Avoid inserting content above existing content after page load
Use aspect-ratio CSS property for responsive media containers
Avoid dynamically injected banners or pop-ups that shift content

INP (Interaction to Next Paint)

Target: < 200ms

Minimize main-thread blocking JavaScript
Break up long tasks with requestIdleCallback or setTimeout(fn, 0)
Use CSS for animations and transitions (not JS)
Debounce event handlers (scroll, resize, input)
Avoid synchronous layout thrashing (read-then-write DOM patterns)

Fetch live docs: CWV thresholds and measurement methodology evolve. Web-search site:web.dev core web vitals thresholds for current targets.

Hydrogen Caching

Cache Strategies

// Pattern: apply cache strategy to storefront query
const data = await storefront.query(QUERY, {
  cache: CacheLong(),  // products, collections
});

const cart = await storefront.query(CART_QUERY, {
  cache: CacheShort(), // dynamic data
});

Fetch live docs for exact TTL values — Hydrogen caching defaults may change across versions.

Streaming SSR

Use defer() in loaders for non-critical data
Critical data renders immediately, deferred data streams in
Show loading states with <Suspense> + <Await>
Preload routes with <Link prefetch="intent">

Shopify CDN

Shopify's global CDN:

Automatic for all theme assets and images
Cache-Control headers managed by Shopify
Image transformations via URL parameters
No manual CDN configuration needed for themes
Asset fingerprinting for cache busting

Measurement Tools

Best Practices

Measure before optimizing — use Lighthouse, WebPageTest, Shopify's theme speed report
Focus on LCP image optimization first (biggest impact for most stores)
Lazy-load everything below the fold
Minimize third-party scripts (analytics, chat widgets, social embeds)
Use Shopify's built-in analytics over custom tracking scripts where possible
For Hydrogen: cache aggressively, stream non-critical data, preload routes
Test on real devices and slow connections (3G throttling)
Set explicit dimensions on all media to prevent CLS
Use font-display: swap for custom fonts

Fetch the Shopify performance documentation, Core Web Vitals guides, and Hydrogen caching docs for exact optimization techniques and current best practices before implementing.

Related Skills

orcaqubits/spree-headless-storefront

development

VerifiedTrustedCommunity

Build with Spree's headless Next.js storefront — the official `spree/storefront` repo (Next.js 16 App Router with Server Actions and Turbopack, React 19 Server Components, Tailwind CSS 4, TypeScript 5, `@spree/sdk`, Sentry), server-only auth (httpOnly JWT cookies + publishable key), MeiliSearch faceted catalog, one-page checkout with Apple/Google Pay/Klarna/Affirm/SEPA, multi-region market routing, GA4 + JSON-LD SEO, and Vercel/Docker deployment. Use when forking or customizing the storefront, or evaluating headless adoption.

27SKILL.mdUpdated May 14, 2026

orcaqubits/spree-headless-storefront

orcaqubits/spree-extensions

tools

VerifiedTrustedCommunity

Build Spree extensions as Rails engines — gem scaffolding, `bin/rails g spree:extension`, mounting routes/migrations/assets, the modern `prepend` decorator pattern (`*_decorator.rb` with `self.prepended(base)`), generators (`spree:model_decorator`, `spree:controller_decorator`), the four customization surfaces in preference order (Events > Webhooks > Dependencies > Decorators), Spree::Dependencies for swapping service objects, gem release/versioning, and the deprecated Deface engine. Use when building a reusable Spree extension or adding non-trivial customization to an app.

27SKILL.mdUpdated May 14, 2026

orcaqubits/spree-extensions

orcaqubits/spree-events-webhooks

development

VerifiedTrustedCommunity

Build with Spree's event bus and Webhooks 2.0 — `Spree::Events` publication, `Spree::Subscriber` DSL with `subscribes_to` and `on`, wildcard matching, lifecycle events (`{model}.created/.updated/.deleted` via `publishes_lifecycle_events`), the canonical event catalog (order.*, payment.*, shipment.*, product.*), Webhooks 2.0 endpoints, HMAC-SHA256 signing (`X-Spree-Webhook-Signature`), exponential-backoff retries, and Sidekiq job orchestration. Use when wiring event-driven business logic, building webhook consumers, or replacing ActiveSupport callback chains.

27SKILL.mdUpdated May 14, 2026

orcaqubits/spree-events-webhooks

orcaqubits/spree-dev-patterns

tools

VerifiedTrustedCommunity

Cross-cutting Spree development patterns — the customization preference hierarchy (Events > Webhooks > Dependencies > Decorators), `Spree::Dependencies` service-object swapping, the `_decorator.rb` + `prepend` + `self.prepended` idiom, idempotent subscribers and webhook receivers, multi-store scoping discipline, prefixed IDs, calculator polymorphism (shipping/promotion/tax share the base), service-object composition with `dry-monads` or simple results, why to avoid `class_eval` reopening and Deface, and Spree-on-Rails idioms (Hotwire/Turbo Stimulus, ActiveStorage, Action Cable, Sidekiq). Use when designing the architecture of a Spree extension or solving cross-cutting concerns.

27SKILL.mdUpdated May 14, 2026

orcaqubits/spree-dev-patterns

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/orcaqubits/agentic-commerce-claude-plugins.git

# Copy into Claude Code skills folder (global)
cp -r agentic-commerce-claude-plugins/dist/codex/shopify-commerce/skills/shopify-performance ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

orcaqubits/agentic-commerce-claude-plugins

27 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT