HarmonyOS ArkTS Development Assistant

Purpose

1. Development Guidance: Official HarmonyOS development standards covering MVVM architecture, @ComponentV2 component patterns, Navigation routing, state management, and code organization
2. Intelligent Error Debugging: Categorized error log system for quick error resolution by searching known solutions
3. Knowledge Accumulation: Automatically records newly encountered errors and their solutions for future reference

When to Use This Skill

1. File Operations: When reading, writing, or editing

   .ets

   files (HarmonyOS ArkTS source files)
2. Explicit HarmonyOS Development: When users mention "HarmonyOS", "ArkTS", "@ComponentV2" or related development keywords
3. Error Debugging: When users request debugging help, error investigation, or troubleshooting in a HarmonyOS context

Development Workflow

1. Development Guidance

references/development-guide.md

• Project structure and file organization (Sections 1-2)
• @ComponentV2 component patterns and decorators (Section 3)
• MVVM architecture design (Section 4)
• Data model and service layer design (Sections 5-7)
• Navigation API routing management (Section 10)
• State management best practices (Section 11)
• Performance optimization (Section 12)
• Error handling and logging standards (Sections 13-14)

• Component Organization: Place components following the "proximity principle" (page-specific → module-shared → global-shared)
• MVVM Separation: Business logic in ViewModel, UI rendering in Page components
• V2 Decorator System: Use @ComponentV2 with @Param/@Local, avoid mixing V1 decorators (@State/@Observed)
• Resource Management: Reference resources using

  $r('app.xxx')

  , define sizes using ThemeSizeTokens constants

• Files: PascalCase (e.g.,

  ProductListPage.ets

  )
• Classes/Structs: PascalCase
• Methods/Variables: camelCase
• Constants: SCREAMING_SNAKE_CASE
• Component Props interfaces: End with

  Props

2. Error Debugging Workflow

// Use Grep tool to search for similar error patterns in error-log.md
Grep(pattern="[error keywords]", path="references/error-log.md", output_mode="content")

• Exact error messages (e.g., "Cannot find name")
• Error codes
• Problem descriptions (e.g., "Navigation push failed", "List performance")

1. Carefully read the documented solution
2. Apply the recommended fix
3. Refer to relevant sections in development-guide.md if mentioned
4. Verify if the fix resolves the issue

1. Analyze the error message and stack trace
2. Consult relevant sections in development-guide.md
3. Apply debugging techniques:
   • Check decorator usage (@ComponentV2, @Param, @Local)
   • Validate import statements
   • Review MVVM architecture separation
   • Verify Navigation routing configuration
   • Check resource references

1. Determine Error Category:
   • Compilation errors
   • Runtime errors
   • Performance issues
   • Architecture issues
   • Other common issues
2. Add Error Entry to

   references/error-log.md

   :

### Error: [Brief Description]

**Error Message**:
[Full error message or key code snippet]

**Root Cause**:
[Fundamental cause of the error]

**Solution**:
[Specific resolution steps and code examples]

**Related Specifications**:
[Reference relevant sections in development-guide.md]

**Recorded Date**: YYYY-MM-DD

1. Notify User: Inform the user that the error and solution have been recorded for future reference.

3. Reference File Loading Strategy

references/development-guide.md

• Size: Large comprehensive document (approx. 2000 lines)
• Loading Strategy:
  • Read specific sections using offset/limit parameters as needed
  • For general questions, first use Grep to find relevant sections
  • For architecture design, read Sections 1-4
  • For specific features, read target sections (e.g., Section 10 for routing)

references/error-log.md

• Size: Growing document, initially medium-sized
• Loading Strategy:
  • Always use Grep to search for error patterns first
  • Read full context only when a matching error is found
  • Use the Edit tool to append new errors

Important Guiding Principles

Code Quality Standards

• Avoid Over-Engineering: Only implement requested content, avoid unnecessary features or abstractions
• Security First: Never introduce vulnerabilities (XSS, SQL injection, command injection, etc.)
• Performance Awareness: Use LazyForEach for long lists, optimize image loading, avoid frequent re-renders
• Type Safety: Use appropriate TypeScript types, avoid

  any

Skill-Specific Rules

1. Search Before Solving: Never attempt to resolve an error without first searching error-log.md
2. Always Record New Solutions: After resolving a new error, always record it in error-log.md
3. Reference the Guide: When explaining solutions, reference relevant sections in development-guide.md
4. Keep Logs Organized: Ensure new entries are added under the correct category
5. Provide Context: When recording errors, include sufficient context for future reference (error message, cause, solution, related specifications)

Communication Style

• All user-facing content in Chinese (based on CLAUDE.md preferences)
• Concise and practical, focused on actionable information
• Explain the "why" behind architectural decisions when relevant
• Provide multiple approaches and their trade-offs when appropriate

Skill Maintenance

• Update error-log.md: Continuously add newly encountered errors
• Update development-guide.md: If project-specific patterns emerge that differ from standard guidelines
• Review and Integrate: Regularly review error-log.md to find duplicate entries or patterns that should be elevated to development-guide.md

Usage Scenario Examples

User: "Help me create a product list page"
Assistant:
1. Load Sections 2 (Project Structure) and 4 (MVVM) of development-guide.md
2. Create pages following the standard structure:
   - pages/product/list/ProductListPage.ets
   - pages/product/list/viewmodel/ProductListViewModel.ets
   - pages/product/list/components/ProductCard.ets
3. Implement using @ComponentV2, @Param, @Local following Section 3
4. Set up routing referencing Section 10

User: "Compilation error: Cannot use @State with @ComponentV2"
Assistant:
1. Grep error-log.md for "Mixing V1 and V2 decorators"
2. Locate the documented solution
3. Apply the fix: Replace @State with @Local
4. Explain the V1/V2 decorator separation principle

User: "Navigation jump error: [NEW_ERROR_MESSAGE]"
Assistant:
1. Grep error-log.md but find no matches
2. Analyze the error and consult Section 10 (Navigation) of development-guide.md
3. Identify the root cause and apply the fix
4. Record the new error under the "Runtime Errors" category in error-log.md
5. Notify user: "This error and its solution have been recorded in the error log"

Quick Reference