Awesome-omni-skill avalonia-layout-zafiro

Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy.

install

source · Clone the upstream repo

git clone https://github.com/diegosouzapw/awesome-omni-skill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/design/avalonia-layout-zafiro" ~/.claude/skills/diegosouzapw-awesome-omni-skill-avalonia-layout-zafiro && rm -rf "$T"

manifest: skills/design/avalonia-layout-zafiro/SKILL.md

source content

Avalonia Layout with Zafiro.Avalonia

Master modern, clean, and maintainable Avalonia UI layouts. Focus on semantic containers, shared styles, and minimal XAML.

🎯 Selective Reading Rule

Read ONLY files relevant to the layout challenge!

📑 Content Map

File	Description	When to Read
`themes.md`	Theme organization and shared styles	Setting up or refining app themes
`containers.md`	Semantic containers ( `HeaderedContainer` , `EdgePanel` , `Card` )	Structuring views and layouts
`icons.md`	Icon usage with `IconExtension` and `IconOptions`	Adding and customizing icons
`behaviors.md`	`Xaml.Interaction.Behaviors` and avoiding Converters	Implementing complex interactions
`components.md`	Generic components and avoiding nesting	Creating reusable UI elements

🔗 Related Project (Exemplary Implementation)

For a real-world example, refer to the Angor project:

/mnt/fast/Repos/angor/src/Angor/Avalonia/Angor.Avalonia.sln

✅ Checklist for Clean Layouts

Used semantic containers? (e.g.,
```
HeaderedContainer
```
instead of
```
Border
```
with manual header)
Avoided redundant properties? Use shared styles in
```
axaml
```
files.
Minimized nesting? Flatten layouts using
```
EdgePanel
```
or generic components.
Icons via extension? Use
```
{Icon fa-name}
```
and
```
IconOptions
```
for styling.
Behaviors over code-behind? Use
```
Interaction.Behaviors
```
for UI-logic.
Avoided Converters? Prefer ViewModel properties or Behaviors unless necessary.

❌ Anti-Patterns

DON'T:

Use hardcoded colors or sizes (literals) in views.
Create deep nesting of
```
Grid
```
and
```
StackPanel
```
.
Repeat visual properties across multiple elements (use Styles).
Use
```
IValueConverter
```
for simple logic that belongs in the ViewModel.

DO:

Use
```
DynamicResource
```
for colors and brushes.
Extract repeated layouts into generic components.
Leverage
```
Zafiro.Avalonia
```
specific panels like
```
EdgePanel
```
for common UI patterns.

When to Use

This skill is applicable to execute the workflow or actions described in the overview.