skills.rest
ousiass
ousiassCOMMUNITY
Explore all skills by this author →
GitHub

html-shopify

Convert HTML mocks into Shopify OS 2.0 themes with Atomic Design snippets.

Updated May 3, 2026
Search Tags:#atomic design#liquid templates#image_picker#html to shopify#shopify os 2.0#tailwind compilation#theme scaffolding
One-click install
npx skills add https://github.com/ousiass/dotfiles --skill html-shopify
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-shopify
Source: https://github.com/ousiass/dotfiles/tree/main/.claude/skills/html-shopify
Command: npx skills add https://github.com/ousiass/dotfiles --skill html-shopify

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Converts arbitrary HTML mockups into a Shopify Online Store 2.0 theme while structuring the UI using an Atomic Design snippet hierarchy.

Core Features & Use Cases

  • HTML-to-Shopify theme generation: Produces a complete theme directory ready for shopify theme dev and push.
  • Atomic Design snippet structuring: Organizes generated UI into atoms, molecules, and organisms for maintainable reuse.
  • Liquid-friendly customization: Converts text into section.settings and images into image_picker-friendly settings with mock asset fallbacks.

Quick Start

Use the html-shopify skill to convert your input HTML into a Shopify theme by running: /html-shopify path/to/mock.zip path/to/output/theme-dir.

Frequently Asked Questions about html-shopify

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert an HTML mockup into a Shopify OS 2.0 theme?▼

To convert an HTML mockup into a Shopify OS 2.0 theme, the tool processes your HTML files and generates a complete theme directory. This includes Liquid templates, section schemas, snippets, and assets ready for theme development workflows.

What is Atomic Design snippet structuring in Shopify theme development?▼

Atomic Design snippet structuring organizes generated Shopify theme UI components into atoms, molecules, and organisms. This hierarchy ensures maintainable reuse and structured organization when transforming HTML mocks into Liquid templates.

Can I use Tailwind CSS compilation when converting HTML to Shopify?▼

Yes, you can use Tailwind CSS compilation when converting HTML to Shopify. The process compiles Tailwind classes directly into the assets/base.css file, ensuring your styles are correctly bundled within the generated Shopify OS 2.0 theme.

How do images work when transforming HTML to a Shopify theme?▼

When transforming HTML to a Shopify theme, images are converted into image_picker-friendly settings within section schemas. The system also provides mock asset fallbacks to ensure templates render correctly before you upload your final images.

Does the HTML to Shopify conversion support single-page HTML files?▼

Yes, the HTML to Shopify conversion supports both exported HTML bundles and single-page HTML files. It maps these pages to Shopify templates via user confirmation to produce ready-to-run sections and snippets.

Do I need to manually create section schemas for Shopify OS 2.0 templates?▼

No, you do not need to manually create section schemas for Shopify OS 2.0 templates. The conversion process automatically generates Liquid templates and section schemas, converting static text into dynamic section.settings for customization.

Related Skills

Explore More Design & Creative Skills→
trielofftrieloff

page-decomposition

Identify content sequences within a page section and output neutral descriptions.

Community
Intermediate
DevOttsDevOtts
4

shopify-forge

Converts Shopify theme assets into deployable Liquid sections and templates with visual verification.

Community
Advanced
ousiassousiass

stitch-shopify

Convert Stitch mock ZIPs into Shopify Online Store 2.0 themes with Liquid templates.

Community
Advanced
rodrigotoledorodrigotoledo

shopify-developer

Reference Liquid syntax, GraphQL APIs, and Hydrogen for Shopify development.

Community
Advanced