The latest articles on DEV Community by Mohammed Dawoud (@movictor99). https://dev.to/movictor99 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4011033%2F36aeb037-001c-4a2d-9239-3c153187d29b.jpeg https://dev.to/movictor99 en Mohammed Dawoud Wed, 01 Jul 2026 14:31:35 +0000 https://dev.to/movictor99/i-built-an-ai-skill-that-generates-a-complete-shopify-theme-from-an-interview-455l https://dev.to/movictor99/i-built-an-ai-skill-that-generates-a-complete-shopify-theme-from-an-interview-455l <p>Building a production Shopify theme from scratch is days of work: JSON templates, sections with schemas, blocks, section groups, locale files, RTL, accessibility, performance — and then wiring <em>every</em> piece to the theme editor so the merchant never touches code.</p> <p>I wanted that to happen from a conversation. So I built <strong><a href="https://github.com/moVictor99/shopify-theme-builder" rel="noopener noreferrer">shopify-theme-builder</a></strong> — an open-source AI skill that interviews you about your store, then generates a complete <strong>Online Store 2.0</strong> theme.</p> <p><strong>How it works</strong></p> <p>It runs a short, batched <strong>discovery interview</strong> — store archetype, brand direction, languages/markets, template scope, features, metafields — infers sensible defaults for anything you skip, then moves through gated phases: architecture plan → scaffold → build sections → design pass → i18n/RTL → QA → package. Say <em>"just build it"</em> to skip the questions.</p> <p><strong>The non-negotiables it enforces</strong></p> <ol> <li> <strong>100% theme-editor controllable</strong> — no hard-coded text, color, font, or image anywhere. Every value is a setting, block, or section group. If a merchant would need a developer to rebrand, that's treated as a defect.</li> <li> <strong>Systemized design</strong> — one token layer (<code>settings_schema.json</code> → CSS custom properties) drives all color, type, spacing, radius, shadow, and motion. Change a token, restyle the whole store.</li> <li> <strong>Shopify-compliant</strong> — valid <code>{% schema %}</code> on every section, <code>theme-check</code> clean, no deprecated Liquid, built to Theme Store standards (mirrors Dawn where in doubt).</li> </ol> <p>Plus: <strong>bilingual Arabic/English + full RTL</strong> by default, WCAG 2.1 AA, responsive <code>srcset</code> images, and structured data — the stuff that's easy to skip and painful to retrofit.</p> <p><strong>Works across agents</strong></p> <p>It's an Agent Skill: native in Claude Code, and usable in <strong>Codex, Cursor, and Windsurf</strong> through an <code>AGENTS.md</code> adapter. Same workflow, one source of truth.</p> <h2> Try it </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> bash git clone https://github.com/moVictor99/shopify-theme-builder # Claude: ./install.sh | others: keep the repo in your project </code></pre> </div> opensource ai shopify webdev