# Compose UI Atoms

Splits heavy UI domains into smaller components and moves state out of mode flags.

- Repository: https://github.com/lobehub/lobehub (83676 stars)
- Category: Engineering
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add lobehub/lobehub --skill compose-atoms -g -a claude-code -y`
Codex: `npx skills add lobehub/lobehub --skill compose-atoms -g -a codex -y`
Cursor: `npx skills add lobehub/lobehub --skill compose-atoms -g -a cursor -y`
Gemini CLI: `npx skills add lobehub/lobehub --skill compose-atoms -g -a gemini-cli -y`

## Description

Use for splitting heavy domains into capabilities (原子组件) across page, portal, share or micro-app hosts, sinking state (状态下沉) and replacing mode/readOnly flags. Simple component splits: react.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Compose Atoms

A heavy domain is a **kit**, not a viewer with modes. Each host is an import list. An atom owns the data, actions, and dependencies of one capability. The assembler only chooses what to mount.

This is a **module-graph** split. Hiding UI does not drop a module. A host that never imports a file is the only host that does not ship it.

Do not use this skill to slice one component into smaller files. That is `react`.

## When

The folder is a product surface (Conversation, Acceptance, Document, Verify, Task, …) and at least one of these is true:

- One entry owns read + write + workflow + host integration.
- A second host already exists or is the next change (page, portal, share, mobile, popup, micro-app).
- The next feature is another boolean / `mode` / `variant` on the fat tree.
- Reusing a header, list, or card would import trays, stores, or chat.

If the file is large but has **one** capability and **one** host, stop. Use `react`.

## Grain

An atom is the **smallest unit a host is allowed not to mount**.

Ask, for every chunk: _would any host ship the rest and skip this?_ If yes, it is an atom. If no, it stays inside its parent.

That grain is coarser than a visual section and finer than the whole page.

| Too coarse                         | Right grain                         | Too fine                                      |
| ---------------------------------- | ----------------------------------- | --------------------------------------------- |
| One `Viewer` with `readOnly`       | Identity, goal, list, decision, …   | Every badge, row, and icon as a public export |
| `Chat` as a single import          | List, composer, intervention, …     | Every message sub-row the page then rewires   |
| `Document` as editor + every panel | Canvas, header, comments as omitted | Internal toolbar buttons                      |

The rest: https://github.com/lobehub/lobehub/blob/HEAD/.agents/skills/compose-atoms/SKILL.md