arkui-state

Guides ArkUI declarative UI development and state management in ArkTS for HarmonyOS.

Updated Sep 3, 2026
One-click install
npx skills add https://github.com/YrracOwl/dsh-hmos-sidebar --skill arkui-state-yrracowl
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: arkui-state
Source: https://github.com/YrracOwl/dsh-hmos-sidebar/tree/main/packages/dsh-hmos-sidebar/presets/native-harmonyos/skills/arkui-state
Command: npx skills add https://github.com/YrracOwl/dsh-hmos-sidebar --skill arkui-state-yrracowl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing HarmonyOS ArkUI pages requires choosing the correct layout components, state decorators, and lifecycle hooks; picking the wrong pattern causes broken UI updates, unnecessary re-renders, and ArkTS type errors. ## Core Features & Use Cases - Layout & Component Reference: Covers Column, Row, Stack, Scroll, List, Grid, Tabs, Navigation, and common attributes and events for building ArkUI pages. - State Management Guidance: Explains V1 decorators (@State, @Prop, @Link, @Provide/@Consume, @Observed/@ObjectLink, @Watch, @StorageLink) and V2 decorators (@ComponentV2, @Local, @Param, @Event, @ObservedV2/@Trace), with rules for when to use each. - Lifecycle & Performance Patterns: Documents component and page lifecycle callbacks, ForEach/LazyForEach key requirements, dialogs, animations, and a verification checklist including dcli__lsp_check validation. - Use Case: When building a new HarmonyOS settings page with a scrollable list bound to shared app state, load this Skill to select the right layout, apply @Provide/@Consume for cross-level state, and verify the ArkTS code compiles cleanly. ## Quick Start Load the arkui-state skill and help me build an ArkUI list page in ArkTS that uses @State and @Link to sync a selected item between parent and child components.

Frequently Asked Questions about arkui-state

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

FAQPage Schema
How do I manage state in ArkUI with @State and @Link?

Use @State for mutable state owned by a component, which triggers UI refresh on change. Use @Link for two-way synchronization between parent and child, passing the variable with the $ prefix from the parent.

What is the difference between ArkUI V1 and V2 state decorators?

V1 uses @State, @Prop, @Link, and @Provide/@Consume, while V2 uses @ComponentV2 with @Local, @Param, @Event, and @ObservedV2/@Trace for deep observation. V1 and V2 can coexist in a project but cannot be mixed on the same variable; new projects should prefer V2.

When should I use @Provide and @Consume in HarmonyOS?

Use @Provide and @Consume to synchronize state across multiple component levels without passing values through every intermediate layer. For simple parent-child cases, @Prop or @Link is more appropriate.

How do I render long lists efficiently in ArkUI?

Use LazyForEach instead of ForEach for long lists, and always provide a stable keyGenerator so ArkUI can track items correctly. Avoid expensive computations inside build() to reduce unnecessary re-renders.

How do I verify ArkTS UI code after making changes?

Run dcli__lsp_check to validate ArkTS syntax and types after modifying UI code. For uncertain APIs such as component properties or decorator combinations, consult the official HarmonyOS documentation first.