avalonia-pro-max/design-system

Centralize design tokens for consistent theming across Avalonia apps.

27|2|Updated Apr 23, 2026
One-click install
npx skills add https://github.com/linuxdevel/Avalonia-skills --skill avalonia-pro-max-design-system
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: avalonia-pro-max/design-system
Source: https://github.com/linuxdevel/Avalonia-skills/tree/main/skills/avalonia/avalonia-pro-max/design-system
Command: npx skills add https://github.com/linuxdevel/Avalonia-skills --skill avalonia-pro-max-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Centralizes design tokens and theming logic to ensure visual consistency across Avalonia apps, reducing drift and repetitive manual styling.

Core Features & Use Cases

  • Layered token model (Primitives, Semantic, and Component) stored as ResourceDictionarys merged into App.axaml for runtime theming.
  • Theme dictionaries to support Light and Dark variants with dynamic resource lookups.
  • Typography, spacing, radii, and elevation tokens to enforce a scalable, accessible design system.
  • Quick-start guidance to wire tokens into views and quickly establish an identity across product lines.

Quick Start

Integrate the token dictionaries into App.axaml and reference your tokens via DynamicResource in views.

Frequently Asked Questions about avalonia-pro-max/design-system

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

FAQPage Schema
How do I set up a design token system in Avalonia for Light and Dark themes?

To set up a design token system in Avalonia, centralize Primitive, Semantic, and Component tokens into ResourceDictionarys merged via ThemeDictionaries in App.axaml. This enables dynamic resource lookups for runtime Light and Dark theme switching.

What is the best way to ensure typography and spacing consistency across Avalonia apps?

The best way to ensure typography and spacing consistency is to define scalable design tokens for fonts, spacing, radii, and elevation. Centralizing these tokens reduces visual drift and eliminates repetitive manual styling across your application views.

How do I switch between Light and Dark themes at runtime in Avalonia?

Runtime Light and Dark theme switching in Avalonia is achieved by storing token variants in ThemeDictionaries. Views reference these tokens using DynamicResource, allowing the application to update surfaces and typography instantly when the theme changes.

Can I use a three-layer token model for component styling in Avalonia?

Yes, you can use a three-layer token model in Avalonia by structuring resources into Primitive, Semantic, and Component tokens. This layered architecture allows you to scale UI components efficiently while maintaining a strict design system identity.

Do I need to manually style surfaces and component visuals when using centralized design tokens in Avalonia?

No, you do not need to manually style surfaces and component visuals. By referencing centralized design tokens via DynamicResource in your views, the theming logic automatically applies consistent styles across your Avalonia application.