You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: winui/skills/ui-builder-skill.md
+16-6Lines changed: 16 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -53,8 +53,11 @@ Before installing WinUI UI Builder, ensure the following:
53
53
- High DPI awareness and resolution support
54
54
55
55
### **Design-System Integration**
56
-
- Supports Syncfusion® WinUI themes (Fluent Light, Fluent Dark, Material Light, Material Dark, etc.)
57
-
- ResourceDictionary-based theming for consistent styling across applications
56
+
- Supports Syncfusion® WinUI **Light** and **Dark** themes for consistent styling
57
+
- Applies themes at application level via `RequestedTheme` property (set in App.xaml) or at individual control level
58
+
- ResourceDictionary-based theming with customizable theme resource keys for advanced styling
59
+
- Respects system theme settings when `RequestedTheme` is not explicitly configured
60
+
- Ensures theme inheritance across nested UI elements for visual consistency
58
61
- Ensures consistent Syncfusion® styling and theme usage
59
62
60
63
## Installation
@@ -112,17 +115,24 @@ Refer to the [documentation](https://microsoft.github.io/apm/reference/cli/targe
112
115
3.**Control Mapping** — Map intent to Syncfusion® WinUI controls and required feature modules.
113
116
4.**Theming & Design System**
114
117
Load required theming guidelines and confirm key design choices:
115
-
- Syncfusion® theme (Fluent Light, Fluent Dark, Material Light, Material Dark, etc.)
118
+
- Syncfusion® WinUI Themes: Supports **Light** and **Dark** themes for visual consistency across Windows applications
119
+
- Application-level theming via `RequestedTheme` property (set in App.xaml or individual framework elements)
120
+
- Theme resource customization using ResourceDictionary keys for advanced styling
121
+
- Ensures theme inheritance across nested UI elements when `RequestedTheme` is applied to parent elements
116
122
- Core design basics (colors, fonts, control appearance, DPI awareness)
117
-
- Light and Dark mode support
123
+
- Light and Dark mode support with automatic theme resource file reference
118
124
5.**Code Generation** — Produce C# and XAML WinUI controls, data bindings, event handlers, and styling.
119
125
6.**Dependency Management** — Recommend or install required Syncfusion® NuGet packages and .NET dependencies.
120
126
7.**Validation** — Run code compatibility and basic security checks, request confirmation for changes.
121
127
8.**Code Insertion** — Create Page/Window classes, User Controls, or patch existing files following WinUI conventions.
122
128
123
129
Key enforcement points:
124
130
125
-
- Adds correct theme ResourceDictionaries and styling configuration for chosen Syncfusion® themes
131
+
- Adds correct theme ResourceDictionaries and styling configuration for chosen Syncfusion® themes (Light or Dark)
132
+
- Applies themes at application level using `RequestedTheme` property in App.xaml, or at individual control level
133
+
- Leverages Syncfusion® theme resource files from [GitHub repository](https://github.com/syncfusion/winui-controls-theme-resource-files) for customization
134
+
- Supports custom theme resource keys (e.g., `SyncfusionRibbonTabMenuButtonBackground`) for advanced styling at application root level
135
+
- Ensures theme consistency respects system settings when `RequestedTheme` is not explicitly set
126
136
- Injects only the feature controls and behaviors required by generated controls
127
137
- Generates well-structured XAML markup with proper binding and command setup
128
138
- Follows WinUI patterns for control initialization and event handling
@@ -151,7 +161,7 @@ Examples Prompts:
151
161
152
162
{% promptcards %}
153
163
{% promptcard Authentication %}
154
-
Create a login page using the Fluent Light theme with a centered StackPanel containing email and password TextBox controls with validation. Include a "Remember Me" CheckBox, a forgot password Hyperlink, and a primary login Button. Add a secondary "Create Account" button below. Ensure the layout is well-organized and follows Windows desktop UI standards.
164
+
Create a login page using the Light theme with a centered StackPanel containing email and password TextBox controls with validation. Include a "Remember Me" CheckBox, a forgot password Hyperlink, and a primary login Button. Add a secondary "Create Account" button below. Ensure the layout is well-organized and follows Windows desktop UI standards.
155
165
{% endpromptcard %}
156
166
{% promptcard Admin Dashboard %}
157
167
Create a CMS Admin Dashboard UI featuring a collapsible NavigationView in a left panel with menu items for Dashboard, Content, Users, Analytics, and Settings; a CommandBar header showing the title "CMS Admin Dashboard" on the left and user information on the right; and a main content area with a Grid layout containing three summary cards in a row displaying Total Content, Total Users, and Active Sessions (each showing a label, count value, and percentage change), followed by a "Content Management" section with a DataGrid containing columns for Title, Author, Status, Date, and Actions, and finally two charts displayed side by side—a bar chart titled "Content Over Time" and a pie chart titled "Content by Category"—using realistic sample data.
0 commit comments