skills.rest
IsKenKenYa
IsKenKenYaCOMMUNITY
Explore all skills by this author →
GitHub

hmos-arkui-mvvm-pattern

Implements and refactors HarmonyOS ArkUI applications into MVVM architecture with V1 and V2 state management.

2|Updated Jun 21, 2026
Search Tags:#architecture#state management#refactoring#mvvm#arkui#harmonyos#arkts
One-click install
npx skills add https://github.com/IsKenKenYa/skills --skill hmos-arkui-mvvm-pattern-iskenkenya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hmos-arkui-mvvm-pattern
Source: https://github.com/IsKenKenYa/skills/tree/main/skills/harmonyos/development/application-framework/ArkUI/hmos-arkui-mvvm-pattern
Command: npx skills add https://github.com/IsKenKenYa/skills --skill hmos-arkui-mvvm-pattern-iskenkenya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve? HarmonyOS ArkUI developers often struggle with tangled state management, unclear layer responsibilities, and mixing V1/V2 state decorators, leading to unmaintainable code and runtime crashes. This Skill provides a structured decision framework and strict workflows to build new features or refactor existing projects into a clean Model/ViewModel/View architecture. ## Core Features & Use Cases - MVVM Layering Guidance: Decision trees for state variable placement (state hoisting), code file ownership (model/ vs viewmodel/ vs util/), and recommended directory structures. - V1/V2 State Management Support: Separate development scenarios for V1 (@Observed + @Track + @ObjectLink) and V2 (@ObservedV2 + @Trace + @Param/@Event + PersistenceV2), with anti-mixing rules and decorator mapping tables. - New-Build and Refactor Workflows: Step-by-step workflows for creating new MVVM features and migrating existing pages, including anti-pattern scanning and per-page verification with devecocli builds. - Use Case: You inherit a single-file ArkUI page with business logic embedded in the Page component. Use this Skill to scan for anti-patterns, extract a ViewModel, separate the Model layer, and verify the refactored page compiles and behaves identically. ## Quick Start Ask the AI to refactor my existing ArkUI todo list page into MVVM architecture using V2 state management with proper Model, ViewModel, and View separation.

Frequently Asked Questions about hmos-arkui-mvvm-pattern

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

FAQPage Schema
How do I implement MVVM architecture in HarmonyOS ArkUI?▼

Separate code into Model (plain data classes and repositories), ViewModel (@ObservedV2/@Observed classes holding UI state and business logic), and View (components receiving data via @Param or @Link). The Skill provides decision trees for state placement and step-by-step workflows for both new features and refactoring.

What is the difference between ArkUI V1 and V2 state management for MVVM?▼

V1 uses @Component with @State/@Prop/@Link/@ObjectLink plus @Observed/@Track, and requires subclassing Array for observable push/splice. V2 uses @ComponentV2 with @Local/@Param/@Event plus @ObservedV2/@Trace, supports deep nested observation, native array operation tracking, @Computed, and PersistenceV2.

Can I mix V1 and V2 decorators in the same ArkUI component?▼

No, mixing V1 and V2 decorators in one component is forbidden and causes errors. For example, @Component cannot use @Local or @Param, and @ComponentV2 cannot use @State or @Link. The Skill includes a decorator mapping table to keep suites consistent.

Why does my V1 ArkUI array push not trigger UI updates?▼

Plain arrays in V1 do not notify the UI on push or splice. Fix it by declaring an @Observed class extending Array (e.g., ThingViewModelArray) or by replacing the whole array with a new copy. V2 @Trace arrays handle these operations natively.

How do I refactor an existing ArkUI page into MVVM?▼

Follow the refactor workflow: scan the page for anti-patterns like View importing Model or business logic in Page, extract state and methods into a ViewModel, move data access into a Model repository, slim the Page to pure assembly, then verify with devecocli build page by page.

When should I use AppStorageV2 versus PersistenceV2 in HarmonyOS?▼

Use AppStorageV2 for session-scoped global state like login status that should reset when the app closes. Use PersistenceV2 for user preferences and data that must survive restarts, such as theme settings or saved task lists.

Related Skills

Explore More Software Engineering Skills→
linhaylinhay
284

harmony-next

Automate HarmonyOS NEXT development tasks with offline API references and diagnostics.

Community
Advanced
openJiuwen-aiopenJiuwen-ai
7.1k

harmonyos-dev-suite

Routes HarmonyOS development tasks across ArkTS, ArkUI, build, debug, testing, and device workflows.

Official
Advanced
hasnahasna

redux

Create a Redux-compatible StateStore adapter for json-render's StateProvider.

Official
Intermediate
blacklanternsecurityblacklanternsecurity
253

web-discovery

Discover web application injection points and test for common vulnerability classes.

Official
Advanced