harmony-arkts — Cursor rule: what it does, how to install
A Cursor rule for HarmonyOS ArkTS code covering components, state, resources, layout, lifecycle, and accessibility. Useful for .ets projects.
.cursor/rules/harmony-arkts.mdcWhat harmony-arkts does
This rule gives ArkUI components a consistent shape. It places state declarations and lifecycle hooks deliberately, keeps build() focused on UI composition, and recommends splitting complex views into smaller components. @State, @Prop, and @Link are assigned distinct roles for data flow.
The guidance also covers Column, Row, Stack, and List, layout property grouping, resource access through $r(), event handlers, async errors, focus, labels, contrast, and touch targets. It asks developers to test representative screen sizes and orientations.
For Cursor, add the file at .cursor/rules/harmony-arkts.mdc. The rule is not always active: its scope comes from patterns for **/*.ets, **/*.ts, **/*.json5, AppScope/**/*, and entry/src/main/**/*, so other paths fall outside its configured coverage.
What it helps with
- organize ArkUI component structure
- separate owned state from parent data
- move repeated values into resources
- check focus and labels for controls
- keep business logic out of
build()
Example prompts for the agent
- Review this component in
entry/src/mainagainst the HarmonyOS ArkTS rules. - Refactor state and parent data in this
.etsfile with the appropriate decorators. - Move repeated colors and dimensions to app resources accessed through
$r().
How to install harmony-arkts
Manually: put the files in place
.cursor/rules/harmony-arkts.mdcFrontmatter: description, globs, alwaysApply
Manually: put the files in place
.claude/rules/harmony-arkts.mdThe paths frontmatter field limits the files: move globs from the source into paths
AGENTS.md
Codex reads AGENTS.md: paste the rule text there
Manually: put the files in place
.github/instructions/harmony-arkts.instructions.mdThe applyTo field sets which files it applies to: move globs from the source into applyTo
Manually: put the files in place
.devin/rules/harmony-arkts.mdManually: put the files in place
.clinerules/harmony-arkts.mdStep by step, with commands for each platform: Cursor rules: .mdc files, four modes and what replaced .cursorrules
Questions about harmony-arkts
How do I install harmony-arkts in Cursor?
Copy the rule into .cursor/rules/harmony-arkts.mdc in your project.
What does harmony-arkts do?
It guides HarmonyOS ArkTS work on component structure, state flow, layout, events, resources, lifecycle code, and accessibility.
Which files does harmony-arkts cover?
Its configured patterns are **/*.ets, **/*.ts, **/*.json5, AppScope/**/*, and entry/src/main/**/*. The rule is set not to apply globally.
Source text
harmony-arkts.mdc · CC0-1.0
--- description: HarmonyOS ArkTS rules for components, state, resources, layout, lifecycle, and accessibility globs: ["**/*.ets", "**/*.ts", "**/*.json5", "AppScope/**/*", "entry/src/main/**/*"] alwaysApply: false --- # HarmonyOS ArkTS Rules ## Component Structure - Use `@Component` for component definitions and PascalCase for component structs. - Keep state declarations near the top of the component. - Group lifecycle hooks before `build()`. - Place `build()` last and keep it focused on UI composition. - Extract complex UI into smaller components. ## State and Data Flow - Use `@State` for component-owned state. - Use `@Prop` for parent-to-child data. - Use `@Link` only for intentional two-way binding. - Keep derived values in methods or computed helpers rather than duplicating state. - Avoid broad global state unless the project has an established app-state pattern. ## Layout and Styling - Use `Column`, `Row`, `Stack`, `List`, and other ArkUI primitives intentionally. - Keep layout properties such as width, height, alignment, and layout weight grouped before visual properties. - Use object notation for margin and padding when sides differ. - Use logical pixels consistently. - Use percentage strings for relative sizes. - Keep reusable spacing, colors, and typography in resources when the project supports it. ## Events and Lifecycle - Use arrow functions for event handlers. - Keep event handlers short and delegate complex logic to methods. - Handle async failures explicitly and surface user-facing errors where appropriate. - Use lifecycle hooks for setup and teardown that genuinely depends on component lifecycle. ## Resources and Accessibility - Use `$r()` for app resources. - Group resource references consistently. - Add descriptive labels and focus handling for interactive elements. - Maintain color contrast and touch target size. - Test on representative device sizes and orientations. ## Common Mistakes - Do not bury business logic in `build()`. - Do not use two-way binding when one-way props are enough. - Do not hardcode repeated strings, colors, and dimensions that belong in resources. - Do not leave debug `console.log` calls in production code.
© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules