compose-atoms

Decompose complex domain features into mountable capability atoms for modular application architecture.

82.1k|15.8k|Updated May 21, 2023

Search Tags:#state-management #modularization #ARCHITECTURE #component-design #module-graph #reAct

One-click install

npx skills add https://github.com/lobehub/lobehub --skill compose-atoms

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: compose-atoms
Source: https://github.com/lobehub/lobehub/tree/main/.agents/skills/compose-atoms
Command: npx skills add https://github.com/lobehub/lobehub --skill compose-atoms

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the 'god component' or 'fat viewer' problem where a single UI component becomes unmanageable by owning all data, mutations, and host integrations, making it impossible to reuse subsets of the feature in different contexts.

Core Features & Use Cases

Module-Graph Splitting: Decouples domain capabilities into independent atoms that can be mounted or omitted by different hosts.
State Sinking: Ensures domain state, fetch logic, and mutation handlers reside within the atom that requires them, preventing unnecessary state leakage to the assembler.
Use Case: When building a complex 'Acceptance' feature that needs to appear in a full-featured app, a mobile view, and a public share page, this Skill guides the decomposition so the share page only ships the necessary read-only atoms, reducing bundle size and complexity.

Quick Start

Analyze the current domain component and identify which capabilities can be extracted into independent atoms based on host-specific mounting requirements.

Frequently Asked Questions about compose-atoms

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I decide if a component should be split into atoms?▼

Split a component when a host needs to mount a subset of its capabilities. If a host can skip a feature, that feature should be an atom; if the feature is always required, it stays within the parent.

Where should I store state when using the compose-atoms pattern?▼

Sink state into the atom that consumes it. Avoid lifting state to the assembler unless the state represents the assembler's own layout or workflow logic, such as which atoms are currently mounted.

How do I handle shared data between atoms?▼

Use shared SWR hooks or store slices imported by the atoms themselves. SWR automatically dedupes requests by key, so you do not need to lift data to the parent to avoid redundant fetches.

What is the difference between a domain slot and a host seam?▼

A domain slot is an optional capability within the same feature, like an edit button, passed by the host. A host seam is a runtime-specific UI component, like a drawer or store provider, that is null by default.