avalonia-layout-zafiro
Reduces XAML verbosity in Avalonia projects using semantic layout containers, themes, and generic components.
Install
mkdir -p .claude/skills/avalonia-layout-zafiro && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1729" && unzip -o skill.zip -d .claude/skills/avalonia-layout-zafiro && rm skill.zipInstalls to .claude/skills/avalonia-layout-zafiro
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy.Key capabilities
- →Implement semantic layout containers like HeaderedContainer and EdgePanel
- →Apply shared styles via axaml files to reduce redundancy
- →Use IconExtension and IconOptions for standardized icon management
- →Apply Xaml.Interaction.Behaviors to handle UI logic
- →Create generic components to avoid deep nesting
How it works
The skill provides guidelines for replacing manual layout elements with semantic containers and shared styles. It promotes the use of behaviors and generic components to minimize code-behind and XAML verbosity.
Inputs & outputs
When to use avalonia-layout-zafiro
- →Refactor nested XAML into semantic containers
- →Apply shared styles for layout
- →Implement behaviors to reduce code-behind
- →Standardize icon usage
About this skill
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.,
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.
When not to use it
- →When using hardcoded colors or sizes as literals
- →When implementing simple logic that belongs in the ViewModel
- →When creating deep nesting of Grid and StackPanel
Prerequisites
Limitations
- →Requires adherence to specific Zafiro.Avalonia container patterns
- →Avoids IValueConverter for logic that should reside in the ViewModel
How it compares
Unlike manual XAML construction, this approach enforces a structured, component-based architecture that prioritizes reusability and semantic clarity.
Compared to similar skills
avalonia-layout-zafiro side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| avalonia-layout-zafiro (this skill) | 6 | 6mo | No flags | Intermediate |
| frontend-design | 481 | 2mo | No flags | Advanced |
| screenshot-to-code | 204 | 2mo | No flags | Beginner |
| textual | 143 | 9mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by davila7
View all by davila7 →You might also like
frontend-design
anthropics
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
screenshot-to-code
OneWave-AI
Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.
textual
KyleKing
Expert guidance for building TUI (Text User Interface) applications with the Textual framework. Invoke when user asks about Textual development, TUI apps, widgets, screens, CSS styling, reactive programming, or testing Textual applications.
web-artifacts-builder
anthropics
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
radix-ui-design-system
sickn33
Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.
svelte-ui-design
XIYO
ALWAYS use this skill for ANY Svelte component styling, design, or UI work. Svelte 5 UI design system using Tailwind CSS 4, Skeleton Labs design tokens/presets/Tailwind Components, and Bits UI headless components. Covers class composition, color systems, interactive components, forms, overlays, and all visual design.