← ClaudeAtlas

compose-ui-builderlisted

Author and edit a Compose UI design over MCP against a compose-preview serve deployment — create a screen or a Wear widget, insert and edit nodes, and export the Kotlin, PNG or SVG. Use when asked to build, change, or review a UI Builder design (a URL like /ui-builder/<catalog>/<designId>), to turn a design into Compose code, or to collaborate with a designer on one.
yschimke/skills · ★ 2 · Web & Frontend · score 66
Install: claude install-skill yschimke/skills
# Compose UI Builder The UI builder is an authoring surface served by `compose-preview serve`: a design is a **document of catalog components**, edited by an operation log, and exported as Compose Kotlin (or PNG/SVG). A person edits it in the browser at `/ui-builder/<catalog>/<designId>`; you edit the same live document over the server's MCP endpoint. Both land in one revision log, so you and a designer can work on the same design at the same time. This is **not** the `compose-preview` renderer. That renders `@Preview` functions from a checkout you can build. This authors a design that has no checkout at all, on someone else's server, and hands you Kotlin at the end. If you have the repo and the composable already exists, you want **compose-preview**. Maintained at [github.com/yschimke/skills](https://github.com/yschimke/skills) under `skills/compose-ui-builder/`. The server ships from [github.com/yschimke/compose-preview-server](https://github.com/yschimke/compose-preview-server); its human-facing guide is [`docs/UI_BUILDER_GETTING_STARTED.md`](https://github.com/yschimke/compose-preview-server/blob/main/docs/UI_BUILDER_GETTING_STARTED.md). ## Get to the first edit in five calls Everything below is the long version. This is the whole loop: ```jsonc // 1. request_access — capabilities, not scope (see "Getting in") {"capabilities": ["ui-builder-read", "ui-builder-write", "ui-builder-export"], "ttlSeconds": 14400, "label": "add a header row to the settings screen"} //