Added new UI composer skill content to WPF

wpf-toc.html

@@ -3,22 +3,36 @@
     <li>
         <a href="/cr/wpf"> API Reference</a>
     </li>
-	<li>
-		<a href="/wpf/skills">Skills</a>
-	</li>
     <li>
         <a href="/wpf/Welcome-to-Syncfusion-Essential-WPF">Overview</a>
     </li>
 	<li>
 	   <a href="/wpf/System-Requirements">System Requirements</a>
 	</li>
-    <li>AI Coding Assistant
-		<ul>
-			<li><a href="/wpf/ai-coding-assistant/overview">Overview</a></li>
-			<li><a href="/wpf/ai-coding-assistant/mcp-server">MCP Server</a></li>
-            <li><a href="/wpf/ai-coding-assistant/prompt-library">Prompt Library</a></li>
-		</ul> 
-	</li>
+    <li>
+        AI and Smart Tooling
+        <ul>
+            <li>
+                MCP Server
+                <ul>
+                    <li>
+                        AI Coding Assistant
+                        <ul>
+                            <li><a href="/wpf/ai-coding-assistant/overview">Overview</a></li>
+                            <li><a href="/wpf/ai-coding-assistant/mcp-server">MCP Server</a></li>
+                            <li><a href="/wpf/ai-coding-assistant/prompt-library">Prompt Library</a></li>
+                        </ul>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                Skills
+                <ul>
+                    <li><a href="/wpf/skills/component-skills">Component Skills</a></li>
+                </ul>
+            </li>
+        </ul>
+    </li>
 	<li>Installation<ul>
 	    <li>Web Installer
 	    <ul>

wpf/skills.md → wpf/skills/component-skills.md

@@ -42,7 +42,7 @@ Before installing Syncfusion<sup style="font-size:70%">&reg;</sup> WPF Agent Ski
 
 ## 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 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://www.skills.sh/syncfusion/).
 
 ### Install all skills
 
@@ -120,7 +120,7 @@ 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
 
@@ -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,196 @@
+---
+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**.
+
+![Set Agent](images/UI-Composer-Agent.png)
+
+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/)