
Avalonia Layout with Zafiro
FreeStreamline your Avalonia UI layouts with best practices.
Free ยท Opens the source repo
What Avalonia Layout with Zafiro does
Avalonia Layout with Zafiro.Avalonia provides a structured approach to creating modern user interfaces using Avalonia UI. This skill emphasizes the use of semantic containers and shared styles, which helps developers avoid redundancy in XAML code. By following the guidelines laid out in the bundled documentation, users can create clean, maintainable layouts that improve the overall user experience of their applications.
The skill includes a comprehensive content map that guides users through various aspects of layout design. Each file contains targeted information that addresses specific layout challenges. For instance, themes.md focuses on organizing themes and shared styles, while containers.md introduces semantic containers like HeaderedContainer and EdgePanel that enhance view structure. This modular approach allows developers to read only the sections relevant to their current tasks, making it efficient and user-friendly.
Additionally, the skill encourages best practices through a checklist that helps ensure clean layouts. Developers are advised to use semantic containers, minimize nesting, and favor behaviors over traditional code-behind for UI logic. This not only leads to better performance but also makes the codebase easier to understand and maintain. Anti-patterns are clearly outlined, providing a clear distinction between effective and ineffective practices in Avalonia UI development.
Overall, Avalonia Layout with Zafiro is ideal for developers looking to improve their UI design skills and create more effective layouts in Avalonia applications. The structured guidelines and practical examples serve as a valuable resource for both new and experienced developers.
When to use it
Use this skill when designing user interfaces in Avalonia that require a structured and efficient layout approach.
When not to use it
This skill may not be suitable for projects that do not use Avalonia UI or for those that require highly customized layouts that deviate from standard practices.
What you can build with it
Creating a Themed Application
Use the `themes.md` file to set up and refine app themes, ensuring a consistent look across your application.
Structuring Complex Views
Refer to `containers.md` for guidance on using semantic containers to structure complex views effectively.
Implementing Iconography
Utilize the `icons.md` file to learn how to add and customize icons in your Avalonia application using the `IconExtension`.
How to install Avalonia Layout with Zafiro
View source1. Install with the skills CLI
npx skills add davila7/claude-code-templates/avalonia-layout-zafiro --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by davila7Avalonia 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.,
HeaderedContainerinstead ofBorderwith manual header) - Avoided redundant properties? Use shared styles in
axamlfiles. - Minimized nesting? Flatten layouts using
EdgePanelor generic components. - Icons via extension? Use
{Icon fa-name}andIconOptionsfor styling. - Behaviors over code-behind? Use
Interaction.Behaviorsfor 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
GridandStackPanel. - Repeat visual properties across multiple elements (use Styles).
- Use
IValueConverterfor simple logic that belongs in the ViewModel.
DO:
- Use
DynamicResourcefor colors and brushes. - Extract repeated layouts into generic components.
- Leverage
Zafiro.Avaloniaspecific panels likeEdgePanelfor common UI patterns.
Frequently asked questions about Avalonia Layout with Zafiro
Similar skills
Playwright Component Testing
Test React and Vue components in isolation with Playwright.
Fluent UI Blazor
Integrate Fluent UI components in Blazor applications effortlessly.
Build MCP App
Create interactive UI widgets for MCP servers.
Web Design Reviewer
Identify and fix design issues in websites efficiently.
Markstream Install
Seamlessly integrate Markstream for Markdown rendering.
GSAP & Framer Scroll Animation
Create advanced scroll animations effortlessly.
