What is Zafiro.Avalonia?

Zafiro.Avalonia is a specialized toolkit for Avalonia UI that provides semantic panels, layout extensions, and components designed to simplify complex XAML development.

How does this skill help reduce XAML redundancy?

It provides guidelines for using shared styles and semantic containers like HeaderedContainer, which replace repetitive Border and Grid configurations with single, declarative elements.

Why does the skill recommend Behaviors over Converters?

Behaviors allow for better separation of concerns and reusability of UI logic, keeping your ViewModels focused on data rather than visual implementation details.

Can I use this for cross-platform .NET apps?

Yes, Avalonia UI is inherently cross-platform, and this skill focuses on layouts that remain maintainable across Windows, macOS, Linux, and mobile targets.

How are icons handled with this skill?

It leverages the IconExtension and IconOptions, allowing developers to implement font-based icons (like FontAwesome) directly in XAML with simple, customizable syntax.

Avalonia Layout & Zafiro Styling

Name: Avalonia Layout & Zafiro Styling
Author: claudiodearaujo

byclaudiodearaujo

0•

Design Tools

Streamlines Avalonia UI development by implementing modern layout patterns and semantic containers using the Zafiro toolkit.

This skill provides comprehensive guidance for building clean, maintainable, and scalable cross-platform desktop applications using Avalonia UI and the Zafiro.Avalonia extension library. It focuses on reducing XAML verbosity through semantic containers like EdgePanel and HeaderedContainer, optimizing theme organization, and implementing UI logic via behaviors instead of traditional converters or code-behind. It is ideal for developers looking to standardize their frontend architecture and ensure design consistency across complex Avalonia projects while following industry-standard clean-code principles.

Key Features

01Standardizes theme organization using shared styles and DynamicResources for design consistency.

020 GitHub stars

03Promotes UI-logic best practices using Xaml.Interaction.Behaviors over IValueConverters.

04Enforces clean-code patterns by eliminating hardcoded literals and redundant XAML properties.

05Facilitates icon management via IconExtension and customizable IconOptions for scalable vector icons.

06Implements semantic containers like HeaderedContainer and EdgePanel to flatten UI nesting.

Use Cases

01Setting up a professional theme and design system for a cross-platform .NET desktop application.

02Implementing reusable UI components and behaviors to reduce boilerplate code in large XAML projects.

03Refactoring complex, deeply nested Avalonia Grid layouts into clean, semantic structures.

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

01Standardizes theme organization using shared styles and DynamicResources for design consistency.

020 GitHub stars

03Promotes UI-logic best practices using Xaml.Interaction.Behaviors over IValueConverters.

04Enforces clean-code patterns by eliminating hardcoded literals and redundant XAML properties.

05Facilitates icon management via IconExtension and customizable IconOptions for scalable vector icons.

06Implements semantic containers like HeaderedContainer and EdgePanel to flatten UI nesting.

Use Cases

01Setting up a professional theme and design system for a cross-platform .NET desktop application.

02Implementing reusable UI components and behaviors to reduce boilerplate code in large XAML projects.

03Refactoring complex, deeply nested Avalonia Grid layouts into clean, semantic structures.

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