How does this skill help reduce XAML redundancy?

The skill enforces the use of shared styles and semantic containers like EdgePanel, which replace repetitive property declarations and deep nesting of Grids and StackPanels.

What is Zafiro.Avalonia?

Zafiro.Avalonia is a library that extends the Avalonia UI framework with specialized panels and components designed to simplify complex layouts and promote clean, maintainable XAML.

Why does this skill recommend Behaviors over Converters?

Behaviors provide a more declarative way to handle UI logic, keeping the View focused on structure and the ViewModel focused on data, avoiding the boilerplate of IValueConverters.

Can I use this for mobile and desktop apps?

Yes, since Avalonia UI is cross-platform, the Zafiro layout patterns provided by this skill are applicable to Windows, macOS, Linux, and mobile platforms supported by Avalonia.

Avalonia Layout with Zafiro

Name: Avalonia Layout with Zafiro
Author: claudiodearaujo

byclaudiodearaujo

0•

Design Tools

Optimizes Avalonia UI development by implementing Zafiro-based semantic containers and clean XAML architectural patterns.

This skill provides comprehensive guidelines and implementation patterns for building modern, maintainable user interfaces in Avalonia UI using the Zafiro.Avalonia library. It helps developers move away from bloated, deeply nested XAML by leveraging semantic containers like EdgePanel and HeaderedContainer, utilizing shared styles for visual consistency, and replacing brittle converters with elegant interaction behaviors. It is ideal for developers building cross-platform desktop applications who prioritize clean code and a scalable design system.

Key Features

01Strategies for minimizing XAML nesting and eliminating hardcoded literals

02Streamlined icon management using IconExtension and IconOptions

03Best practices for theme organization and shared style sheets (axaml)

040 GitHub stars

05Implementation of semantic containers like HeaderedContainer, EdgePanel, and Card

06Advanced UI logic implementation using Interaction Behaviors to replace converters

Use Cases

01Establishing a consistent design system and theme for a new cross-platform application

02Implementing complex UI interactions without polluting ViewModels with presentation logic

03Refactoring legacy Avalonia views into clean, modular Zafiro-based layouts

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro-front avalonia-layout-zafiro

For use in Claude.ai and ChatGPT

Download Skill

Key Features

01Strategies for minimizing XAML nesting and eliminating hardcoded literals

02Streamlined icon management using IconExtension and IconOptions

03Best practices for theme organization and shared style sheets (axaml)

040 GitHub stars

05Implementation of semantic containers like HeaderedContainer, EdgePanel, and Card

06Advanced UI logic implementation using Interaction Behaviors to replace converters

Use Cases

01Establishing a consistent design system and theme for a new cross-platform application

02Implementing complex UI interactions without polluting ViewModels with presentation logic

03Refactoring legacy Avalonia views into clean, modular Zafiro-based layouts

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro-front avalonia-layout-zafiro

For use in Claude.ai and ChatGPT

Download Skill