skills.rest
peterblazejewicz
peterblazejewiczCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-ui-engineering-avalonia

Builds accessible, themeable Avalonia 11/12 user interfaces with MVVM and compiled bindings.

7|Updated Jan 11, 2026
Search Tags:#theming#accessibility#mvvm#avalonia#xaml#ui engineering#compiled bindings
One-click install
npx skills add https://github.com/peterblazejewicz/claude-plugins --skill frontend-ui-engineering-avalonia-peterblazejewicz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering-avalonia
Source: https://github.com/peterblazejewicz/claude-plugins/tree/main/plugins/dotnet-skills/skills/frontend-ui-engineering-avalonia
Command: npx skills add https://github.com/peterblazejewicz/claude-plugins --skill frontend-ui-engineering-avalonia-peterblazejewicz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Avalonia views often ship with silent binding failures, hardcoded colors, missing accessibility metadata, and a generic AI-generated look. This Skill provides concrete patterns for building production-quality Avalonia UIs that are type-safe, themeable, accessible, and visually polished across desktop, mobile, and browser targets. ## Core Features & Use Cases - MVVM with compiled bindings: Enforces x:DataType and x:CompileBindings with CommunityToolkit.Mvvm source generators ([ObservableProperty], [RelayCommand]) so binding typos become build errors instead of silent runtime failures. - Theming and design tokens: Structures colors, spacing, and typography into ResourceDictionary theme variants with DynamicResource/StaticResource guidance, plus an explicit checklist for avoiding the generic AI aesthetic. - Accessibility and adaptive layouts: Covers AutomationProperties, keyboard navigation, focus management, WCAG contrast ratios, and class-based layout switching for desktop, mobile, and browser targets. - Use Case: When adding a new task-list view to an Avalonia 12 app, the Skill guides you to declare compiled bindings, implement loading/error/empty/populated states, bind to design tokens, set automation names on icon-only buttons, and verify with an Avalonia.Headless.XUnit test. ## Quick Start Ask the AI to build a new Avalonia view for your feature using MVVM with compiled bindings, design tokens, and full accessibility support.

Frequently Asked Questions about frontend-ui-engineering-avalonia

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enable compiled bindings in Avalonia?▼

Declare x:DataType with your view-model type and set x:CompileBindings="True" at the root of every UserControl or Window. Avalonia 12 enables compiled bindings by default, but Avalonia 11 requires the explicit opt-in; declaring both attributes is correct in either version.

How do I implement light and dark themes in Avalonia?▼

Define colors inside ResourceDictionary.ThemeDictionaries with Light and Dark variants, then reference them with DynamicResource so they update when the theme changes. Avalonia swaps dictionaries automatically based on ThemeVariant, and you can override it via Application.Current.RequestedThemeVariant.

Does Avalonia support CommunityToolkit.Mvvm instead of ReactiveUI?▼

Yes, Avalonia 12 has first-class support for CommunityToolkit.Mvvm source generators like [ObservableProperty] and [RelayCommand], which eliminate INotifyPropertyChanged boilerplate at compile time. ReactiveUI still works and remains common in Avalonia 11 legacy projects.

Why is my Avalonia binding silently failing?▼

Runtime-resolved bindings log failures only to the debug output, so the view renders blank without an error. Enable binding diagnostics with a TraceLogSink on LogArea.Binding, and switch to compiled bindings with x:DataType so typos become build-time errors.

How do I test Avalonia views without a display?▼

Use Avalonia.Headless.XUnit to run views in-process: create the view in a headless Window, pump the dispatcher with Dispatcher.UIThread.RunJobs(), assert binding state, and trigger commands. Every critical view should have at least one such test.

When should I not use this Avalonia UI skill?▼

Skip it for backend-only changes in core or infrastructure projects, CLI tools, or any code that does not render in an Avalonia view. The patterns target user-facing XAML views, view-models, theming, and accessibility specifically.

Related Skills

Explore More Software Engineering Skills→
AbdssamieAbdssamie
2

avalonia-mvvm

Implement MVVM patterns in Avalonia apps with CommunityToolkit.Mvvm.

Community
Intermediate
dimitriRemoivilledimitriRemoiville
1

flutter-performance

Measure Flutter frame times and rebuild activity with DevTools Performance.

Community
Intermediate
dotnetdotnet
5.3k

maui-theming

Implement light/dark mode and runtime theme switching in .NET MAUI apps.

Official
Intermediate
VincentH-NetVincentH-Net
7

dotnet-livecharts2

Configure LiveCharts2 charts across .NET platforms with NuGet packages and XAML integration.

Community
Advanced