Vuemorphic — Development skill for Claude Code

vuemorphic

An agentic harness for automated React→Vue 3 SFC translation, powered by [LangGraph](https://github.com/langchain-ai/langgraph) and Claude Code.

What It Does

Vuemorphic drives a two-phase pipeline that reads a React JSX codebase, analyzes its structure, and produces idiomatic Vue 3 Single File Components — one component at a time, in dependency order, verified at every step.

Built to port [Flora CAD](https://github.com/ByteBard97/flora) — a native-plants landscape design tool — from a React prototype to a Vue 3 production app.

Pipeline

Phase	What it does
A — Analysis	JSX AST extraction, idiom detection, Vue skeleton generation, SQLite import, topological sort
B — Translation	LangGraph loop: pick → prompt → claude --print → verify → commit or queue for review

flowchart LR

    subgraph phaseA ["Phase A — Analysis"]
        direction TB
        jsxFiles[".jsx source files"]
        astExtract["ts-morph AST
extraction"]
        idiomDetect["idiom detection"]
        skeleton["Vue SFC skeleton
generation"]
        dbImport["JSON → SQLite
manifest import"]
        topoSort["topological sort
by dependency"]
        jsxFiles --> astExtract --> idiomDetect --> skeleton --> dbImport --> topoSort
    end

    manifest[("vuemorphic.db
+ Vue skeletons")]

    subgraph phaseB ["Phase B — Translation"]
        direction TB
        pickNode["pick next node
(haiku, topo order)"]
        buildCtx["build context
React src + Vue deps + idioms"]
        claudeCall["claude --print --no-tools
(haiku by default)"]
        verifySnip["verify
remnant · postfilter · compile · vue-tsc"]
        gitCommit["git commit
feat(convert): NodeId"]
        pickNode --> buildCtx --> claudeCall --> verifySnip
        verifySnip -->|PASS| gitCommit
        verifySnip -->|FAIL| review["queue fo