What does the skill do when a layout task only involves icons?

It follows a selective reading rule: it reads only the files relevant to the challenge, so for icons it would read icons.md and skip the rest.

Does it replace converters entirely?

It avoids IValueConverter for simple logic that belongs in the ViewModel, preferring ViewModel properties or Behaviors unless a converter is truly necessary.

Avalonia Layout with Zafiro.Avalonia

SkillAI & models

A skill that gives an AI agent guidelines for modern Avalonia UI layout using Zafiro.Avalonia. It directs the agent to reference files covering themes, containers, icons, behaviors, and components, and enforces practices like shared styles, semantic containers, flattened layouts, and behaviors instead of converters, so the XAML it writes stays clean and maintainable.

Use Avalonia Layout with Zafiro.Avalonia in Claude, ChatGPT or Ahel Desktop

Free. Sign in, add Avalonia Layout with Zafiro.Avalonia and connect your AI. About a minute.

Claude ChatGPT Ahel Desktop

Also: Claude Code · Cursor · Codex

Then ask your AI: use the Avalonia Layout with Zafiro.Avalonia skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.

No other account needed.

Have an Avalonia project that uses the Zafiro.Avalonia library.

Avalonia Layout with Zafiro.AvaloniaStart free

What your AI can do with it

Guides theme setup and shared styles to avoid repeated properties in axaml files
Structures views with semantic containers like HeaderedContainer, EdgePanel, and Card
Adds and styles icons using IconExtension ({Icon fa-name}) and IconOptions
Implements UI logic with Xaml.Interaction.Behaviors instead of IValueConverter
Creates reusable generic components and reduces deep Grid and StackPanel nesting
Reads only the reference files relevant to the current layout challenge

Getting started

Have an Avalonia project that uses the Zafiro.Avalonia library.
Add the skill so the agent can read its reference files (themes, containers, icons, behaviors, components).
Ask the agent to build or refactor a layout; it will read only the files relevant to that task.
Optionally point the agent at an existing project as an exemplary implementation to follow.

What this skill tells your AI

The instructions your AI receives, as published by davila7/claude-code-templates in cli-tool/components/skills/development/avalonia-layout-zafiro/SKILL.md and read by ahel’s review.

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.

Signals

GitHub stars: 32k
Forks: 4k
Last commit: Oct 2026

Others that do the same job

avalonia-layout-zafiro
Skill · agent-skills-hub

Questions

What does the skill do when a layout task only involves icons?: It follows a selective reading rule: it reads only the files relevant to the challenge, so for icons it would read icons.md and skip the rest.
Does it replace converters entirely?: It avoids IValueConverter for simple logic that belongs in the ViewModel, preferring ViewModel properties or Behaviors unless a converter is truly necessary.

Advanced

Item type: skill
Key: avalonia-layout-zafiro-davila7
Source: github.com/davila7/claude-code-templates

github.com/davila7/claude-code-templates