tech-leads-club/shopify-developer
packages/skills-catalog/skills/(development)/shopify-developer/SKILL.md
Complete Shopify development reference covering Liquid templating, OS 2.0 themes, GraphQL APIs, Hydrogen, Functions, and performance optimization (API v2026-01). Use when working with .liquid files, building Shopify themes or apps, writing GraphQL queries for Shopify, debugging Liquid errors, creating app extensions, migrating from Scripts to Functions, or building headless storefronts. Triggers on "Shopify", "Liquid template", "Hydrogen", "Storefront API", "theme development", "Shopify Functions", "Polaris". Do NOT use for non-Shopify e-commerce platforms.
$ install --global
skillsauthnpx skillsauth add tech-leads-club/agent-skills shopify-developerInstall 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.
3
Scanners Passed
9
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: Apr 27, 2026, 6:33 AM58.3s12 files scanned
SKILL.md
- name:
- shopify-developer
- description:
- Complete Shopify development reference covering Liquid templating, OS 2.0 themes, GraphQL APIs, Hydrogen, Functions, and performance optimization (API v2026-01). Use when working with .liquid files, building Shopify themes or apps, writing GraphQL queries for Shopify, debugging Liquid errors, creating app extensions, migrating from Scripts to Functions, or building headless storefronts. Triggers on "Shopify", "Liquid template", "Hydrogen", "Storefront API", "theme development", "Shopify Functions", "Polaris". Do NOT use for non-Shopify e-commerce platforms.
Shopify Developer Reference
Comprehensive reference for professional Shopify development - API version 2026-01.
Quick Reference
| Item | Value |
| ---------------- | ------------------------------------------------------------------- |
| API version | 2026-01 (stable) |
| GraphQL Admin | POST https://{store}.myshopify.com/admin/api/2026-01/graphql.json |
| Storefront API | POST https://{store}.myshopify.com/api/2026-01/graphql.json |
| Ajax API (theme) | /cart.js, /cart/add.js, /cart/change.js |
| CLI install | npm install -g @shopify/cli |
| Theme dev | shopify theme dev --store {store}.myshopify.com |
| App dev | shopify app dev |
| Deploy | shopify app deploy |
| Docs | shopify.dev |
Choose Your Path
Read the reference file(s) that match your task:
Liquid templating - writing or debugging .liquid files:
- references/liquid-syntax.md - Tags, control flow, iteration, whitespace, LiquidDoc
- references/liquid-filters.md - All filter categories with examples
- references/liquid-objects.md - Product, collection, cart, customer, and global objects
Theme development - building or customising themes:
- references/theme-development.md - OS 2.0 architecture, sections, blocks, JSON templates, settings schema
API integration - fetching or modifying data programmatically:
- references/api-admin.md - GraphQL Admin API (primary), REST (legacy), OAuth, webhooks, rate limiting
- references/api-storefront.md - Storefront API, Ajax API, cart operations
App development - building Shopify apps:
- references/app-development.md - Shopify CLI, extensions, Polaris Web Components, App Bridge
Serverless logic - custom business rules:
- references/functions.md - Shopify Functions (replacing Scripts), Rust/JS targets, deployment
Headless commerce - custom storefronts:
- references/hydrogen.md - Hydrogen framework, React Router 7, Storefront API integration
Optimisation and troubleshooting:
- references/performance.md - Images, JS, CSS, fonts, Liquid, Core Web Vitals
- references/debugging.md - Liquid errors, API errors, cart issues, webhook failures
Deprecation Notices
| Deprecated | Replacement | Deadline | | --------------------- | ---------------------- | ---------------------------------------- | | Shopify Scripts | Shopify Functions | August 2025 (migration), sundown TBD | | checkout.liquid | Checkout Extensibility | August 2024 (Plus), done | | REST Admin API | GraphQL Admin API | Active deprecation (no removal date yet) | | Legacy custom apps | New auth model | January 2025 (done) | | Polaris React | Polaris Web Components | Active migration | | Remix (app framework) | React Router 7 | Hydrogen 2025.5.0+ |
Liquid Essentials
Three syntax types:
{{ product.title | upcase }} {# Output with filter #}
{% if product.available %}In stock{% endif %} {# Logic tag #}
{% assign sale = product.price | times: 0.8 %} {# Assignment #}
{%- if condition -%}Stripped whitespace{%- endif -%}
Key patterns:
{% for product in collection.products limit: 5 %}
{% render 'product-card', product: product %}
{% endfor %}
{% paginate collection.products by 12 %}
{% for product in paginate.collection.products %}...{% endfor %}
{{ paginate | default_pagination }}
{% endpaginate %}
API Essentials
// GraphQL Admin - always use GraphQL over REST
const response = await fetch(`https://${store}.myshopify.com/admin/api/2026-01/graphql.json`, {
method: 'POST',
headers: {
'X-Shopify-Access-Token': accessToken,
'Content-Type': 'application/json',
},
body: JSON.stringify({ query, variables }),
})
const { data, errors } = await response.json()
if (errors) throw new Error(errors[0].message)
// Ajax API (theme-only cart operations)
fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: variantId, quantity: 1 }),
})
Reference Files
| File | Lines | Coverage | | ------------------------------------------------------- | ----- | ------------------------------------------------------------------------------ | | liquid-syntax.md | ~600 | Tags, control flow, iteration, variables, whitespace, LiquidDoc | | liquid-filters.md | ~870 | String, numeric, array, Shopify-specific, date, URL, colour filters | | liquid-objects.md | ~695 | All Shopify objects: product, variant, collection, cart, customer, order, etc. | | theme-development.md | ~1200 | File structure, JSON templates, sections, blocks, settings schema, layout | | api-admin.md | ~595 | GraphQL queries/mutations, REST (legacy), OAuth, webhooks, rate limiting | | api-storefront.md | ~235 | Storefront API, Ajax API, cart operations, Customer Account API | | app-development.md | ~760 | CLI, app architecture, extensions, Polaris Web Components, deployment | | functions.md | ~300 | Function types, Rust/JS targets, CLI workflow, Scripts migration | | hydrogen.md | ~375 | Setup, routing, data loading, Storefront API, deployment | | performance.md | ~605 | Images, JS, CSS, fonts, Liquid, third-party scripts, Core Web Vitals | | debugging.md | ~650 | Liquid, JavaScript, API, cart, webhook, theme editor troubleshooting |
Related Skills
tech-leads-club/excalidraw-studio
development
VerifiedTrustedCommunity
Generate Excalidraw diagrams from natural language descriptions. Outputs .excalidraw JSON files openable in Excalidraw. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", "generate an Excalidraw file", "draw an ER diagram", "create a sequence diagram", or "make a class diagram". Supports flowcharts, relationship diagrams, mind maps, architecture, DFD, swimlane, class, sequence, and ER diagrams. Can use icon libraries (AWS, GCP, etc.) when set up. Do NOT use for code architecture analysis (use the architecture skills), Mermaid diagram rendering (use mermaid-studio), or non-visual documentation (use docs-writer).
2,213SKILL.mdUpdated Apr 27, 2026
tech-leads-club/chrome-devtools
tools
VerifiedTrustedCommunity
Browser debugging, performance profiling, and automation via Chrome DevTools MCP. Use when user says "debug this page", "take a screenshot", "check network requests", "profile performance", "inspect console errors", or "analyze page load". Do NOT use for full E2E test suites (use playwright-skill) or non-browser debugging.
2,213SKILL.mdUpdated Apr 27, 2026
tech-leads-club/security-threat-model
development
VerifiedTrustedCommunity
Repository-grounded threat modeling that enumerates trust boundaries, assets, attacker capabilities, abuse paths, and mitigations, and writes a concise Markdown threat model. Use when the user asks to threat model a codebase or path, enumerate threats or abuse paths, or perform AppSec threat modeling. Do NOT use for general architecture summaries, code review, security best practices (use security-best-practices), or non-security design work.
2,213SKILL.mdUpdated Apr 27, 2026
tech-leads-club/security-ownership-map
development
VerifiedTrustedCommunity
Analyze git repositories to build a security ownership topology (people-to-file), compute bus factor and sensitive-code ownership, and export CSV/JSON for graph databases and visualization. Use when the user explicitly wants a security-oriented ownership or bus-factor analysis grounded in git history (for example: orphaned sensitive code, security maintainers, CODEOWNERS reality checks for risk, sensitive hotspots, or ownership clusters). Do NOT use for general maintainer lists, non-security ownership questions, or threat modeling (use security-threat-model).
2,213SKILL.mdUpdated Apr 27, 2026