markpitt

avalonia

5
1
# Install this skill:
npx skills add markpitt/claude-skills --skill "avalonia"

Install specific skill from multi-skill repository

# Description

Expert guidance for developing cross-platform desktop applications with Avalonia UI framework. Use when building, debugging, or optimizing Avalonia apps including MVVM architecture, XAML design, data binding, styling, theming, custom controls, and cross-platform deployment for Windows, macOS, Linux, iOS, Android, and WebAssembly.

# SKILL.md


name: avalonia
description: Expert guidance for developing cross-platform desktop applications with Avalonia UI framework. Use when building, debugging, or optimizing Avalonia apps including MVVM architecture, XAML design, data binding, styling, theming, custom controls, and cross-platform deployment for Windows, macOS, Linux, iOS, Android, and WebAssembly.
version: 2.0


Avalonia UI Framework - Orchestration Hub

Modular guidance for cross-platform desktop and mobile development using Avalonia, a WPF-inspired XAML-based framework for .NET.

Quick Reference: When to Load Which Resource

Task/Goal Load Resource
MVVM patterns, data binding, dependency injection, value converters resources/mvvm-databinding.md
UI controls reference (layouts, inputs, collections, menus) resources/controls-reference.md
Custom controls, advanced layouts, performance optimization, virtualization resources/custom-controls-advanced.md
Styling, themes, animations, control templates resources/styling-guide.md
Reactive patterns, commands, observables, animations resources/reactive-animations.md
Windows, macOS, Linux, iOS, Android implementation details resources/platform-specific.md

Framework Overview

Avalonia is a cross-platform XAML framework supporting:
- Platforms: Windows, macOS, Linux, iOS, Android, WebAssembly
- Architecture: MVVM with ReactiveUI support
- Styling: CSS-like selectors with Fluent/Simple themes
- Features: Data binding, reactive commands, observable collections, custom controls
- Modern .NET: .NET 6+ and .NET Standard 2.0

Standard Project Structure

MyAvaloniaApp/
β”œβ”€β”€ MyAvaloniaApp/                  # Shared code
β”‚   β”œβ”€β”€ App.axaml
β”‚   β”œβ”€β”€ Views/                      # XAML views
β”‚   β”œβ”€β”€ ViewModels/                 # Business logic + state
β”‚   β”œβ”€β”€ Models/                     # Data models
β”‚   β”œβ”€β”€ Services/                   # Application services
β”‚   β”œβ”€β”€ Converters/                 # Value converters
β”‚   β”œβ”€β”€ Assets/                     # Images, fonts
β”‚   └── Styles/                     # Style resources
β”œβ”€β”€ MyAvaloniaApp.Desktop/          # Desktop-specific (Win/Mac/Linux)
β”œβ”€β”€ MyAvaloniaApp.Android/          # Android-specific (optional)
β”œβ”€β”€ MyAvaloniaApp.iOS/              # iOS-specific (optional)
└── MyAvaloniaApp.Browser/          # WebAssembly (optional)

Getting Started

Minimal Setup

// Program.cs
public static void Main(string[] args)
{
    BuildAvaloniaApp().StartWithClassicDesktopLifetime(args);
}

public static AppBuilder BuildAvaloniaApp() =>
    AppBuilder.Configure<App>()
        .UsePlatformDetect()
        .LogToTrace();
<!-- App.axaml -->
<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MyApp.App">
    <Application.Styles>
        <FluentTheme />
    </Application.Styles>
</Application>
<!-- Views/MainWindow.axaml -->
<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="MyApp.Views.MainWindow"
        Title="My Application"
        Width="800"
        Height="600">
    <StackPanel Padding="20" Spacing="10">
        <TextBlock Text="Hello, Avalonia!" FontSize="24" FontWeight="Bold" />
    </StackPanel>
</Window>

Core Patterns

MVVM Architecture Pattern

  1. View (XAML): UI presentation with data bindings
  2. ViewModel (C#): State management and commands
  3. Model (C#): Business logic and data access
  4. Service: Cross-cutting concerns (DI/IoC)

Load resources/mvvm-databinding.md for:
- ViewModel base classes
- Data binding modes and paths
- Multi-binding and converters
- Dependency injection setup
- Design-time data

Reactive Programming Pattern

Leverage ReactiveUI for event-driven UI updates:

this.WhenAnyValue(x => x.SearchText)
    .Debounce(TimeSpan.FromMilliseconds(300))
    .Subscribe(text => PerformSearch(text));

Load resources/reactive-animations.md for:
- Reactive properties and commands
- Observable sequences
- Animations and transitions
- Performance optimization

Platform-Adaptive Pattern

Design once, adapt per platform:

<OnPlatform Default="16">
    <On Options="Windows" Content="14" />
    <On Options="macOS" Content="15" />
</OnPlatform>

Load resources/platform-specific.md for:
- Runtime platform detection
- Platform-specific services
- Conditional UI rendering
- Native dialogs and features

"I need to build a form with validation"

  1. Load resources/mvvm-databinding.md β†’ Implement ViewModel with property validation
  2. Load resources/controls-reference.md β†’ Find TextBox, ComboBox, Button controls
  3. Load resources/reactive-animations.md β†’ Add debounced validation with observables

"I'm seeing poor performance with large lists"

  1. Load resources/custom-controls-advanced.md β†’ Enable virtualization
  2. Load resources/mvvm-databinding.md β†’ Use compiled bindings
  3. Load resources/reactive-animations.md β†’ Debounce/throttle updates

"I need platform-specific behavior"

  1. Load resources/platform-specific.md β†’ Implement service interfaces
  2. Load resources/mvvm-databinding.md β†’ Register platform implementations via DI
  3. Platform-specific resources/ β†’ Implement per-platform project

"I want custom styling and animations"

  1. Load resources/styling-guide.md β†’ Define styles and themes
  2. Load resources/reactive-animations.md β†’ Add animations to styles
  3. Load resources/custom-controls-advanced.md β†’ Custom control templates

"I'm building a complex control"

  1. Load resources/custom-controls-advanced.md β†’ TemplatedControl or UserControl pattern
  2. Load resources/mvvm-databinding.md β†’ Attached properties and data binding
  3. Load resources/styling-guide.md β†’ Control templates and styling

Resource Organization

mvvm-databinding.md (Primary)

  • Architecture overview
  • ViewModel patterns with ReactiveUI
  • Binding modes and syntax
  • Value converters
  • Collections and list binding
  • Design-time data
  • Master-detail and tab patterns

controls-reference.md (Primary)

  • Layout controls (Grid, StackPanel, DockPanel, etc.)
  • Input controls (TextBox, Button, CheckBox, ComboBox, etc.)
  • Display controls (TextBlock, Image, ProgressBar, etc.)
  • Collection controls (ListBox, DataGrid, TreeView, etc.)
  • Navigation (Menu, TabControl, SplitView, etc.)
  • Shapes and drawing

styling-guide.md (Primary)

  • CSS-like selectors (type, class, pseudo-classes)
  • Resource dictionaries and themes
  • Control templates
  • Data templates
  • Animations and transitions
  • Easing functions
  • Theme variants (light/dark)

reactive-animations.md (Advanced)

  • ReactiveUI integration
  • Reactive properties
  • Reactive commands (sync and async)
  • Observable sequences
  • Filtering, transformation, combining
  • Programmatic animations
  • Common patterns (search, validation, auto-complete)

custom-controls-advanced.md (Advanced)

  • Custom TemplatedControl creation
  • User control composition
  • Advanced layouts
  • Virtualization
  • Performance optimization
  • Render transforms
  • Graphics and drawing

platform-specific.md (Advanced)

  • Runtime platform detection
  • Multi-project structure
  • Service abstractions
  • Platform-specific implementations
  • Window management per platform
  • File system access
  • Native features (Windows DLL, macOS Cocoa, etc.)

Common Workflows

Build a Desktop App (Windows/macOS/Linux)

1. β†’ Setup: Standard project structure + FluentTheme
2. β†’ Create Views and ViewModels following MVVM
3. β†’ Use controls-reference for UI layouts
4. β†’ Add styles with styling-guide
5. β†’ Implement services with DI (mvvm-databinding)
6. β†’ Add animations with reactive-animations
7. β†’ Test on each platform with platform-specific guidance

Build a Cross-Platform Mobile+Desktop App

1. β†’ Create shared project + platform-specific projects
2. β†’ Define service interfaces in shared code (mvvm-databinding)
3. β†’ Implement services per platform (platform-specific)
4. β†’ Use OnPlatform for adaptive UI
5. β†’ Register platform implementations via DI
6. β†’ Test thoroughly on each target (iOS/Android/Windows/Mac)
1. β†’ Create SearchViewModel (mvvm-databinding)
2. β†’ Use ObservableCollection for results (mvvm-databinding)
3. β†’ Implement with reactive search pattern (reactive-animations)
4. β†’ Debounce input to reduce API calls
5. β†’ Display with ListBox (controls-reference)
6. β†’ Style with appropriate CSS selectors (styling-guide)

Build Complex Data-Driven UI

1. β†’ Design ViewModel hierarchy (mvvm-databinding)
2. β†’ Create master-detail view (mvvm-databinding)
3. β†’ Use DataGrid for tabular data (controls-reference)
4. β†’ Add sorting/filtering with observables (reactive-animations)
5. β†’ Optimize with virtualization (custom-controls-advanced)
6. β†’ Add custom controls if needed (custom-controls-advanced)

Best Practices Summary

Architecture
- Maintain strict MVVM separation of concerns
- Use dependency injection for testability
- Keep business logic in ViewModels, not Views

Performance
- Enable compiled bindings with x:DataType
- Virtualize large collections
- Debounce rapid updates

Styling
- Use resource dictionaries for consistency
- Support light and dark themes
- Test styles on all target platforms

Reactive Patterns
- Use observables for event-driven updates
- Debounce/throttle input-triggered operations
- Always handle ThrownExceptions on commands

Testing
- Unit test ViewModels in isolation
- Use Avalonia.Headless for UI testing
- Provide design-time DataContext in XAML

Cross-Platform Deployment

  • Windows: ClickOnce, MSI, portable exe
  • macOS: DMG, homebrew
  • Linux: AppImage, snap, flatpak
  • Mobile: Apple App Store, Google Play Store
  • Web: Static hosting (WASM runtime required)

Refer to resources/platform-specific.md for platform-specific build and deployment guidance.


Navigation: Choose a resource above based on your task. Each resource is self-contained with comprehensive examples and best practices.

# 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.