avalonia-fluent-design

Build or refine Avalonia UIs that follow Microsoft Fluent guidance with `FluentTheme`, palette customization, density tuning, Fluent shells, iconography, motion, and language-system patterns. Use for FluentTheme adoption, brand mapping onto Fluent tokens, Fluent shell design, or Fluent-specific accessibility and motion work.

Stars 57

Forks 6

Install this agent skill to your Project

npx add-skill https://github.com/wieslawsoltes/development-plugin-for-avalonia/tree/main/skills/avalonia-fluent-design

SKILL.md

Avalonia Fluent Design

Start with:

../../references/67-microsoft-fluent-design-and-fluenttheme.md
../../references/fluent-design/README.md

Load only the needed Fluent chapters:

theme bootstrap, density, and palette customization
brand or alias-token mapping
Fluent shells, controls, command surfaces, and motion
content language, onboarding, notifications, and icons

Workflow

Confirm that Fluent is the intended visual system before tuning tokens.
Start with FluentTheme bootstrap, density, and palette rules.
Apply Fluent shell, command, and motion patterns consistently across the surface.
Verify that localization, inclusive content, and mixed-input behavior still hold after styling.

Rules

Do not bolt Fluent visuals onto a conflicting token system without an explicit mapping layer.
Keep Fluent motion and materials purposeful, not ornamental.
Use the Fluent-specific lane when the request is about Fluent design, not generic styling.