Agent skill · mindrally
harmony-arkts
Best practices for HarmonyOS application development with ArkTS and ArkUI, covering components, state management, resources, layout, lifecycle, and accessibility. Use when writing .ets component files, using ArkUI decorators like @Component/@State/@Prop/@Link, building layouts with Column/Row/Stack/List, managing HarmonyOS app resources with $r(), or handling component lifecycle and accessibility on HarmonyOS.
What it needs
About 4k tokens when loaded.
What this skill does
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 Use @Component to define components and PascalCase for the component struct name (e.g., struct UserProfileCard). Keep state declarations (@State, @Prop, @Link, @StorageLink, plain fields) near the top of the component, before methods and lifecycle hooks. Group lifecycle hooks (aboutToAppear, aboutToDisappear, onPageShow, onPageHide) before build() so the component's lifecycle is easy to scan. Place build() last and keep it focused purely on UI composition — pull data transformation and business logic out into methods called from build(), not embedded inline. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills mindrally/harmony-arkts