lingxling/avalonia-layout-zafiro
Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy.
npx skills add https://github.com/lingxling/awesome-skills-cn --skill avalonia-layout-zafiro
> 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!
| 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.
Take lingxling/avalonia-layout-zafiro from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.