← ClaudeAtlas

avalonia-layout-zafirolisted

Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy.
aiskillstore/marketplace · ★ 334 · Web & Frontend · score 83
Install: claude install-skill aiskillstore/marketplace
# 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