MASTER-UI-ENGINE

Documentation · CLI

Install a designed component without leaving the terminal.

mue is a plain Node script that reads the library already on your disk. It searches the 54 previews, prints the markup with the tokens it depends on, copies a component into your project with every layer it needs, and then checks what you pasted. Every block of output on this page is what the command printed when it was run — not a sketch of it.

16commands
54previews indexed
0npm installs
0API keys
Web Components usage Read the CLI source

No registry, because nothing is hosted

Most component CLIs resolve a remote registry: the tool calls a service, the service returns source, and a private registry wants a token first. This one has no server to reach, so there is nothing to authenticate to and nothing that can be renamed or taken down.

What you do not need

  • An account, a login or an API token — the repository is public and MIT.
  • npm install of the library. mue-react, mue-vue and mue-web-components are not published; the CLI copies their files.
  • A build step. tools/mue.js imports only fs, path and url.
  • A components.json or registry entry to keep pointed at the right place.

What you do need

  • Node on your PATH. Run and verified on v24.11.1 on Windows; it is CommonJS with built-in modules only.
  • A checkout of the repository — one git clone, or the ZIP from GitHub.
  • The path to tools/mue.js. The library root is derived from the script’s own location, so it works from any directory.

The trade is real: with no registry there is no add @your-registry/item one-liner. You get the source instead, which an agent can read, diff and copy — the thing a hosted registry makes harder, not easier.

Setup · six steps

From clone to installed component

  1. 01 — 02

    Get it, confirm it

    Clone or download, then mue help. If help prints, the CLI is wired.

  2. 03 — 04

    Find it, install it

    search for what the screen looks like, add to copy it into your project with its layers.

  3. 05 — 06

    Swap the stack, gate it

    --framework for React, Vue or Web Components source; check for classes you invented.

Step 01 — get the library

Any of the three gives you the same tree. The clone is what you want if you plan to run mue serve or keep up with changes; the ZIP is fine for a one-off copy, and --depth 1 is the shortcut when you only want the current files and not the history.

After unzipping, the folder is master-ui-engine-main. The rest of this page assumes your terminal is inside the repository root.

your shell
$ git clone https://github.com/STEVOHCODER/master-ui-engine.git
$ cd master-ui-engine

Step 02 — confirm it answers

This is the whole install check. If it prints, every other command works; if it does not, the problem is the path to tools/mue.js, not a missing dependency, because there is no dependency to miss.

Printed below is the complete help output, including the two commands that appear as usage variants (show --framework, add --framework).

mue help
$ node tools/mue.js help
MUE — reuse what is already designed.

  search "<words>"        find a preview by what it looks like
  list [--group Components] every id, category and path in the library
  show <id|path>          header, what to link, and the copy-ready markup
  show <id> --framework x that binding's source instead (react, vue, web-components…)
  regions                 the 31 CSS copy units in styles/components.css
  region <name>...        the exact CSS of a copy unit
  usage .class            which region defines it, which previews use it
  tokens [--filter x]     every custom property with its value and file
  head <file|id>          structured MUE:META for one preview
  scaffold <out> --use a,b  a page wired to the shared sheet with that markup
  add <id>... --into <dir>  install the component + the layers it needs into your project
  add <id> --framework react --into <dir>  install that stack's own source instead
  stack [react]           which frameworks exist here for real, and their source files
  registry               the whole library as one JSON document (machine endpoint)
  check <file|all>        unresolved classes, broken headers, missing metadata
  doctor                  catalog/header/sheet consistency + conversion backlog
  serve                   the visual lab at http://127.0.0.1:8791

  --json on any command. Read AGENTS.md before building: the rule is
  reuse a preview, never invent generic UI.

Step 03 — find what already exists

search matches against names, categories, variants and the classes a preview actually uses, so you can ask in the vocabulary of the screen rather than the vocabulary of an API. list is the inventory, regions is the map of the stylesheet, and tokens is the value list.

Every command accepts --json. The frameworks array in a search result is the honest answer to “does this exist in React?” — it lists only stacks with real source for that id.

discovery
# what does a pricing table look like here?
node tools/mue.js search "pricing table"
ui-tables              Tables                 components/tables/tables.html
  regions: tables
  stacks: vanilla, react, vue, web-components
  matched: name
ui-datatable           Data Table             components/tables/data-table.html
  regions: datatable
  stacks: vanilla, vue, web-components, react
  matched: name

# the same answer as data, for an agent to read
node tools/mue.js search "pricing table" --json
[
  {
    "id": "ui-tables",
    "name": "Tables",
    "group": "Components",
    "path": "components/tables/tables.html",
    "score": 6,

# which slice of the sheet defines .card?
node tools/mue.js usage .card
.card                defined in: cards, tables
  used by 48 preview(s): btn-buttons, frm-input-fields, frm-select-menus, frm-checkboxes, frm-switches, frm-radio-buttons, frm-date-picker, frm-dropzone, ui-cards, ui-sections, ui-tables, ui-charts …

# the inventory, grouped
node tools/mue.js list --group Templates
tpl-saas               Templates   saas             templates/saas/saas-starter.html
tpl-admin              Templates   dashboards       templates/dashboards/admin-starter.html

Verbatim, with long results cut at a line boundary and marked …: search returns nine hits for that query, the --json form keeps going with matchedOn, regions, frameworks and theme for each, and list prints six template rows.

Step 04 — install a component into your project

add is the reason this is a CLI and not a folder of files to browse. It writes the snippet, then writes the layers that snippet needs: the token files and the two shared sheets, resolved from the component’s own region list. A pasted component without its tokens is a colour-less box, and that is the failure this prevents.

Files it will not overwrite are reported as identical and skipped; --force rewrites them. --minimal swaps the full stylesheet for the trimmed one. Multiple ids in one call share the layers instead of duplicating them.

what landsmue/ui-cards.html plus 15 shared files — 13 under design-tokens/, then styles/components.css and styles/mue.js
regions resolvedtokens, buttons, cards, badges, feedback, utilities, datatable — the closure this component needs, read from its own header
next linethe CLI prints the check command for the file it just wrote, so the gate is the next keystroke rather than a remembered step
mue add
$ node tools/mue.js add ui-cards --into ../demo-app --create
added 1 component(s) into ../demo-app
mue/ui-cards.html  [written]  snippet
  regions: tokens, buttons, cards, badges, feedback, utilities, datatable
  <link rel="stylesheet" href="../design-tokens/engine.css">
  <link rel="stylesheet" href="../styles/components.css">
  <script src="../styles/mue.js" defer></script>
  next: open …/demo-app/mue/ui-cards.html in a browser, then gate edits:
        node tools/mue.js check "…/demo-app/mue/ui-cards.html"

shared layers: 15 file(s) — 15 written

Verbatim, with two changes a reader should know about: the tool prints the target as a resolved absolute path, shown here as ../demo-app and …, and the next: line is wrapped to fit. Run it yourself and the rest of the text is identical.

Step 05 — ask for that stack’s own source

The same command, with --framework, installs the React, Vue or Web Components file instead of the HTML snippet. It never falls back: if a stack has no source for that id, nothing is written and the message says so, because silently handing an agent HTML while calling it React is how a project ends up with a component that does not exist.

no --framework
$ node tools/mue.js add btn-buttons --into ../demo-app --create
added 1 component(s) into ../demo-app
mue/btn-buttons.html  [written]  snippet
  regions: tokens, buttons
  <link rel="stylesheet" href="../design-tokens/engine.css">
  <link rel="stylesheet" href="../styles/components.css">
  <script src="../styles/mue.js" defer></script>

shared layers: 15 file(s) — 15 written

All four blocks were run against the repository at this commit, and the Web Components port needs no bundler and no framework runtime — that is what the Web Components page covers. The verified: line is long: it names the build command, the browsers, the widths, the themes, the probe counts and what was never run — so it is elided here and printed in full by the command itself, quoted on the agent guide and stored in frameworks/registry.json.

Step 06 — gate the edit

The failure this exists to catch is the invented class: an agent writes class=“card card-fancy”, nothing breaks loudly, and the page ships with an unstyled element. check reads the markup against the sheet and reports what it cannot resolve; doctor reads the library itself, so a catalog entry that points at a moved file surfaces before it misleads the next agent.

Scaffold instead of pasting

scaffold writes a whole page wired to the shared sheets, with the markup of the ids you name lifted from their own previews — the fastest way to start a screen without starting from a blank file.

check · doctor · scaffold
# is every class in the copied file real?
node tools/mue.js check ../demo-app/mue/ui-cards.html
1 files checked · 0 with issues

# is the library itself consistent?
node tools/mue.js doctor
54 previews · 41 use the shared sheet · 13 still self-contained
31 regions in styles/components.css
no structural problems found

# start a page from two existing previews
node tools/mue.js scaffold pricing.html --use btn-buttons ui-cards
wrote pricing.html
  links engine.css + components.css + mue.js relative to the output
  · ui-cards: markup lifted from components/cards/cards.html
  · btn-buttons: markup lifted from components/buttons/buttons.html

doctor also prints a conversion backlog: the 13 example pages that still carry their own <style> block instead of using the shared sheet. They render correctly — the list is a record of what has not been migrated, not a defect report. In the scaffold block the written path is shown as typed; the tool prints it resolved against your working directory.

Every command

The wording is the CLI’s own, taken from mue help. Each one accepts --json except help and serve.

search <words>find a preview by what it looks like. --framework restricts it to stacks that really have source.
list [--group x]every id, category and path in the library — 54 rows.
show <id|path>header, what to link, and the copy-ready markup. --framework react|vue|web-components prints that binding’s source, package note, install line, verification note and the contract harvested from its own MUE:META.
regionsthe 31 CSS copy units in styles/components.css, each with its line range and classes.
region <name>…the exact CSS of one or more copy units, with a /* ==== region x ==== */ header.
usage .classwhich region defines it and which previews use it.
tokens [--filter x]every custom property with its value and the file that declares it.
head <file|id>the structured MUE:META block of one preview, parsed into fields.
scaffold <out> --use a,ba page wired to the shared sheets with that markup in it.
add <id>… --into <dir>install the component plus the layers it needs. --framework installs that stack’s source instead; --minimal, --force, --create and --all-components / --all-<group> control what is written where.
stack [react]which frameworks exist here for real, with their source files — and which ids are documented but not built.
registrythe whole library as one JSON document: ids, paths, categories, variants, token files, breakpoints and the audit note for each.
check <file|all>unresolved classes, broken headers, missing metadata.
doctorcatalog, header and stylesheet consistency, plus the conversion backlog.
servethe visual lab at http://127.0.0.1:8791 — every preview, the token studio and the command palette, served from the files on disk.
helpthe list above, in the CLI’s own words.

Give the CLI to your agent

Two files carry the same knowledge the CLI has, in the form agents read: AGENTS.md is the rule set for anything working inside this repository, SKILL.md is the portable pack for an agent working somewhere else. Copy the real bytes — these buttons fetch the deployed file, not a transcription of it.

Put them wherever your agent already looks: a skills directory, a rules file, or a line in your project’s AGENTS.md pointing at the checkout. What matters is that the agent reads the reuse rule and the command surface before it writes markup, not which folder the file sits in.

SKILL.md · portable pack
The complete file, copied from /engine/SKILL.md — the same bytes that ship in the
repository. Read it first at:
https://github.com/STEVOHCODER/master-ui-engine/blob/main/SKILL.md

Both files are versioned with the code they describe. A documentation page can go stale a week after a command changes; these two change in the same commit.

Troubleshooting

Word for word, because the text is the useful part — each one already names the fix.

1

Target folder is missing

mue: C:\path\to\app does not exist — re-run with --create, or point --into an existing project
--create makes the directory. It refuses without the flag so a typo in --into cannot write a project somewhere you did not mean.

2

A mistyped id

added 0 component(s) into … then NOTES · ui-card: not in the catalog — see "mue search ui-card"
This one is quiet on purpose: a partial install still installs what it recognised, and the note names what it did not. Re-run with the id from mue list.

3

A stack with no source

mue: no svelte binding is implemented for ui-cards (planned, plan: frameworks/svelte/ARCHITECTURE.md) — "mue stack svelte" lists what is real, and nothing was written.
Svelte and Angular are documented and unimplemented. Nothing falls back to HTML and gets labelled as a framework.

4

An id that does not resolve

mue: no preview named "nonsense". Run: mue list — and with several close matches it answers Did you mean: ui-cards, ui-tables…? instead.

5

A search that finds nothing

mue: no preview matches "zzzzqqq". Try: mue regions, or mue list --group Components
Two ways back to the inventory, because an empty result usually means the query was a product noun rather than a screen.

6

A wrong flag or command

mue: unknown command "ad". Run: node tools/mue.js help and mue: usage: mue add <id>[,<id>] [--framework react|vue|web-components] --into ../my-project [--minimal] [--force] [--create]
Missing arguments print their own full usage line rather than exiting quietly.

7

A region name that does not exist

mue: unknown region(s): zzz. Known: tokens, chrome, buttons, fields, choice, cards, badges, tabs, …
The whole list of 31 comes back in the error, so the next call is one keystroke away.

8

Node itself is missing

Nothing here has a dependency to install, so the only environment failure is node not being on your PATH. node -v answers, then node tools/mue.js help confirms the checkout is intact.

What this page does not claim

!

Nothing here is a published package

mue-react, mue-vue and mue-web-components are named in the registry as the packages these files would become. Publishing them is on the roadmap in README.md and has not happened, so npm i mue-react will not work today. The installer copies files instead.

!

Output is from one commit

Every block was run on this repository on 2026-11-01 with Node v24.11.1 on Windows. The verified: and count lines come from the files as they stand; a later commit can change them, which is why the CLI prints its own answers rather than relying on this page.

!

Stable means probed, not adopted

A stable label rests on the preview being built, rendered and driven in headless Chrome and Edge at 1280px and 390px in light and dark, plus axe-core runs. Not run: Safari, Firefox, a screen reader, a touch device, server-side rendering, npm publish. docs/framework-support.md keeps that list honest.

Web Components: 43 tags, no build step Browse the 54 previews Agent guide