Materials Workbench

Materials editor workbench — React UI and Express server to render JSON schemas to images and generate schemas with AI (declare-render + materials-agents).

Security Scan

The skill appears to implement a local React + Express workbench that uses your OPENAI_API_KEY for AI-assisted schema generation; its requirements and instructions are broadly consistent with that purpose, but pay attention to privacy (image uploads) and the fact that dependencies will be installed from npm when you run it.

Purpose & Capability

Name/description (React UI + Express server to render JSON schemas and use AI) aligns with the code and declared requirements: node binary and OPENAI_API_KEY. The included client and server code implements the described functionality; required binaries and primaryEnv are appropriate.

Instruction Scope

Runtime instructions are to run pnpm install and pnpm run dev. The README and client code explicitly send images as base64 to the server and (optionally) upload them to a third-party service (PICUI) when PICUI_TOKEN is set — this causes user-provided images/materials to leave the local machine. SKILL.md documents the need to set OPENAI_API_KEY and mentions optional OPENAI_BASE_URL/PICUI_TOKEN; the instructions do not request unrelated files or system secrets.

Install Mechanism

There is no automated install spec in the registry; the SKILL.md expects you to run pnpm install/pnpm run dev which will fetch packages from npm and start the dev server. This is a normal developer workflow but means third-party packages will be installed on your machine at runtime (standard npm supply-chain risk).

Credentials

The declared required env is only OPENAI_API_KEY (primaryEnv) which is appropriate for AI features. The README and code reference optional env vars (OPENAI_BASE_URL, OPENAI_MODEL, PICUI_TOKEN). Note: OPENAI_BASE_URL lets the server point to a custom endpoint — if you set this to a non-official endpoint you will be sending your OPENAI_API_KEY and prompts to that service. PICUI_TOKEN (if provided) lets the server upload images to picui.cn; both are reasonable for the skill but represent privacy/credential exposure choices the user must make.

Persistence & Privilege

The skill does not request always:true and is user-invocable. It does not appear to modify other skills or system-wide agent settings. Running the workbench will start a local server and client only.

Assessment

This skill is coherent with its stated purpose, but before running it: 1) Be aware you must provide an OPENAI_API_KEY — the server will use that key to call OpenAI-compatible endpoints. If you set OPENAI_BASE_URL to a custom provider, your key and chat content will be sent to that provider. 2) If you enable PICUI_TOKEN (optional) the app will upload any images you attach to picui.cn; attached images are sent as base64 to the local server and may be forwarded to that third party. 3) Running pnpm install will pull dependencies from npm — treat this as running any open-source project (inspect code, run in an isolated environment if you have concerns). If you want higher assurance, review the server files (server/src/*.ts) for any unexpected network endpoints or logging of user data, and test locally without supplying PICUI_TOKEN or a custom OPENAI_BASE_URL to limit external exposure.

Use this skill when the user wants to run the materials editor workbench: a local web app with a React client and Express server that renders JSON schemas to images (declare-render) and can generate or edit schemas using AI (materials-agents).

What it is

• Client — React + Vite app for editing and previewing render schemas.
• Server — Express API that renders schemas to PNG/JPG and uses materials-agents (OpenAI) for schema generation or refinement.

When to use

• User wants to "run the workbench", "start the materials editor", or "open the schema editor UI".
• User needs a local dev environment for rendering schemas and AI-assisted schema creation.

Run

From the workbench root:

pnpm install
pnpm run install:all   # install root, server, and client deps
pnpm run dev           # start server + client (concurrently)

• Client usually: http://localhost:5173
• Server usually: http://localhost:3000 (or port in server config)

Set OPENAI_API_KEY for AI/generate features.

Project layout

• client/ — React frontend (Vite).
• server/ — Express backend (declare-render, materials-agents, canvas).

Schema format

Same as materials-cli: declare-render format with id, width, height, layers (text, image, container, shape, etc.).