ledger-live: Skill for Claude Code

Flow package anatomy

A @features/flow-<name> package holds one user-facing flow that both apps compose. Where the package sits among the layers is structure-flow; how its barrels work is package-public-api. This skill covers what goes inside src/. Every rule names a package on develop to copy from; the full trees are in references/examples.md.

MVVM is the convention

Every flow package is MVVM, with no exception: each screen, and each component with its own state, is a useXViewModel.ts plus XView.web.tsx / XView.native.tsx. The View renders its props only: no store, navigation or query hook. The ViewModel and View rules are the mvvm-architecture ones; this skill does not restate them.

What is specific to a flow package:

• The View is split per platform, XView.web.tsx and XView.native.tsx, on one props type. Suffix the ViewModel too (useXViewModel.web.ts) only when the two platforms really differ.
• A component exported from a universal entry keeps one props contract on both platforms: see the universal components ADR.

Example: useCardViewModel.ts, CardView.web.tsx and CardView.native.tsx in @features/flow-pay-card; useCardAssetsViewModel.ts and CardAssetsView.*.tsx in @features/flow-pay-card-assets. view.web.tsx in @features/flow-fear-and-greed predates the naming rule: rename it when you touch it.

One screen: flat src/

A flow with one screen keeps its files at the root of src/, with no screens/ folder.

src/
├── Card.tsx              # entry: wires the ViewModel to the View
├── Card.types.ts         # props of the entry and of the view
├── useCardViewModel.ts   # state, data and callbacks, no JSX
├── CardView.web.tsx      # web rendering
├── CardView.native.tsx   # native rendering
├── index.ts
└── index.native.ts

Example: @features/flow-pay-card. The entry is one line, <CardView {...useCardViewModel(props)} />, and ./CardView resolves to the .web or .native file per platform.