code-to-visual-interpreter

v0.1.0

Translate between generative code and the geometry it produces, keeping output assets lean instead of bloated.

Claude Code1 Skill1 MCP serverstdio

By Fars SaadeldinLicense: UNLICENSED0 GitHub starsUpdated 5 days ago

Directory evidence

Runtimes: Claude Code
Parsed components: 2 skill or MCP entries
Source updated: Sep 18, 2026
Manifest status: Canonical path parsed

The directory validates manifest shape and source location. It does not execute the plugin or provide a security endorsement. Review the indexing methodology →

Install code-to-visual-interpreter for Claude Code

Installs for the current user

claude plugin marketplace add IchenDEV/agent-plugin-mkt
claude plugin marketplace update agent-plugin-marketplace
claude plugin install code-to-visual-interpreter@agent-plugin-marketplace

Paste and run these commands in a terminal with Claude Code. They add and refresh the PluginsMP catalog, then install this plugin.

The installer fetches third-party code from the source repository shown on this page. This directory validates manifest structure and source location, but does not perform a security audit; review the manifest, components, and source before installing.

Get the source manually

$ git clone https://github.com/farssaadeldin7-ux/claude-plugin-suite

Clone the source repository, then follow its setup instructions to add the plugin to a compatible client. The plugin root is plugins/code-to-visual-interpreter/.

Plugin files

plugins/code-to-visual-interpreter/

├── .claude-plugin/plugin.json
├── skills/code-to-visual-interpreter/SKILL.md
└── .mcp.json

Included Skills1

code-to-visual-interpreterskills/code-to-visual-interpreter/SKILL.md

This skill should be used when someone needs to translate between generative code and the image it produces, in either direction — "what does this shader actually draw", "explain this p5 sketch", "how would I code this pattern", "recreate this generative image", "turn this flow field into code", "what happens if I set the noise scale to zero", "why does my canvas animation drop frames", "this generated SVG is 4 MB", "reduce the file size of this export", "should this be SVG or canvas", "convert these particles to instanced geometry". Also use it for reviewing generative code before it ships, for choosing between p5.js, three.js, GLSL, SVG, Canvas 2D, WebGL and D3 for a described visual, and for deciding which parameters to expose to a designer.

MCP servers1

code-to-visual-interpreterstdio

command: node
args: ${CLAUDE_PLUGIN_ROOT}/mcp/server.js
env.PLUGIN_SUITE_BILLING_URL: ${PLUGIN_SUITE_BILLING_URL}
env.CODE_TO_VISUAL_INTERPRETER_LICENSE_KEY: ${CODE_TO_VISUAL_INTERPRETER_LICENSE_KEY}

MCP configuration uses runtime-provided plugin path placeholders such as ${PLUGIN_ROOT} or ${CLAUDE_PLUGIN_ROOT}. Review the manifest for the runtime-specific expansion rules.

Plugin manifests1

plugins/code-to-visual-interpreter/.claude-plugin/plugin.json

{
  "name": "code-to-visual-interpreter",
  "version": "0.1.0",
  "description": "Translate between generative code and the geometry it produces, keeping output assets lean instead of bloated.",
  "author": {
    "name": "Fars Saadeldin"
  },
  "license": "UNLICENSED",
  "keywords": [
    "creative-coding",
    "generative-art",
    "webgl",
    "svg",
    "performance"
  ]
}