HarmonyOS ArkTS Development

This skill covers building HarmonyOS applications with ArkTS and the declarative ArkUI framework, including component structure, state management, layout, lifecycle, resources, and accessibility.

Workflow for Building an ArkTS Component

1. Define the component — Create a struct decorated with @Component, named in PascalCase.
2. Declare state near the top — List @State, @Prop, @Link, and other state decorators first, before any methods.
3. Add lifecycle hooks — Implement aboutToAppear()/aboutToDisappear() (and others as needed) after state, before build().
4. Compose the UI in build() — Place build() last, using ArkUI primitives (Column, Row, Stack, List, etc.) to lay out child components.
5. Extract complex UI — Once build() grows large or nested, pull sections into smaller @Component structs or @Builder functions.
6. Wire events — Attach arrow-function event handlers that delegate non-trivial logic to named methods on the component.
7. Externalize resources — Move strings, colors, dimensions, and images into the resource system and reference them with $r().
8. Verify accessibility and responsiveness — Add accessibility labels, check touch target sizes, and test across representative device sizes/orientations.

Component Structure