What are semantic containers in this context?

They are specialized layout controls like EdgePanel and HeaderedContainer that provide clearer structural meaning than basic Grids or Borders.

How does this skill help with Avalonia UI layout?

It provides specific patterns and rules for using Zafiro.Avalonia, emphasizing the use of semantic containers and shared styles to reduce XAML bloat.

Why does the skill recommend avoiding IValueConverters?

It promotes cleaner architecture by suggesting that simple logic should live in the ViewModel or be handled via XAML Behaviors.

Can this skill help with icon management?

Yes, it provides guidelines for using IconExtension and IconOptions for consistent and easy-to-style iconography across the application.

Avalonia UI Layout with Zafiro

Name: Avalonia UI Layout with Zafiro
Author: claudiodearaujo

byclaudiodearaujo

0•

Design Tools

Optimizes Avalonia UI development using Zafiro.Avalonia to create clean, maintainable, and semantic XAML layouts.

This skill provides specialized guidance for building modern, professional cross-platform applications with Avalonia UI and the Zafiro.Avalonia library. It helps developers move away from deeply nested Grids and redundant XAML properties by implementing semantic containers like EdgePanel and HeaderedContainer. By enforcing best practices such as shared styles, behavior-driven UI logic, and icon extensions, the skill ensures that your UI code remains scalable, readable, and free from common anti-patterns like hardcoded literals and unnecessary value converters.

Key Features

01Streamlined icon usage with IconExtension and styling options

02Transitioning from complex Converters to XAML Interaction Behaviors

03Flattening of UI hierarchies to improve layout performance and readability

04Implementation of semantic containers like HeaderedContainer and EdgePanel

050 GitHub stars

06Shared style organization to eliminate redundant XAML code

Use Cases

01Refactoring legacy Avalonia XAML into modern, style-driven layouts

02Building consistent, theme-aware UI components using Zafiro patterns

03Implementing complex UI interactions without polluting the code-behind

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/izacenter avalonia-layout-zafiro

For use in Claude.ai and ChatGPT

Download Skill