Pattern ◆◇◇◇◇ FE.001
Component Composition
Build complex UI from small, focused components that compose cleanly rather than inheriting behaviour.
Open detail chart → Domain chart · i
Frontend
the Frontend Reach
Component patterns, state management strategies, micro-frontends, and scalable UI systems for complex applications.
Celestial position
Featured visualisation — props-flow component tree
Component Tree Architecture
Props flow downward through the tree — Page composes Organisms, Organisms compose Molecules, Molecules compose Atoms. Each mote traces a single prop-flow branch through the hierarchy.
header → nav → link
main → content → text
sidebar → panel → badge
header → logo → icon
main → toolbar → button
Featured visualisation — unidirectional state flow
Unidirectional State Flow
Actions carry intent, the Store holds a single source of truth, and the View reacts to selections. User events dispatch new Actions — the cycle completes without side-channel mutations. Each mote traces one state token around the loop.
action · intent token
state · select / event / create
Featured visualisation — module federation topology
Micro-Frontend Federation
Independent remote modules expose() their bundles; the Shell Host consume()s them at runtime via Module Federation. Each mote traces a federation token — remote to shell and the mount acknowledgement back. Five remotes compose into one coherent application.
federation token · expose()
mount ack · consume()
remote module boundary
Featured visualisation — component render lifecycle
Component Render Lifecycle
Every component traverses Render → Commit → Mount before entering steady state. State changes trigger the Update diff and a new Render pass — the loop arc. When removed from the tree, Unmount runs teardown effects. Each mote traces one lifecycle token through the pipeline; gold motes arc back through re-render cycles.
render · virtual dom diffing
commit · dom patch + re-render arc
mount · effects run
unmount · teardown & cleanup
Skill progression — Frontend Architecture
UI Architecture Proficiency
Composition principles unlock scalable state patterns and micro-frontend autonomy. Select any node to inspect the skill.
Skill progression4 / 6
Select a skill to inspect
Pattern catalogue — Frontend
Pattern ◆◆◇◇◇ FE.002
State Management Patterns
Manage application state through well-defined flows — local, shared, and server state each handled at the right layer.
Open detail chart → Pattern ◆◆◆◆◇ FE.003
Micro-Frontend Architecture
Decompose large frontend applications into independently deployable units owned by separate teams.
Open detail chart → Principle ◆◆◇◇◇ FE.004
Composition Over Inheritance
Favour assembling behaviour from composable units rather than deep inheritance chains that couple consumers to implementation details.
Open detail chart →