Shopify Theme Builder

Build a complete, clean, Online Store 2.0 Shopify theme from a guided requirements interview. Use when a user wants to build, generate, scaffold, or design a Shopify theme, Shopify sections, JSON templates, Liquid, section groups, or a fully theme-editor-controllable storefront (including bilingual / RTL Arabic stores). Produces a zip-ready theme that passes theme-check and meets Shopify Theme Store requirements.

8 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add moVictor99/shopify-theme-builder --skill shopify-theme-builder

Manual install

git clone --depth 1 https://github.com/moVictor99/shopify-theme-builder.git /tmp/shopify-theme-builder
mkdir -p ~/.claude/skills
cp -r /tmp/shopify-theme-builder/. ~/.claude/skills/shopify-theme-builder

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Shopify Theme Builder

You build **production-grade, Online Store 2.0 (OS 2.0) Shopify themes** that a
non-technical merchant can run entirely from the theme editor. Everything you
emit must satisfy Shopify's official theme-development standards and Theme Store
review requirements, and must look designed — never templated.

You compose two skills:

- **`everything-claude-code:orchestrate`** — structure the build as gated,
  verifiable phases with explicit hand-offs. Do not generate the whole theme in
  one pass; move phase by phase and checkpoint with the user.
- **`ui-ux-pro-max`** — the aesthetic backbone: type scale, spacing rhythm,
  color tokens, hierarchy, motion, states, accessibility. Invoke it during
  Phase 1 (design direction) and Phase 4 (design pass).

**Reconciliation rule:** when `orchestrate` or `ui-ux-pro-max` conventions
conflict with anything here, prefer *their* conventions and note the swap in the
theme's `THEME_NOTES.md`. When *Shopify's* documented conventions conflict with
any of the three, Shopify wins — always.

---

## The three hard constraints (never trade these away)

1. **Shopify-compliant.** Correct directory layout and file names, valid
   `{% schema %}` on every section, all required templates/config present,
   `theme-check` clean (zero errors), no deprecated Liquid, no private APIs.
   When unsure, do exactly what the official docs and **Dawn** do. See
   `references/shopify-standards.md`.

Read the full skill on GitHub

Details

Skill name: shopify-theme-builder
Repository: moVictor99/shopify-theme-builder
License: MIT
Repo updated: 11 July 2026

FAQ

What does the Shopify Theme Builder skill do?

How do I install the Shopify Theme Builder skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add moVictor99/shopify-theme-builder --skill shopify-theme-builder. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Shopify Theme Builder popular?

It lives in moVictor99/shopify-theme-builder, which has 8 GitHub stars and 1 forks.

Related skills

Terminal UI Design System

chyinan/terminal-ui-design-system

Create terminal-inspired UI interfaces with macOS-style window decorations, monospace typography, and a warm color palette. Use this skill when building developer tools, code marketplaces, technical documentation sites, or any interface that benefits from a terminal/command-line aesthetic. Provides complete design system specifications including color palette, typography, spacing, components, and CSS implementation details.

Frontend & Design

Product UI Director

macistone71-jpg/heqingfeng-product-ui-skill

何庆丰定制的产品 UI/UX 设计、实现与验收 Skill。凡是新建、改版、评审或迭代 Web、移动端、桌面端界面，设计系统、页面、组件、交互、响应式、可访问性、配色、字体、数据图表或视觉质量时必须使用。覆盖需求简报→设计系统→差异化视觉→代码实现→真实浏览器验收→迭代记录，内置可搜索 UI/UX 数据和项目级设计记忆。

Frontend & Design

UI Craft

Achref23illi/ui-craft

Make a mobile UI look and feel like a shipped app. Rules with numbers, 29 screen recipes (plus 200 measured ones), a fast screenshot review and lessons from a real redesign, grounded in 4,500 iOS screens from 78 apps (Spotify, Airbnb, Instagram, Apple Music, Wise, Coinbase, Google Maps, Uber Eats, Halide, Notion…). Use before designing or restyling any mobile screen (React Native, Expo, SwiftUI, Flutter, mobile web), when reviewing screenshots for "does this look like a real app", or when you need a reference for a pattern (feed, player, editor, sheet, paywall, settings, onboarding, empty stat

Frontend & Design

Muji Style Skill

yanliudesign/muji-style-skill

Create original quiet-living visuals from any theme, object, product, article, event, space, or supplied photograph using natural materials, restrained color, functional typography, asymmetric whitespace, honest photography, and human imperfection. Always use this skill when the user asks for MUJI-inspired, 无印良品感, 日系极简, Japanese minimalism, quiet living, natural minimalism, understated lifestyle design, 素朴生活美学, 留白产品海报, or asks to make a visual feel quieter, simpler, more natural, and less designed. Preserve the underlying design principles without copying MUJI logos, packaging, campaigns, stor

Frontend & Design

Web Design Taste

Alice59357/web-design-taste

帮助没有设计背景、不懂技术术语的用户做出设计师级高质量网页。用户只需用大白话描述需求，通过选择预设风格卡片（而非描述设计），即可产出完整可运行的网页。每当用户提到"做个网页"、"做个网站"、"落地页"、"作品集"、"介绍页"、"官网"、"销售页"，或表达"想要好看的页面但不知道怎么形容"时，必须使用此技能。即使用户没有提供任何设计要求，也要使用此技能来引导。

Frontend & Design

Kiro Motion Studio

KRYPT-123/kiro-motion-studio

KIRO 风格炫酷视觉视频工作流：片头、个人展示片、热点视频、歌词MV、3D铬金属Logo片、说唱/演出VJ循环，含卡点剪辑、封面和抖音文案。

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.