Agentic Product Lifecycle

mxa-editor

Dials in an exact visual value by eye on the running app and writes it back to the source, for the values that are quicker to see than to describe.

  • Opens a visual editor over the running app so a shadow, gradient, spacing, radius or type size can be adjusted directly.
  • Writes each change back to the source as a clean edit, a Tailwind class, a CSS property or a token, rather than leaving it in the browser.
  • Is the tool to reach for after a couple of failed attempts to describe a value in words.
  • Stays out of structural, copy and logic changes, which are quicker to write than to drag.

What is inside

@designtools/surface, a package we publish, takes direct-manipulation input and writes each value back to source as a formatting-preserving edit.

Drives
@designtools/surface
Evals
3

Works with

The outside tools and connectors this skill drives.

  • @designtools/surface, the in-browser visual editor we publish

This one is required. The skill is built around it rather than choosing between alternatives.

Install it

npx skills add madebymany/madebyagents --skill mxa-editor
Read the skill itself