Added new UI composer skill content to WPF

wpf-toc.html

@@ -3,9 +3,12 @@
     <li>
         <a href="/cr/wpf"> API Reference</a>
     </li>
-	<li>
-		<a href="/wpf/skills">Skills</a>
-	</li>
+	<li>Skills
+        <ul>
+            <li><a href="/wpf/skills/control-skills">Control Skills</a></li>
+            <li><a href="/wpf/skills/ui-composer-skill">WPF UI Composer Skill</a></li>
+        </ul>
+    </li>
     <li>
         <a href="/wpf/Welcome-to-Syncfusion-Essential-WPF">Overview</a>
     </li>

wpf/skills.md → wpf/skills/control-skills.md

@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Syncfusion WPF Agent Skills for AI Assistants | Syncfusion
-description: Learn how to install and use Syncfusion Agent Skills to enhance AI assistants with accurate Syncfusion WPF component guidance.
+description: Learn how to install and use Syncfusion Agent Skills to enhance AI assistants with accurate Syncfusion WPF control guidance.
 control: Skills
 platform: wpf
 documentation: ug
@@ -12,41 +12,41 @@ domainurl: ##DomainURL##
 
 This guide introduces **Syncfusion WPF Skills**, a knowledge package that enables AI assistants (VS Code, Cursor, CodeStudio, etc.) to understand and generate accurate WPF code using official APIs, patterns, and theming guidelines.
 
-These skills eliminate common issues with generic AI suggestions by grounding the assistant in accurate component usage patterns, API structures, supported features, and project‑specific configuration.
+These skills eliminate common issues with generic AI suggestions by grounding the assistant in accurate control usage patterns, API structures, supported features, and project‑specific configuration.
 
 ## Prerequisites
 
 Before installing Syncfusion<sup style="font-size:70%">&reg;</sup> WPF Agent Skills, ensure the following:
 
-- Required [Node.js](https://nodejs.org/en/) version >= 16
+- Required [.NET SDK](https://dotnet.microsoft.com/en-us/download) version >= 6
 - WPF application (existing or new); see [Overview](https://help.syncfusion.com/wpf/welcome-to-syncfusion-essential-wpf)
 - A supported AI agent or IDE that integrates with the Skills CLI (VS Code, Syncfusion<sup style="font-size:70%">&reg;</sup> Code Studio, Cursor, etc.)
 
 ## Key Benefits
 
-**Component Usage & API Knowledge**
-- Accurate guidance for adding and configuring Syncfusion<sup style="font-size:70%">&reg;</sup> WPF components
+**Control Usage & API Knowledge**
+- Accurate guidance for adding and configuring Syncfusion<sup style="font-size:70%">&reg;</sup> WPF controls
 - Component‑specific props, events, and required feature modules
 - Guidance for injecting services/modules (where applicable)
 
 **Patterns & Best Practices**
 - Recommended API structures and composition patterns
-- State‑handling approaches for common scenarios
+- Event handling and XAML binding approaches for common scenarios
 - Feature‑injection workflows (for example, paging, sorting, filtering)
 - All guidance is authored directly in Skill files and does not rely on external documentation fetches
 
 **Design‑System Guidance**
-- Theme usage, including light and dark variants
-- Styling and icon usage patterns
-- Consistent design alignment across Syncfusion<sup style="font-size:70%">&reg;</sup> WPF components
+- WPF theme support including modern themes (FluentLight, FluentDark, Material3Light, Material3Dark, Windows11Light, Windows11Dark) and classic themes (Office2019Colorful, Office2019Black, Office2019White)
+- Styling and ResourceDictionary usage patterns for theme integration
+- Consistent design alignment across Syncfusion<sup style="font-size:70%">&reg;</sup> WPF controls
 
 ## Installation
 
-Install [Syncfusion<sup style="font-size:70%">&reg;</sup> WPF components skills](https://github.com/syncfusion/wpf-ui-components-skills.git) using the Skills CLI. Users can also explore available skills from the [marketplace](https://skills.sh/syncfusion/).
+Install [Syncfusion<sup style="font-size:70%">&reg;</sup> WPF controls skills](https://github.com/syncfusion/wpf-ui-components-skills.git) using the Skills CLI. Users can also explore available skills from the [marketplace](https://www.skills.sh/syncfusion/).
 
 ### Install all skills
 
-Use the following command to install all component skills at once in the `.agents/skills` directory:
+Use the following command to install all control skills at once in the `.agents/skills` directory:
 
 {% tabs %}
 {% highlight bash tabtitle="NPM" %}
@@ -120,25 +120,25 @@ Choose your installation scope (project-level or global), then confirm to comple
 
 This registers the Syncfusion<sup style="font-size:70%">&reg;</sup> skill pack so that AI assistants can automatically load it in supported IDEs such as [Code Studio](https://help.syncfusion.com/code-studio/reference/configure-properties/skills), [Visual Studio Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills), and [Cursor](https://cursor.com/docs/skills).
 
-To learn more about the Skills CLI, refer [here](https://skills.sh/docs).
+To learn more about the Skills CLI, refer [here](https://www.skills.sh/docs).
 
 ## How Syncfusion<sup style="font-size:70%">&reg;</sup> Agent Skills Work
 
-1. **Reads relevant Skill files based on queries**, retrieving component usage patterns, APIs, and best‑practice guidance from installed Syncfusion<sup style="font-size:70%">&reg;</sup> Skills. The assistant initially loads only skill names and descriptions, then dynamically loads the required skill and reference files as needed to provide accurate Syncfusion guidance.
+1. **Reads relevant Skill files based on queries**, retrieving control usage patterns, APIs, and best‑practice guidance from installed Syncfusion<sup style="font-size:70%">&reg;</sup> Skills. The assistant initially loads only skill names and descriptions, then dynamically loads the required skill and reference files as needed to provide accurate Syncfusion guidance.
 2. **Enforces Syncfusion<sup style="font-size:70%">&reg;</sup> best practices**, including:
 
-   - Using the required feature modules for each component.
-   - Injecting applicable component modules (for example, paging, sorting, filtering, and other feature modules).
+   - Using the required feature modules for each control.
+   - Injecting applicable control modules (for example, paging, sorting, filtering, and other feature modules).
    - Adding the correct theme and style imports.
 3. **Generates component‑accurate code**, avoiding invalid props or unsupported patterns.
 
 ### Using the AI Assistant
 
 Once skills are installed, the assistant can be used to generate and update Syncfusion<sup style="font-size:70%">&reg;</sup> WPF code for tasks such as:
 
-- “Add a DataGrid with paging, sorting, and filtering.”
-- “Create a chart with 3 line series and enable data labels and legends.”
-- “Apply Windows 11 light theme."
+- "Add a DataGrid with paging, sorting, and filtering features."
+- "Create a Bar chart with multiple series and enable data labels."
+- "Apply the FluentLight theme to all Syncfusion controls using SfSkinManager."
 
 ## Skills CLI Commands
 
@@ -211,4 +211,4 @@ Verify that skills are installed in the correct agent directory, restart the IDE
 ## See also
 
 - [Agent Skills Standards](https://agentskills.io/home)
-- [Skills CLI](https://skills.sh/docs)
+- [Skills CLI](https://www.skills.sh/docs)

wpf/skills/ui-composer-skill.md

@@ -0,0 +1,194 @@
+---
+layout: post
+title: Syncfusion® WPF UI Composer Skill for AI Assistants | Syncfusion®
+description: Install Syncfusion® WPF UI Composer to generate production-ready WPF controls from natural-language prompts.
+control: Skills
+platform: wpf
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Syncfusion® WPF UI Composer Skill for AI Assistants
+
+**Syncfusion® WPF UI Composer** is an AI-powered skill and companion agent that accelerates WPF application development by transforming natural-language UI requirements into production-ready controls using Syncfusion® WPF libraries. 
+
+Integrated with your AI-powered IDE, it leverages deep knowledge of **Syncfusion® controls** to deliver accurate and ready-to-use code.
+By combining intelligent code generation with best practices, accessibility standards, and design-system consistency, WPF UI Composer helps you rapidly build scalable dashboards and user interfaces without leaving your development workflow.
+
+## Prerequisites
+
+Before installing WPF UI Composer, ensure the following:
+
+- Install [APM (Agent Package Manager)](https://microsoft.github.io/apm/getting-started/installation/#quick-install-recommended)
+- Required [.NET SDK](https://dotnet.microsoft.com/en-us/download) version ≥ 6
+- WPF application (existing or new); see [Overview](https://help.syncfusion.com/wpf/welcome-to-syncfusion-essential-wpf)
+- A supported AI agent or IDE that integrates with the Skills (VS Code, Cursor, Syncfusion® Code Studio, etc.)
+- Active Syncfusion<sup style="font-size:70%">&reg;</sup> license(any of the following):  
+  - [Commercial](https://www.syncfusion.com/sales/unlimitedlicense)  
+  - [Community License](https://www.syncfusion.com/products/communitylicense)  
+  - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials)
+
+## Key Benefits
+
+### **AI-Driven UI Generation**
+- Converts prompts into complete WPF components—not just snippets
+- Automatically selects appropriate Syncfusion® controls and features
+- Produces structured, maintainable code
+
+### **Control Usage & API Accuracy**
+- Uses correct Syncfusion® control APIs
+- Injects required feature modules (paging, sorting, filtering, etc.)
+- Avoids unsupported or deprecated patterns
+
+### **Patterns & Best Practices**
+- Recommended control composition and state management
+- Event handling aligned with WPF standards
+- Secure and scalable coding patterns
+
+### **Accessibility & Responsiveness**
+- Windows accessibility guidelines (UIA) and narrator support
+- Well-structured XAML markup with proper control hierarchy
+- DPI awareness and high-resolution display support
+
+### **Design-System Integration**
+- Supports Syncfusion® WPF themes including FluentLight/Dark, Material3Light/Dark, Windows11Light/Dark, and Office2019 variants
+- Ensures consistent Syncfusion® styling, theme usage, and ResourceDictionary configuration
+
+## Installation
+
+Before installing WPF UI Composer, ensure that APM (Agent Package Manager) is installed and available in your environment.
+
+### Verify APM Installation
+
+Run the following command to confirm APM is installed:
+
+```bash
+apm --version
+```
+
+### Install the Syncfusion® WPF UI Composer package using APM
+
+Use the APM CLI to install the WPF UI Composer skill for your preferred environment:
+
+{% tabs %}
+{% highlight bash tabtitle="Copilot" %}
+
+apm install syncfusion/wpf-ui-composer -t copilot
+
+{% endhighlight %}
+{% highlight bash tabtitle="Cursor" %}
+
+apm install syncfusion/wpf-ui-composer -t cursor
+
+{% endhighlight %}
+{% highlight bash tabtitle="Code Studio" %}
+
+apm install syncfusion/wpf-ui-composer -t copilot
+
+{% endhighlight %}
+{% highlight bash tabtitle="Claude" %}
+
+apm install syncfusion/wpf-ui-composer -t claude
+
+{% endhighlight %}
+{% endtabs %}
+
+After installation, the following artifacts are added to your project for the GitHub Copilot target:
+
+- `.agent/skills/` – contains the skill files
+- `.github/agents/` – contains the agent configuration
+
+Refer to the [documentation](https://microsoft.github.io/apm/reference/cli/targets/#detection-signals) for details about supported deployment targets.
+
+> For Syncfusion® Code Studio, use the Copilot command above to install the WPF UI Composer.
+
+## How the Syncfusion® WPF UI Composer Skill Works
+
+1. **Intent Analysis** — Parse the user's prompt to identify control types and high-level layout intent.
+2. **Project Detection** — Automatically detects project framework and existing themes.
+3. **Control Mapping** — Map intent to Syncfusion® controls and required feature modules.
+4. **Theming & Design System**  
+   Load required theming guidelines and confirm key design choices:
+   - Syncfusion® WPF theme (FluentLight, FluentDark, Material3Light, Material3Dark, Windows11Light, Windows11Dark, Office2019 variants)
+   - Core design basics (colors, spacing, typography, accessibility)
+5. **Code Generation** — Produce WPF XAML controls, data bindings, and styling.
+6. **Dependency Management** — Recommend or install required Syncfusion® packages and peer dependencies.
+7. **Validation** — Run accessibility and basic security checks, request confirmation for changes.
+8. **Code Insertion** — Create files or patch existing files following project structure and conventions.
+
+Key enforcement points:
+
+- Adds correct theme resources and ResourceDictionary configuration for chosen Syncfusion® themes
+- Injects only the feature modules required by generated controls
+- Generates well-structured XAML with proper accessibility support (UIA and narrator)
+- Avoids unsupported or deprecated API usages for Syncfusion® controls
+
+> The assistant handles most stages automatically and may request confirmation where required.
+
+## Using the AI Assistant
+
+After installing WPF UI Composer with APM, the relevant agent and skill files are added to your project under:
+
+- `.agent/skills/` (skill files)
+- `.github/agents/` (WPF UI composer agent configuration, based on the selected target)
+
+To start using the skill:
+
+1. Open your supported IDE.
+2. In the chat panel, select the `syncfusion-wpf-ui-composer` agent from the **Agent dropdown**.
+
+3. Start prompting the agent with a clear description of your UI requirements.
+
+Examples Prompts:
+
+{% promptcards %}
+{% promptcard Authentication %}
+Create a login window with the FluentLight theme using a centered StackPanel containing TextBox controls for email and password with validation. Include a CheckBox for "Remember Me", a Hyperlink for "Forgot Password?", and a primary Button for login. Add a secondary Button for "Create Account" below. Use proper XAML binding and command patterns.
+{% endpromptcard %}
+{% promptcard Admin Dashboard %}
+Create a CMS Admin Dashboard UI featuring a collapsible NavigationView with items for Dashboard, Content, Users, Analytics, and Settings; a CommandBar header showing the title "CMS Admin Dashboard" with a user profile section; and a main content area with a Grid layout including three compact summary cards displaying Total Content, Total Users, and Active Sessions (each with label, icon, count value, and percentage change), followed by a "Content Management" section with a DataGrid with columns for Title, Author, Status, Date, and Actions (with Edit and Delete buttons), 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.
+{% endpromptcard %}
+{% endpromptcards %}
+
+Generated code follows best practices with well-structured XAML markup, proper event wiring and binding setup, strong C# typing, DPI awareness, and built-in security measures such as input validation and safe data handling.
+
+## Best Practices
+
+Follow these guidelines to get the most out of UI Composer and ensure high-quality production-ready result:
+
+- **Stay consistent** — Maintain consistent naming conventions (PascalCase for classes, camelCase for variables), control hierarchies, and XAML patterns throughout your project.
+- **Use advanced AI models** — For best results, use **Claude Sonnet 4.6 or higher** capability models to produce better code quality and more accurate implementations.
+- **Visual Studio designer testing** — Generated XAML code should be compatible with Visual Studio designer; validate layouts visually and ensure proper control initialization.
+- **Accessibility validation** — Test generated controls with Windows Narrator and Inspect tool (UIA) to ensure full accessibility support for keyboard navigation and screen readers.
+- **DPI awareness** — Test on high-resolution displays and ensure all controls scale properly and maintain visual fidelity.
+- **Review all content and assets before production** — Validate the logic, security, and compatibility with your existing code and Syncfusion® licensing before deployment.
+
+## Troubleshooting
+
+- **APM installation failure**: Refer to this [documentation](https://microsoft.github.io/apm/getting-started/installation/#troubleshooting)
+
+- **Skills not loading**: Ensure the **.agent/** and **.github/agents/** folders exist in your project and that the skill was installed successfully using APM. Verify that the correct agent is selected from the Agent dropdown in your IDE.
+
+- **Control not rendering**: Retry generation using the specific control skill to resolve the issue, and ensure required Syncfusion® packages and themes are properly configured.
+
+- **Syncfusion license banner appears**: Use the licensing skill to correctly register and validate your Syncfusion® license key in the application.
+
+
+## FAQ
+
+**Which agents/IDEs are supported?**
+Any Skills-compatible agent that reads local skill files (Code Studio, VS Code, Cursor, etc.).
+
+**Are skills loaded automatically?**  
+Yes. Supported agents automatically load relevant skills based on your query.
+
+**Can I customize the generated styles?**
+Yes — the generated WPF controls include clear integration points for style adjustments.
+
+**Does it modify files automatically?**
+The skill proposes changes and requires confirmation for insertion; automatic dependency installation may be offered depending on agent permissions.
+
+## See also
+
+- [Agent Skills Standards](https://agentskills.io/home)
+- [Agent Package Manager](https://microsoft.github.io/apm/getting-started/quick-start/)