dvcrn Materials Workbench
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.).