avalonia-visual-element

Creates Avalonia UI controls, dialogs, and panels following project-specific XAML and code-behind conventions.

43|30|Updated Nov 16, 2025
One-click install
npx skills add https://github.com/nikolaygekht/ballistic.calculator.app.avalonia --skill avalonia-visual-element-nikolaygekht
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: avalonia-visual-element
Source: https://github.com/nikolaygekht/ballistic.calculator.app.avalonia/tree/main/.claude/skills/avalonia-visual-element
Command: npx skills add https://github.com/nikolaygekht/ballistic.calculator.app.avalonia --skill avalonia-visual-element-nikolaygekht

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building consistent Avalonia UI elements in this project requires following strict conventions for XAML layout, dialog structure, controller architecture, and event handling. This Skill encodes all those rules so generated controls, dialogs, and panels match the project's direct-UI-access philosophy without MVVM or reactive patterns. ## Core Features & Use Cases - Standardized Dialog Layouts: Enforces the canonical dialog template with 100px label columns, DynamicResource font sizes, CenterOwner startup, and 80px buttons. - Controller/Control Architecture: Guides creation of pure C# controllers with zero Avalonia dependencies paired with thin XAML controls, including the generic-controller-plus-reflection bridge pattern. - Testing Guidance: Prescribes TDD with xUnit, Avalonia.Headless, and AwesomeAssertions for both controllers and controls. - Use Case: When asked to add an "Edit Ammunition" dialog, the Skill produces XAML following the layout table, a code-behind with PopulateFromElement/Save methods, and window state persistence wiring. ## Quick Start Create a new Avalonia dialog for editing a projectile element following the project's visual element rules.

Frequently Asked Questions about avalonia-visual-element

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an Avalonia dialog with consistent layout?

Use a Window with a ScrollViewer containing a StackPanel with Margin 20 and Spacing 10. Place inputs in a Grid with a 100px label column and star-sized control column, set FontSize to the AppFontSize DynamicResource, and add centered 80px OK/Cancel buttons.

How to build testable Avalonia controls without MVVM?

Put all logic in a pure C# controller class with no Avalonia dependencies, then keep the UserControl code-behind as a thin wrapper that calls controller methods. Controllers are unit tested directly, while controls use Avalonia.Headless with the AvaloniaFact attribute.

Can Avalonia XAML use generic type parameters on UserControl?

No, XAML does not support generic UserControls. Instead expose a Type property on the control, construct the generic controller via MakeGenericType and Activator.CreateInstance, and invoke its methods through reflection.

Why avoid StyledProperty with TwoWay binding in Avalonia controls?

TwoWay binding with StyledProperty causes circular notification loops between the control and its consumers. The recommended pattern reads values directly from UI elements on demand and raises a Changed event without storing synchronized state.

When should Min and Max values reject user input in numeric controls?

They should not. Min and Max only clamp increment and decrement operations, while typed input is parsed without range rejection. Validation belongs at the application level, not inside the control.