[Epic] Complete Shopify-Style Theme Editor: Final Tasks, MCP, Skills, Sub-Agents & Next.js 16 + Shadcn Parity

[rezwana-karim]

Objective

Conduct a full implementation completion for the StormCom Shopify-style Theme Editor in the stormcomui repo, achieving parity with Shopify's Horizon 3.3.0 UI/UX using Next.js 16 and Shadcn UI. All work MUST leverage MCP tools, agent skills, and other provided automation/prompting features as required by the repo standards (see AGENT.md). This issue subsumes all open enhancement requests and mandates usage of the latest best practices as documented in Next.js and Shadcn official MCP documentation.

---

📋 Task Overview

🟥 P0 – Critical (Ship-blocking)

1. Split-pane Layout & Live Preview

   • Implement component-based split-pane (left: section list, right: live preview)
   • Use react-resizable-panels or grid.
   • Integrate <StorefrontPreview config={config} viewport={viewport} /> as React Server Component.

2. Section List Sidebar with DnD

   • Move from tabbed to drag-and-drop list with @dnd-kit/sortable.
   • Section ordering, grouping (Header, Template, Footer). Persist order server-side via Prisma.

3. Autosave & Revision Model

   • Debounced, atomic draft saving for editor state (Zustand store → persisted model)
   • Add server actions for save/publish. Store full draft/version objects (resolve gap from audit).

4. Unified Toolbar with Save/Undo/Redo/Viewports

   • Implement with Shadcn components + Lucide icons
   • Keyboard shortcuts: Ctrl+Z/Y/S
   • Status badges for unsaved, saving, saved

5. Configuration Schema Upgrades

   • Color scheme system (colorSchemes[], preset swatches, alpha, hex validation)
   • Section enable/disable, hide/show (eye icon)
   • Section duplication
   • Section addition/removal (command dialog, confirmation)

---

🟧 P1 – User Workflows & UX Polish

6. Viewport Switching

   • Device toggles: Desktop/Tablet/Mobile (toolbar)
   • Responsive preview container

7. Inspector Mode

   • Click-to-edit elements in preview
   • Visual indication of selected section; drill-down settings in right panel

8. Enhanced Theme & Typography Systems

   • Theme color and font presets (per Shopify patterns)
   • Expanded typography options (headings, sizes)

9. Extensible Section/Template Registry

   • Central config for registering, organizing, filtering available sections

10. Accessibility & ARIA Review

    • Ensure full ARIA/semantic labeling, WCAG adherence
    • Add skip links and keyboard navigation

---

🟨 P2 – Enhancements & Market Features

11. Theme Marketplace Parity

    • Add support for multiple templates/themes, import/export, version badging

12. AI-powered Features (Phase 4, post-MVP)

    • Copilot-style prompt input for color palette and hero text generation
    • Plan for future AI section and theme generation

13. App Embed System

    • Scaffold extension/plugin panel (for long-term app embed roadmap)

14. Custom CSS Editor

    • Add Monaco/CodeMirror in advanced settings modal (for store overrides)

---

🏗️ Architecture & Skills

• Strictly adhere to Next.js 16 and Shadcn UI best practices from current MCP doc fetch (see AGENT.md: always query mcp tools before schema/component refactors)
• Compose with agent skills, MCP prompts and supported sub-agents for composable automation where possible
• Update/extend /src/components/dashboard/storefront/editor/*, /src/app/dashboard/stores/[storeId]/appearance/appearance-editor.tsx, store types, and server actions per above.

🧪 Testing & Verification

• Implement full Playwright test skeletons for:
  • DnD, section add/remove, live preview, autosave, undo/redo
  • Visual regression (compare with /docs/shopify-theme-editor-ui-ux/*.png)
• Write unit tests (zod schemas, config merging) and integration tests covering editor state flow

📚 References

• Internal Docs: /docs/shopify-theme-editor-ui-ux/*, /docs/APPEARANCE_EDITOR_ANALYSIS.md, /docs/PLAN_SHOPIFY_THEME_EDITOR_UPGRADE.md, /docs/THEME-EDITOR-IMPLEMENTATION-PLAN.md, /Storefront implementation review.md
• Code: /src/components/dashboard/storefront/editor, /src/lib/storefront/types.ts, /src/app/api/stores/[id]/storefront/route.ts
• Always use MCP best practice fetch for Next.js 16/shadcn patterns

---

Note: Results may be subject to content preview limits; always audit further as new docs/images become available see source folder.

/cc @CodeStorm-Hub contributors. — This issue is intended as the execution epic. Open granular sub-issues for each major implementation item. Utilize sub-agents and all automation supports.