uxed plugin
The building-ui skill opens an editable UI mock: you change it directly, then the agent implements it with TDD.
- 82 ★ on the repository
- Last commit
Extended access
Why this level
- The skill changes project code and tests, and app mode temporarily attaches a script on the address of the running app.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/uxedDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skill changes project code and tests, and app mode temporarily attaches a script on the address of the running app.
This is third-party code. Review the repository files before installing.
What it does
uxed is a set of skills that replace back-and-forth chatting with a more precise way to align with an agent. It currently holds one skill, `building-ui`, started with `/building-ui` or by asking the agent to mock up a component or change the UI. In mock mode the agent takes a description and a sketch and opens an interactive mock in the style of the project. You pick elements, write behavior rules, comment, edit text and style, then ask the agent to apply the changes. The agent implements the approved mock with TDD. In app mode the skill attaches a shell to the running app through a script on its own URL, and you pick, comment on and rename elements the same way. The agent writes the changes into code and tests and removes the script when you are done.
Who it is for. Frontend developers and designers who change an interface on a mock or in the running app instead of long clarifications in chat.
Good fit when
- A new component is built from a spec and three sketches and needs a mock before code.
- The text, style and behavior rules of an existing component change.
- In a running app you pick an element and ask the agent to describe or rename it.
- An approved mock is turned into code with tests through TDD.
Not a fit when
- The interface is not a web one: the mock opens in a browser shell.
- You need a ready design system or a Figma export: the skill edits the project code.
- Team policy forbids a third-party script on the app address.
Example request
/building-ui Mock up the strategy search component from this spec and three sketches, then implement it with TDD.Limitations
App mode attaches the shell with a `script` tag on the address of your app and removes it afterwards, so run it only against a local dev server. The skill works with project code and tests, so TDD implementation needs a working test suite and a clear command to run it. The `examples/mock-palette` example shows only the mock and its notes. Codex installs the plugin with separate commands, other agents use `npx skills add`.
How to disable. Remove the plugin through the agent plugin manager or delete the `building-ui` folder from the skills directory. If app mode was left on, remove the `script` tag from the app page.
FAQ
How do I install uxed?
Run `npx skills add MK27MK/uxed` for any agent. Claude Code also works with `/plugin marketplace add MK27MK/uxed` and `/plugin install uxed@uxed`.
How do I install it in Codex?
Run `codex plugin marketplace add MK27MK/uxed`, then `codex plugin add uxed@uxed`.
How does mock mode differ from app mode?
A mock is built from scratch from a spec and a sketch. App mode edits elements of the running app and writes the changes into code and tests.
What happens after I approve a mock?
Ask the agent to implement it: the skill drives the implementation through TDD.
Is there an example?
Yes, `examples/mock-palette` shows a strategy search component built from three sketches and a spec.
Discussion
No questions or reviews yet.
Related
PluginsA skill that designs UI and landing page mockups and rebuilds screenshots as HTML, a React project or a WeChat mini program
A skill and CLI for interfaces: build, redesign and review around a product's audience, content and identity
A UI design skill: art direction per product, a shared DESIGN.md, tokens, and layout and accessibility checks in a browser.
A skill that bans the stock AI interface with floating cards, gradients and glass and sets plain sizes, radii and shadows like Linear
Make interfaces feel better
make-interfaces-feel-better
A skill about the small interface details: animations, typography, icons, shadows, radii, optical alignment and hit areas
A skill with a searchable base of styles, palettes, font pairings and UX rules that generates a design system per product type
README in short
A short README: install for any agent, Claude Code and Codex, a skill list and an example. The details live in the `building-ui` README, which describes the mock and app modes.