Refactor Avalonia UI Layouts with Zafiro

This skill covers building modern, clean, maintainable Avalonia UI layouts using Zafiro.Avalonia, focused on semantic containers, shared styles, and minimal XAML. It's organized as a selective content map read only as needed: themes.md (theme organization and shared styles), containers.md (semantic containers like HeaderedContainer, EdgePanel, Card), icons.md (icon usage via IconExtension and IconOptions), behaviors.md (Xaml.Interaction.Behaviors and avoiding Converters), and components.md (generic reusable components, avoiding excessive nesting). A real-world reference implementation is pointed to in the Angor project's Avalonia solution.

Its clean-layout checklist: use semantic containers (e.g. HeaderedContainer instead of a Border with a manually built header), avoid redundant properties by using shared styles in axaml files, minimize nesting by flattening layouts with EdgePanel or generic components, add icons via the {Icon fa-name} extension with IconOptions for styling, prefer Interaction.Behaviors over code-behind for UI logic, and avoid IValueConverter for simple logic that belongs in the ViewModel instead.

Anti-patterns flagged: hardcoded colors/sizes as literals in views (use DynamicResource instead), deep nesting of Grid and StackPanel, repeating visual properties across elements instead of using Styles, and reaching for IValueConverter when a ViewModel property or Behavior would do.

Use this when structuring or refining Avalonia UI views and layouts, setting up or adjusting app themes, adding icons, or implementing UI interactions/behaviors in an Avalonia + Zafiro.Avalonia project.

Not applicable outside Avalonia/Zafiro.Avalonia, and not for ViewModel-side business logic - this skill is specifically about view/layout structure, not application logic.

Inputs: the specific layout challenge at hand (theming, container structure, icons, or interaction behaviors).

Outputs: XAML using semantic Zafiro.Avalonia containers, shared styles instead of repeated inline properties, flattened layouts via EdgePanel or generic components, extension-based icon usage, and Behavior-based interactions instead of Converters or code-behind.

Avalonia UI, Zafiro.Avalonia (semantic containers, panels), Xaml.Interaction.Behaviors, with the Angor project's Avalonia solution as a reference implementation.

.NET developers building Avalonia UIs with Zafiro.Avalonia who need concrete do/don't guidance for clean, maintainable, minimally-nested XAML layouts.