
Compose UI Atoms
Splits heavy UI domains into smaller components and moves state out of mode flags.
Install
npx skills add lobehub/lobehub --skill compose-atoms -g -a claude-code -y- Repository
- lobehub/lobehub83.7k
- Category
- Engineering
- Updated
- 3d ago
- License
- See repository
- Context cost
- Mediumabout 2,567 tokens
- Runs scripts
- No, instructions only
What it does
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.
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/varianton 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 |
