What problem does it solve? Building or modifying Shopify themes without understanding the existing codebase leads to duplicated components, conflicting CSS, and broken Theme Editor behavior. This Skill enforces a mandatory analysis-first workflow that maps existing design tokens, blocks, snippets, and sections before writing any code, and converts design screenshots into pixel-level specifications. ## Core Features & Use Cases - Theme Analysis Before Changes: Reads base CSS, layout/theme.liquid, settings_schema.json, blocks, snippets, and sections to build a reuse inventory of existing classes, variables, and components. - Screenshot-to-Spec Conversion: Breaks down mockups and PNGs into detailed design specifications with estimated px spacing, hex colors, typography, and responsive behavior. - Online Store 2.0 Architecture Guidance: Provides patterns for JSON templates, sections with app block support, theme blocks with nesting, schema settings, and presets. - Use Case: A merchant shares a homepage mockup and asks for a new featured-collection section. The Skill first inventories the theme's existing product-card snippet, grid classes, and schema conventions, then builds a section that reuses them exactly. ## Quick Start Analyze my current Shopify theme and build a featured collection section that matches this screenshot using the existing theme patterns.
