moldui-sync

# moldui-sync — Apply Visual Edits to Source Code This skill reads pending visual edit batches from `.moldui/` in the current project and translates them into source code edits. ## When to Invoke - User runs `/moldui-sync` - User says "apply my moldui changes" / "sync my visual edits" / "apply canvas edits" - User has made visual edits in their browser via `moldui` and clicked Save ## Steps 1. **Check for pending batches** ``` ls -1 .moldui/batch-*.json 2>/dev/null ``` If no batches found, tell the user: "No pending moldui edits found. Run `npx moldui` and make some visual changes first." 2. **Read all pending batches** in chronological order (sorted by timestamp in filename). Each batch is JSON with: - `timestamp`: when the batch was created - `framework`: detected framework (e.g. nextjs, vite, vue, static) - `sourceHints`: array of `{ file, confidence, reason }` — likely source files - `changes`: array of change descriptors - `prompt`: pre-built prompt describing changes 3. **For each batch, apply changes intelligently:** For **style changes** (type: `style`): - Look at `element.classes` to find the element in source - If framework is Tailwind, update class names (e.g. `p-6` → `p-8` when padding changes from 24px to 32px) - If using CSS modules or scoped CSS, edit the stylesheet - If inline styles, update them - Use the `changes` object: `{ padding: { from: "24px", to: "32px" } }` For **text changes** (type: `text`): - Search for `oldText` in source files (prefer files from `sourceHints`) - Replace with `newText` - Preserve surrounding whitespace and quotes For **reorder changes** (type: `reorder`): - Find the parent container by `fromParent` selector or class names - Move the child element from `fromIndex` to `toIndex` - If `fromParent !== toParent`, move the element to a different container For **swap changes** (type: `swap`): - The user held Alt while dragging to exchange two elements' positions - Swap the source positions of `selector` and `swapSelector` - If in JSX: swap the two JSX elements in their source tree - If in HTML: swap the two HTML elements For **clone changes** (type: `clone`): - Duplicate the element in source code at the specified position 4. **Use `sourceHints` first** — these are the most likely source files. Read them first, then grep if needed. 5. **Edit files minimally** — preserve existing code style, formatting, indentation. 6. **After applying each batch, delete it:** ``` rm .moldui/batch-{timestamp}.json ``` 7. **Report to the user:** - List files modified - Summary of changes applied - Any changes that couldn't be applied (and why) ## Tailwind Class Mapping When the framework uses Tailwind CSS, translate CSS values to Tailwind classes: | CSS | Tailwind | |------------------------|-----------------------| | `padding: 24px` | `p-6` | | `padding: 32px` | `p-8` | | `margin: 16px` | `m-4` | | `gap: 16px` | `gap-4` | | `border-radius: 8px` | `rounded-lg` | | `border-radius: 12px` | `rounded-xl` | | `border-radius: 16px` | `rounded-2xl` | | `font-size: 16px` | `text-base` | | `font-size: 18px` | `text-lg` | | `font-size: 24px` | `text-2xl` | | `width: 100%` | `w-full` | Base unit = 4px. So `{N}px` → `{N/4}` (e.g., `12px` → `3`). ## Framework-Specific Tips **Next.js / React:** - JSX files at `app/*/page.tsx`, `pages/*/index.tsx`, `components/*.tsx` - Look for matching class strings or text content **Vue:** - SFC files: `<template>`, `<script>`, `<style>` - Edit classes in the template **Svelte:** - `.svelte` files with `<script>`, HTML, and `<style>` **Django/Rails/Laravel:** - Template files with class="..." attributes - For styles, find the corresponding CSS file **Static HTML:** - Edit the HTML directly - For styles, edit the `<style>` block or linked CSS ## Example Interaction ``` User: /moldui-sync Claude: Found 1 pending batch with 3 changes. Reading batch-1713300000000.json... Framework: nextjs + tailwind Source hints: src/app/page.tsx (route match) Applied changes: ✓ src/app/page.tsx — padding p-6 → p-8 on .card (3 instances) ✓ src/app/page.tsx — text "Welcome to My App" → "Ship Faster with AI" (h1) ✓ src/app/page.tsx — reordered grid children [0,1,2] → [2,0,1] Deleted batch file. ``` ## Edge Cases - **Multiple matches for a class**: Apply to all matches. If the change should be scoped, Claude should note this and ask. - **Source file not obvious**: Grep across the project for the class/text. If still unclear, show the user the change and ask which file to edit. - **Text contains special regex chars**: Escape them before searching. - **Reorder across different files**: If an element is moved to a different parent and that parent lives in a different file, handle the cross-file case by editing both. - **Unknown framework**: Fall back to grep-based file matching and editing raw HTML/CSS.