skills.rest
LedgerHQ
LedgerHQOFFICIAL
Explore all skills by this author →
WebsiteGitHub

mvvm-architecture

Enforces MVVM architecture patterns for Ledger Live desktop and mobile TypeScript code.

615|491|Updated Jan 4, 2022
Search Tags:#react native#MVVM#typeScript#ARCHITECTURE#rtk query#Code review#ledger live
One-click install
npx skills add https://github.com/LedgerHQ/ledger-live --skill mvvm-architecture
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mvvm-architecture
Source: https://github.com/LedgerHQ/ledger-live/tree/main/.agents/skills/mvvm-architecture
Command: npx skills add https://github.com/LedgerHQ/ledger-live --skill mvvm-architecture

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams building features in ledger-live-desktop and ledger-live-mobile need consistent architectural rules so new TypeScript and React Native code follows the MVVM pattern instead of scattering logic across views, hooks, and Redux calls.

Core Features & Use Cases

  • Folder Structure Standards: Defines the src/mvvm/ layout with features, screens, components, hooks, and utils directories plus mandatory integrations test folders.
  • ViewModel Pattern Enforcement: Requires Container → ViewModel → View separation where Views receive props only and ViewModels own useSelector, useNavigation, and RTK Query calls.
  • Code Review Checklist: Provides a violation checklist to flag Views importing react-redux, @react-navigation, or RTK Query hooks directly.
  • Use Case: When adding a new UserProfileScreen to the mobile app, use this Skill to scaffold the screen folder with index.tsx and useUserProfileScreenViewModel.ts, wire data through RTK Query, and add the required integration test.

Quick Start

Ask the AI to create a new feature screen in src/mvvm following the MVVM architecture rules with a ViewModel hook and integration test.

Frequently Asked Questions about mvvm-architecture

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

FAQPage Schema
How do I structure a new feature in Ledger Live with MVVM?▼

Create a folder under src/mvvm/features/FeatureName/ containing components, screens, hooks, utils, and a mandatory __integrations__ test folder. Each screen gets its own folder with index.tsx as the View and a use<Name>ViewModel.ts hook holding all external logic.

What is the ViewModel pattern in React Native MVVM architecture?▼

The ViewModel pattern splits components into Container, ViewModel, and View layers. The ViewModel hook (use<ComponentName>ViewModel.ts) produces data and handlers using useSelector, useNavigation, and RTK Query, while the View receives everything via props with no direct external hook calls.

Can a View component use useSelector or RTK Query hooks directly?▼

No. Views under screens/ or components/ in src/mvvm must not import useSelector, useDispatch, useNavigation, useRoute, or any RTK Query hooks. All such calls belong in the corresponding use<Name>ViewModel.ts file in the same directory.

Does the MVVM architecture require integration tests?▼

Yes. Every new feature under src/mvvm must include an __integrations__/ folder with at least a minimal integration test created when the folder is first added. Code reviews enforce this requirement strictly.

Which design system should new MVVM UI components use?▼

New UI in src/mvvm must use the Lumen design system: the ldls-web skill for desktop and ldls-native for mobile. Data fetching should use RTK Query with dada-client and cal-client as reference implementations.

Related Skills

Explore More Software Engineering Skills→
4lerman4lerman

monorepo-navigator

Analyze cross-package impact and dependency graphs in monorepos.

Community
Advanced
xvawlxvawl
1

pre-merge-checklist

Validate Python and TypeScript PRs against linting, typing, tests, and documentation.

Community
Intermediate
pimcorepimcore
13

pimcore-studio-ui-error-handling

Centralize Pimcore Studio UI error handling with trackError, ApiError, GeneralError, and ErrorBoundary.

Official
Advanced
randoneeringrandoneering

using-streamlit-custom-components

Install and integrate community-created components into Streamlit apps.

Community
Intermediate