Skip to content

ludodelot/svg-master

v0.1.0

Agent-native visual engineering with executable recipes and QA.

GitHub

SVG Master

An agent-native visual engineering plugin with executable recipes and a local render, export, and audit CLI. It covers SVG, motion, data visualization, diagrams, maps, generative graphics, 3D, and scrollytelling through one visual contract.

Start

Requires Node.js 20 or newer.

npm install
npx playwright install chromium
npm run build
npm run dev

Open the local URL shown by Vite and choose a recipe. In another terminal:

npm run cli -- doctor
npm run cli -- render --fixture svg-motion --out artifacts/svg-motion
npm run cli -- audit --fixture svg-motion --out artifacts/svg-motion
npm run cli -- export --fixture svg-motion --format svg --out artifacts/svg-motion.svg
npm run cli -- benchmark --out artifacts/benchmark.json

For an existing page, write a contract using schemas/visual-contract.schema.json with a selector for its visual root. Then run:

npm run cli -- audit --url http://127.0.0.1:5173/ --contract path/to/visual-contract.json --out artifacts/my-visual
npm run cli -- export --url http://127.0.0.1:5173/ --contract path/to/visual-contract.json --format png --out artifacts/my-visual.png

tests/external-contract.json is a working example. External pages can be rendered, audited, and exported as SVG/PNG/PDF when their contract permits. HTML packaging needs source code and is currently available only for bundled recipes. The generic external-page audit does not infer whether a particular interaction or reduced-motion behavior is correct; review those states manually. PDF export preserves essential visual content, but is not promised to remain editable.

The root plugin.json follows portable Agent Plugins packaging. .codex-plugin/plugin.json is a Codex compatibility manifest. Skills are in skills/; use svg-master as the router or invoke a specialist directly. The CLI and recipes also work without an agent.

The repo includes a Codex marketplace at .agents/plugins/marketplace.json. Install from GitHub with codex plugin marketplace add ludodelot/svg_master and codex plugin add svg-master@svg-master-repo. For local development, use codex plugin marketplace add . instead. Claude Code can load the same skills with claude --plugin-dir .. These host loading steps are separate from installing the CLI dependencies.

Read the research report, the research process, and the quality protocol. Release 0.1.0 covers each domain with a representative recipe; it is not an exhaustive visual runtime.

Development

npm test
npm run typecheck
npm run validate:skills
npm run format:check

Generated artifacts belong in artifacts/ and are ignored by Git. Third-party code and documentation remain in their source projects; see the source register.

package.json temporarily overrides transitive KaTeX and esbuild to patched releases. Recheck these overrides when Mermaid, Vite or tsup updates; the current install reports zero npm audit advisories and the diagram smoke test passes.