Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From moldui
Launches visual editor overlay on running web app dev servers. Drag/resize elements, edit text/styles in browser; changes sync to source code via Claude with Tailwind/CSS support.
npx claudepluginhub manavarya09/moldui --plugin molduiHow this skill is triggered — by the user, by Claude, or both
Slash command
/moldui:canvasThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Launch a visual editing overlay on any running dev server. The user can drag elements, resize them, edit text inline, and adjust styles — all changes are synced back to source code.
Applies pending moldui visual edits (styles, text, reorder, swap, clone) to source code, targeting Tailwind classes, JSX, HTML in Next.js/Vite/Vue projects. Invoke via /moldui-sync after browser changes.
Generates frontend code (HTML, React, Flutter) from screenshots, mockups, text descriptions, HTML files, or URLs via GLM vision API. Supports CREATE, REVIEW, FIX modes for generation, visual review, and fixes.
Maps rendered DOM elements to source code locations and captures runtime context (props, state, DOM). Use for exploring components, implementing UI annotations, or getting live snapshots.
Share bugs, ideas, or general feedback.
Launch a visual editing overlay on any running dev server. The user can drag elements, resize them, edit text inline, and adjust styles — all changes are synced back to source code.
/canvas # Auto-detect dev server
/canvas 3000 # Specify port
/canvas stop # Stop the editor
The WebSocket sends change descriptors. Build a sync prompt and execute the edits:
p-6 → p-8)node ${CLAUDE_PLUGIN_ROOT}/bin/moldui.js [port]
The editor proxy starts and auto-opens the browser. Changes arrive as structured JSON via WebSocket.