diff --git a/wpf-toc.html b/wpf-toc.html
index 86929f61a0..f522a9116e 100644
--- a/wpf-toc.html
+++ b/wpf-toc.html
@@ -3,22 +3,36 @@
API Reference
-
- Skills
-
Overview
System Requirements
- AI Coding Assistant
-
-
+
+ AI and Smart Tooling
+
+ -
+ MCP Server
+
+ -
+ AI Coding Assistant
+
+
+
+
+ -
+ Skills
+
+
+
+
Installation
- Web Installer
diff --git a/wpf/skills.md b/wpf/skills/component-skills.md
similarity index 97%
rename from wpf/skills.md
rename to wpf/skills/component-skills.md
index e427d3b156..e60f3c7879 100644
--- a/wpf/skills.md
+++ b/wpf/skills/component-skills.md
@@ -42,7 +42,7 @@ Before installing Syncfusion® WPF Agent Ski
## Installation
-Install [Syncfusion® 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® 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® 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® 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)
\ No newline at end of file
+- [Skills CLI](https://www.skills.sh/docs)
\ No newline at end of file
diff --git a/wpf/skills/images/UI-Composer-Agent.png b/wpf/skills/images/UI-Composer-Agent.png
new file mode 100644
index 0000000000..74ff61ac52
Binary files /dev/null and b/wpf/skills/images/UI-Composer-Agent.png differ
diff --git a/wpf/skills/ui-composer-skill.md b/wpf/skills/ui-composer-skill.md
new file mode 100644
index 0000000000..eccf677b54
--- /dev/null
+++ b/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® 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/)