javeedishaq/theme-dev
skills/shopify/theme-dev/SKILL.md
Shopify theme development workflows and best practices. Use for theme deployment, local development, asset management, and theme customization.
$ install --global
skillsauthnpx skillsauth add javeedishaq/ai-workflow-orchestrator theme-devInstall 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 6, 2026, 3:10 AM7.7s1 file scanned
SKILL.md
- name:
- theme-dev
- description:
- Shopify theme development workflows and best practices. Use for theme deployment, local development, asset management, and theme customization.
Shopify Theme Development
MyArmy Theme Configuration
| Environment | Theme ID | Store | |-------------|----------|-------| | Production | 185946079581 | 087ffd-4a.myshopify.com | | Development | 188598124893 | 087ffd-4a.myshopify.com |
Development Commands
cd shopify-theme
# Start local development with hot reload
shopify theme dev --store=087ffd-4a.myshopify.com
# Preview specific theme
shopify theme dev --theme=188598124893 --store=087ffd-4a.myshopify.com
# Open theme preview in browser
shopify theme open --theme=188598124893 --store=087ffd-4a.myshopify.com
Deployment
# Push to production (CAREFUL!)
shopify theme push --theme=185946079581 --store=087ffd-4a.myshopify.com --allow-live
# Push to development theme
shopify theme push --theme=188598124893 --store=087ffd-4a.myshopify.com
# Push only specific files
shopify theme push --theme=188598124893 --store=087ffd-4a.myshopify.com \
--only="sections/product-*" --only="locales/*"
# Push only locale files
shopify theme push --theme=185946079581 --store=087ffd-4a.myshopify.com \
--allow-live --only="locales/"
Theme Structure
shopify-theme/
├── assets/ # CSS, JS, images
├── config/
│ ├── settings_data.json
│ └── settings_schema.json
├── layout/ # theme.liquid, password.liquid
├── locales/ # Language files (en, de, fr, it)
│ ├── en.default.json
│ ├── fr.json
│ ├── de.json
│ └── it.json
├── sections/ # Section templates
├── snippets/ # Reusable components
└── templates/ # Page templates
Locale Files
All 4 language files must stay in sync:
# Check locale file consistency
diff <(jq -r 'paths | join(".")' locales/en.default.json | sort) \
<(jq -r 'paths | join(".")' locales/de.json | sort)
Locale Structure
{
"products": {
"benefits": {
"lifetime_guarantee": "Lifetime Guarantee",
"lifetime_description": "Description here..."
}
}
}
Swiss Terminology (CRITICAL)
// ✅ CORRECT
"badge_title": "Custom Badge"
// ❌ WRONG
"ecusson_title": "Écusson personnalisé"
Section Development
Section File Structure
{% comment %} sections/custom-section.liquid {% endcomment %}
<section class="custom-section">
<div class="container">
{% if section.settings.heading %}
<h2>{{ section.settings.heading }}</h2>
{% endif %}
{% for block in section.blocks %}
{% case block.type %}
{% when 'text' %}
<p>{{ block.settings.content }}</p>
{% when 'image' %}
{{ block.settings.image | image_url: width: 800 | image_tag }}
{% endcase %}
{% endfor %}
</div>
</section>
{% schema %}
{
"name": "Custom Section",
"tag": "section",
"class": "custom-section-wrapper",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading"
}
],
"blocks": [
{
"type": "text",
"name": "Text Block",
"settings": [
{
"type": "richtext",
"id": "content",
"label": "Content"
}
]
}
],
"presets": [
{
"name": "Custom Section"
}
]
}
{% endschema %}
Asset Management
Image Optimization
# Optimize before adding to assets/
cd landing && npm run optimize:image path/to/image.png
# Convert to WebP
cd landing && npm run convert-originals
CSS/JS Best Practices
- Keep critical CSS inline in layout
- Lazy load non-critical assets
- Use
asset_urlfilter for all assets
{{ 'custom.css' | asset_url | stylesheet_tag }}
{{ 'custom.js' | asset_url | script_tag }}
Testing Workflow
- Make changes locally
- Test with
shopify theme dev - Push to development theme
- Test in development theme
- Push to production (after verification)
# Full workflow
shopify theme dev --store=087ffd-4a.myshopify.com
# Test changes...
shopify theme push --theme=188598124893 --store=087ffd-4a.myshopify.com
# Verify in Shopify admin...
shopify theme push --theme=185946079581 --store=087ffd-4a.myshopify.com --allow-live
Troubleshooting
Theme Pull
# Pull latest production theme
shopify theme pull --theme=185946079581 --store=087ffd-4a.myshopify.com
# Pull only specific directories
shopify theme pull --theme=185946079581 --store=087ffd-4a.myshopify.com \
--only="sections/*" --only="locales/*"
Authentication
# Re-authenticate if needed
shopify auth logout
shopify auth login --store=087ffd-4a.myshopify.com
Theme Check (Linting)
# Run Shopify theme check
shopify theme check
# Auto-fix issues
shopify theme check --auto-fix
Environment Variables
Required in .env:
SHOPIFY_ACCESS_TOKEN=shpat_...
SHOPIFY_STORE_DOMAIN=087ffd-4a.myshopify.com
SHOPIFY_PRODUCTION_THEME_ID=185946079581
SHOPIFY_DEVELOPMENT_THEME_ID=188598124893
Sync from 1Password:
npm run secrets:sync
Related Skills
javeedishaq/templates/skills/test-patterns
tools
VerifiedTrustedCommunity
# Test Patterns Testing patterns for reliable, maintainable, and fast tests. > **Template Usage:** Customize for your test framework (Vitest, Jest, Playwright, etc.) and assertion library. ## Test Structure ```typescript // user.test.ts import { describe, it, expect, beforeEach, afterEach } from 'vitest'; import { userService } from '@/services/user.service'; import { createTestUser, cleanupTestData } from '@/tests/helpers'; describe('UserService', () => { let testUserId: string; befor
1SKILL.mdUpdated Apr 6, 2026
javeedishaq/templates/skills/state-management
tools
VerifiedTrustedCommunity
# State Management Patterns Client-side state management patterns for modern applications. > **Template Usage:** Customize for your state library (React Query, Zustand, Jotai, Redux, etc.). ## State Categories | Type | Description | Solution | |------|-------------|----------| | **Server State** | Data from API/database | React Query, SWR | | **Client State** | UI state, user preferences | Zustand, Jotai, useState | | **Form State** | Form inputs, validation | React Hook Form, Formik | | **U
1SKILL.mdUpdated Apr 6, 2026
javeedishaq/templates/skills/service-patterns
development
VerifiedTrustedCommunity
# Service Patterns Service layer patterns for clean architecture with proper error handling, logging, and type safety. > **Template Usage:** Customize for your ORM (Prisma, Drizzle, TypeORM, etc.) and logging solution. ## Result Type Pattern Never throw exceptions from services. Always return a Result type. ```typescript // lib/result.ts export type Result<T, E = Error> = | { success: true; data: T } | { success: false; error: E }; export function ok<T>(data: T): Result<T, never> { r
1SKILL.mdUpdated Apr 6, 2026
javeedishaq/templates/skills/rls-security
testing
VerifiedTrustedCommunity
# Row-Level Security Patterns Database security patterns for multi-tenant and user-scoped data. > **Template Usage:** Customize for your database (PostgreSQL, Supabase, etc.) and auth system. ## RLS Fundamentals ### Enable RLS on Tables ```sql -- Enable RLS (required before policies take effect) ALTER TABLE users ENABLE ROW LEVEL SECURITY; ALTER TABLE posts ENABLE ROW LEVEL SECURITY; ALTER TABLE comments ENABLE ROW LEVEL SECURITY; -- Force RLS for table owners too (recommended) ALTER TABLE
1SKILL.mdUpdated Apr 6, 2026