Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component...
npx skills add ngxtm/devkit --skill "avalonia-viewmodels-zafiro"
Install specific skill from multi-skill repository
# Description
Optimal ViewModel and Wizard creation patterns for Avalonia using Zafiro and ReactiveUI.
# SKILL.md
name: avalonia-viewmodels-zafiro
description: Optimal ViewModel and Wizard creation patterns for Avalonia using Zafiro and ReactiveUI.
Avalonia ViewModels with Zafiro
This skill provides a set of best practices and patterns for creating ViewModels, Wizards, and managing navigation in Avalonia applications, leveraging the power of ReactiveUI and the Zafiro toolkit.
Core Principles
- Functional-Reactive Approach: Use ReactiveUI (
ReactiveObject,WhenAnyValue, etc.) to handle state and logic. - Enhanced Commands: Utilize
IEnhancedCommandfor better command management, including progress reporting and name/text attributes. - Wizard Pattern: Implement complex flows using
SlimWizardandWizardBuilderfor a declarative and maintainable approach. - Automatic Section Discovery: Use the
[Section]attribute to register and discover UI sections automatically. - Clean Composition: map ViewModels to Views using
DataTypeViewLocatorand manage dependencies in theCompositionRoot.
Guides
- ViewModels & Commands: Creating robust ViewModels and handling commands.
- Wizards & Flows: Building multi-step wizards with
SlimWizard. - Navigation & Sections: Managing navigation and section-based UIs.
- Composition & Mapping: Best practices for View-ViewModel wiring and DI.
Example Reference
For real-world implementations, refer to the Angor project:
- CreateProjectFlowV2.cs: Excellent example of complex Wizard building.
- HomeViewModel.cs: Simple section ViewModel using functional-reactive commands.
# Supported AI Coding Agents
This skill is compatible with the SKILL.md standard and works with all major AI coding agents:
Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.