Can I vibe code LayoutHub?

Build an open-source visual Shopify page section generator and manager using Next.js, Tailwind CSS, and the Puck visual editor framework (@measuredco/puck).

1. DATA MODEL & SCHEMA:
- Create a layout model storing 'page_id', 'title', 'handle', 'status' (draft/published), and 'content' (JSON schema representing stacked layout components).
- Define component schemas for standard e-commerce blocks: Hero Banner, Product Grid, Testimonial Slider, Feature Highlights, and FAQ Accordion.
- Each component schema must expose editable properties (e.g., heading text, background color, image URL, CTA link, flex direction).

2. CORE FUNCTIONALITY:
- Integrate Puck visual editor to allow users to drag, drop, reorder, and edit component blocks in a live preview frame.
- Implement a 'Export to Liquid' engine: parse the visual canvas JSON data and generate standard, valid Shopify Liquid files (.liquid) with matching {% schema %} definitions.
- Connect to Shopify Admin GraphQL API using an App Access Token to push generated Liquid sections directly into the active theme's /sections directory via the Asset API.
- Provide a preview modal displaying responsive viewports (desktop, tablet, mobile).

3. FAILURE MODES & EDGE CASES:
- Asset API Failures: Handle rate limits (429 HTTP response) by implementing exponential backoff when pushing theme assets.
- CSS Scoping: Prefix all generated block CSS classes with unique section instance IDs to prevent global theme style leakage.
- Invalid Schema Errors: Validate generated {% schema %} JSON structure before uploading to prevent theme compilation failures.

4. OUT OF SCOPE:
- Do not build third-party analytics integrations, A/B testing engines, or checkout modification tools.

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