Skip to main content
rule

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.

Install into Cursor · Manually: put the files in place All methods and platforms ↓
.cursor/rules/harmony-arkts.mdc
Open on GitHub

What 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/main against the HarmonyOS ArkTS rules.
  • Refactor state and parent data in this .ets file 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.mdc

Frontmatter: description, globs, alwaysApply

Step 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

Similar IDE rules

All IDE rules for Frontend and UI →

From the same set210

htmx-basic-cursorrules-prompt-file Guides Cursor when building HTMX interfaces with server templates, clean folder layouts around app.py, and standard request attributes. ★ 41,024repo stars html-tailwind-css-javascript-cursorrules-prompt-fi A Cursor rule for HTML, Tailwind CSS, and vanilla JavaScript work. Use it when an agent needs clear coding constraints for frontend files. ★ 41,024repo stars how-to-documentation-cursorrules-prompt-file A Cursor rule that turns technical steps, test scripts and screenshots into step-by-step guides for non-technical users. Useful when you write How To docs for a feature. ★ 41,024repo stars hol-hedera-typescript-cursorrules-prompt-file Cursor rules for building decentralized Hedera AI agents with Hashgraph Online SDK in TypeScript. Enforces strict typing and TDD workflow. ★ 41,024repo stars graphical-apps-development-cursorrules-prompt-file A Cursor rule that feeds the agent the Pyllments context: graph-based LLM apps in Python built on Panel and Langchain. ★ 41,024repo stars google-adk Guides Cursor when building agents with the Google Agent Development Kit. It enforces patterns for tools, session memory, artifacts, and multi-agent systems. ★ 41,024repo stars go This rule guides Cursor toward idiomatic Go with explicit errors, interface-based design, and context-aware concurrency. It targets .go files. ★ 41,024repo stars go-servemux-rest-api-cursorrules-prompt-file A Cursor rule that points the assistant at Go REST APIs built with net/http and the ServeMux router from Go 1.22. ★ 41,024repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor