New to Claude Skills? Learn how to install them โ†’

davila7 on GitHub

Avalonia Layout with Zafiro

Free

Streamline your Avalonia UI layouts with best practices.

Get this skill

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 source

1. Install with the skills CLI

npx skills add davila7/claude-code-templates/avalonia-layout-zafiro --agent claude-code

2. 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 davila7

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

FileDescriptionWhen to Read
themes.mdTheme organization and shared stylesSetting up or refining app themes
containers.mdSemantic containers (HeaderedContainer, EdgePanel, Card)Structuring views and layouts
icons.mdIcon usage with IconExtension and IconOptionsAdding and customizing icons
behaviors.mdXaml.Interaction.Behaviors and avoiding ConvertersImplementing complex interactions
components.mdGeneric components and avoiding nestingCreating 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.

Frequently asked questions about Avalonia Layout with Zafiro

Similar skills