diff --git a/wpf-toc.html b/wpf-toc.html index 86929f61a0..6c899adab4 100644 --- a/wpf-toc.html +++ b/wpf-toc.html @@ -3,9 +3,12 @@
  • API Reference
    • -
  • - Skills -
    • +
  • Skills + +
  • Overview
    • diff --git a/wpf/skills.md b/wpf/skills/control-skills.md similarity index 76% rename from wpf/skills.md rename to wpf/skills/control-skills.md index e427d3b156..d438921d98 100644 --- a/wpf/skills.md +++ b/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® 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® Code Studio, Cursor, etc.) ## Key Benefits -**Component Usage & API Knowledge** -- Accurate guidance for adding and configuring Syncfusion® WPF components +**Control Usage & API Knowledge** +- Accurate guidance for adding and configuring Syncfusion® 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® 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® WPF controls ## 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 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,15 +120,15 @@ 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 -1. **Reads relevant Skill files based on queries**, retrieving component usage patterns, APIs, and best‑practice guidance from installed Syncfusion® 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® 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® 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. @@ -136,9 +136,9 @@ To learn more about the Skills CLI, refer [here](https://skills.sh/docs). Once skills are installed, the assistant can be used to generate and update Syncfusion® 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) \ No newline at end of file +- [Skills CLI](https://www.skills.sh/docs) \ No newline at end of file diff --git a/wpf/skills/ui-composer-skill.md b/wpf/skills/ui-composer-skill.md new file mode 100644 index 0000000000..56d4b74169 --- /dev/null +++ b/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® 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/)