Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy.
62%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
Passed
No findings from the security scan
Fix and improve this skill with Tessl
tessl review fix ./skills/antigravity-avalonia-layout-zafiro/SKILL.mdThe canonical home for this skill is avalonia-layout-zafiro in sickn33/agentic-awesome-skills
Master modern, clean, and maintainable Avalonia UI layouts. Focus on semantic containers, shared styles, and minimal XAML.
Read ONLY files relevant to the layout challenge!
The five guides below are bundled; the author-local Angor solution is not. Examples are partial and need the actual Avalonia/Zafiro/package versions and XML namespace declarations; UntouchedClassBehavior and icon resources must exist in that installation. Do not assume MultiBinding supplies logical And/Or without a suitable converter, or merge style files as ResourceDictionary resources when they contain Styles. Use StyleInclude for style collections and ResourceInclude for resource dictionaries as appropriate to the file root. Keep icons accessible, preserve focus/keyboard behavior and test light/dark themes, text scaling and localization. Avoiding converters/code-behind is a design preference, not a universal correctness or performance rule.
| 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 |
For a real-world example, refer to the Angor project:
/mnt/fast/Repos/angor/src/Angor/Avalonia/Angor.Avalonia.sln
HeaderedContainer instead of Border with manual header)axaml files.EdgePanel or generic components.{Icon fa-name} and IconOptions for styling.Interaction.Behaviors for UI-logic.DON'T:
Grid and StackPanel.IValueConverter for simple logic that belongs in the ViewModel.DO:
DynamicResource for colors and brushes.Zafiro.Avalonia specific panels like EdgePanel for common UI patterns.This skill is applicable to execute the workflow or actions described in the overview.
boisenoise/skills-collections
aa13ba9
Canonical home
since Jan 28, 2026
Also appears in
last in sync Apr 16, 2026
last in sync Apr 16, 2026
last in sync Apr 16, 2026
last in sync Mar 4, 2026
last in sync Mar 4, 2026
last in sync Mar 4, 2026
last in sync Jan 28, 2026
last in sync Jan 28, 2026
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.