Skills

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 / 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 coarseRight grainToo fine
One Viewer with readOnlyIdentity, goal, list, decision, …Every badge, row, and icon as a public export
Chat as a single importList, composer, intervention, …Every message sub-row the page then rewires
Document as editor + every panelCanvas, header, comments as omittedInternal toolbar buttons
Read the whole SKILL.md on GitHub

More in Engineering