Documentation · Agent guide
Give your coding agent design resources it can actually retrieve.
An agent does not produce generic UI because it is careless. It produces generic UI because every screen is the first screen, and the fastest answer is the one it has seen most often. Reuse changes the job: instead of inventing a table, it adapts one that already resolves contrast, spacing, states and mobile behaviour.
Three surfaces, one repository
Instruction files
AGENTS.md states the rule — reuse a preview, never invent generic UI — plus the token and motion conventions an agent must follow. SKILL.md packages the same knowledge for agents that load skills. Both are versioned with the code, so they cannot drift away from it.
The mue CLI
Any agent with a terminal can call it: search for what a screen looks like, show for copy-ready markup, stack for which frameworks actually have source, region for the exact CSS of one unit, tokens for custom properties, add to install a component with the layers it needs, check to catch unresolved classes. Every command accepts --json, and search and show accept --framework.
One machine document
node tools/mue.js registry --json returns all 54 resources with ids, paths, categories, variants, token files, breakpoints and the audit note recorded for each. Feed it into a context window once and the agent stops guessing what exists. The repository also documents how to wrap the CLI as an MCP server if your agent prefers tools over files.
Ask for a stack, get that stack
Fourteen components exist as React, Vue and Web Components source as well as HTML. The CLI is what tells an agent which is which, so it never has to guess whether a port is real or invent an API for one that is not.
What a binding carries
show ui-cards --framework vue prints the file, the package, the import path, the verified note, and the contract harvested from that file’s own MUE:META header — variants, props, states, a11y rules, keyboard behaviour, dependencies and licence. One call gives an agent the spec and the source, and --json gives the same as data.
What a binding never carries
No stylesheet of its own, no second theme system, no re-skinned third-party library. A binding writes the classes already defined in styles/components.css; node tools/audit/framework-parity.mjs fails the build when one writes a class the shared sheet does not define, or claims a check it cannot name.
What “planned” means here
Svelte and Angular have architecture documents and zero source files, so stack reports them as 0/54 entries live, 33 documented as planned and show <id> --framework svelte answers Cards — svelte: planned plus the path to the plan, never a placeholder file. An agent can tell “not built” apart from “not claimed” without reading the code.
# which stacks does this repo really ship?
node tools/mue.js stack
vanilla 54/54 · react 33/54 · vue 33/54
web-components 33/54 · svelte 0/54 (planned)
# the vue binding: source, install, contract
node tools/mue.js show ui-cards --framework vue
file frameworks/vue/components/MueCard.vue
CONTRACT variants · a11y · keyboard · dependencies · MIT
# only entries that exist in react
node tools/mue.js search "switch" --framework react
frm-switches Switches 1 variant
stacks: vanilla, react, vue, web-components
# asked for a stack that has no source
node tools/mue.js show ui-cards --framework svelte
Cards — svelte: planned
Documented plan: frameworks/svelte/ARCHITECTURE.mdOutput taken from these commands as they run in the repository today. A binding labelled stable was built, rendered in its own gallery and driven there in headless Chrome and Edge — behaviour probes at 1280px and 390px in light and dark, plus axe-core — with the command recorded in its verification note. It is not a production adoption report: docs/framework-support.md names the browsers, screen readers and SSR runs that were never done.
Setup, per kind of agent
Agents that read the repo
Codex, Claude Code, OpenCode, Cursor and Aider all read AGENTS.md (or can be pointed at it). Clone the library next to your project and tell the agent where it is. Nothing to install: the previews are HTML, CSS and JavaScript.
Agents that load skills
Copy SKILL.md into your agent's skills directory. It carries the same reuse rule plus the command surface, so the agent looks for an existing preview before writing markup.
Agents inside another project
Use the installer: node tools/mue.js add ui-cards btn-buttons --into ../app copies the component plus the token and stylesheet layers it depends on, so the copied markup is not orphaned.
# what exists that looks like this?
node tools/mue.js search "pricing table dark"
# give me the markup and its dependencies
node tools/mue.js show ui-sections --json
# install it into the app
node tools/mue.js add ui-sections --into ../app
# did the agent invent a class?
node tools/mue.js check ../app/index.html
# one document for context
node tools/mue.js registry --json > mue-registry.jsonPrompt patterns that work
Generate it for me
- “Build a modern pricing page with three tiers.”
- “Make the dashboard look professional.”
- “Add a nice table with filters.”
Each of these asks the model to invent structure, spacing and states from memory. Output quality depends entirely on how much of that pattern the model has actually seen.
Reuse, then adapt
- “Run mue search 'pricing tiers', open the top preview, keep its tokens, replace the copy.”
- “Use styles/components.css#pricing and design-tokens/engine.css. Do not write new colour values.”
- “Install ui-datatable, then add the export column. Verify with mue check at 375 px.”
The agent now has a named starting point, a fixed dependency list and a verification step — three things the first column leaves to chance.
What reuse does not do
Stated plainly, because the honest version sells better than the inflated one.
It does not raise a model's ceiling
A small open model still reasons less well than a frontier model. Reuse raises its floor: the interface starts from something already audited instead of something improvised.
It does not remove testing
Components copied into a new project need to be checked in that project. mue check finds unresolved classes and missing metadata; it cannot judge whether your content makes sense.
It does not vendor other libraries
No shadcn/ui, Ant Design, Nuxt UI or daisyUI code ships here — including in the React, Vue and Web Components ports, which are this repository’s own components writing the engine’s own classes. The engine borrows the token naming convention from shadcn/ui and keeps a license-checked index of those libraries in RESOURCES.md so future imports stay legal. The one piece of third-party code on the site is the React and Vue runtimes inside the two committed preview bundles; frameworks/ contains no node_modules.
Framework ports are checked, not production-proven
A port labelled stable builds, renders in its own gallery and was driven there in headless Chrome and Edge — behaviour probes at 1280px and 390px in light and dark, plus axe-core — and frameworks/registry.json carries the command that says so. What no port has had yet: Safari, Firefox, a screen reader, a touch device, server-side rendering, a real product adopting it, or an npm release. If your agent needs a battle-tested component library, this is not that — say so rather than finding out in production.
It is not a design replacement
Brand, hierarchy, copy and information architecture are still human work. What disappears is the repetitive part: the ninth table, the fourth empty state, the third date picker.