Can I vibe code EComposer?

Build a lightweight Shopify page section generator web application using Next.js 14, React, and Tailwind CSS.

1. SYSTEM ARCHITECTURE & DATA MODEL:
- Implement a JSON page structure containing an array of 'sections'. Each section has: id, type ('hero', 'product_grid', 'text_banner', 'cta'), settings (colors, padding, content strings), and children blocks.
- Define a Shopify Liquid AST converter that outputs standard Liquid files with valid {% schema %} definitions for Shopify theme customizer integration.

2. EDITOR & CANVAS UI:
- Integrate Puck Editor or GrapesJS on the frontend for drag-and-drop block positioning.
- Include viewport toggle controls (Desktop: 1440px, Tablet: 768px, Mobile: 375px).
- Render a live preview pane reflecting real-time visual property edits (typography, padding, flex alignments, background colors).

3. SHOPIFY LIQUID GENERATOR ENGINE:
- Build a compiler that converts the visual layout JSON into clean, unminified Liquid code.
- Ensure native Shopify form components (e.g., {% form 'product', product %}) and dynamic Liquid variables (e.g., product.title, item.featured_image) render correctly without external JS runtime dependencies.
- Scope all generated CSS classes using unique section IDs to avoid colliding with main theme styles.

4. FAILURE HANDLING & CONSTRAINTS:
- Sanitize output strings to prevent script injection in user-editable text fields.
- Provide code linting to ensure generated Liquid schemas pass Shopify App Store / Theme verification specs.

5. OUT OF SCOPE:
- Direct auto-publishing via Shopify REST API (user manually copies generated Liquid code into theme editor).
- User authentication or multi-tenant database persistence.

$ each button prefixes agent-specific run instructions · build your own product, never copy proprietary code, trademarks or designs