Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions wpf-toc.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
<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>
Expand Down
214 changes: 214 additions & 0 deletions wpf/skills.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,214 @@
---
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.
control: Skills
platform: wpf
documentation: ug
domainurl: ##DomainURL##
---

# Syncfusion WPF Agent Skills for AI Assistants

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.

## 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
- 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
- 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
- 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

## 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 all skills

Use the following command to install all component skills at once in the `.agents/skills` directory:

{% tabs %}
{% highlight bash tabtitle="NPM" %}

npx skills add syncfusion/wpf-ui-components-skills -y

{% endhighlight %}
{% endtabs %}

### Install selected skills

Use the following command to install skills interactively:

{% tabs %}
{% highlight bash tabtitle="NPM" %}

npx skills add syncfusion/wpf-ui-components-skills

{% endhighlight %}
{% endtabs %}

The terminal will display a list of available skills. Use the arrow keys to navigate, the space bar to select the desired skills, and the Enter key to confirm.
{% tabs %}
{% highlight bash tabtitle="CMD" %}

Select skills to install (space to toggle)
│ ◻ syncfusion-wpf-3d-chart
│ ◻ syncfusion-wpf-accordion
│ ◻ syncfusion-wpf-ai-assistview
│ ◻ syncfusion-wpf-autocomplete
| .....

{% endhighlight %}
{% endtabs %}

Next, select which AI agent you're using and where to store the skills.
{% tabs %}
{% highlight bash tabtitle="CMD" %}

│ ── Additional agents ─────────────────────────────
│ Search:
│ ↑↓ move, space select, enter confirm
│ ❯ ○ Augment (.augment/skills)
│ ○ Claude Code (.claude/skills)
│ ○ OpenClaw (skills)
│ ○ CodeBuddy (.codebuddy/skills)
│ ○ Command Code (.commandcode/skills)
│ ○ Continue (.continue/skills)
│ ○ Cortex Code (.cortex/skills)
│ ○ Crush (.crush/skills)
| ....

{% endhighlight %}
{% endtabs %}

Choose your installation scope (project-level or global), then confirm to complete the installation.

{% tabs %}
{% highlight bash tabtitle="CMD" %}

◆ Installation scope
│ ● Project (Install in current directory (committed with your project))
│ ○ Global

◆ Proceed with installation?
│ ● Yes / ○ No

{% endhighlight %}
{% endtabs %}

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).

## 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.
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).
- 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."

## Skills CLI Commands

After installation, manage Syncfusion<sup style="font-size:70%">&reg;</sup> Agent Skills using the following commands:

### List Skills

View all installed skills in your current project or global environment:

{% tabs %}
{% highlight bash tabtitle="NPM" %}

npx skills list

{% endhighlight %}
{% endtabs %}

### Remove a Skill

Uninstall a specific skill from your environment:

{% tabs %}
{% highlight bash tabtitle="NPM" %}

npx skills remove <skill-name>

{% endhighlight %}
{% endtabs %}

Replace `<skill-name>` with the name of the skill you want to remove (for example, `syncfusion-wpf-accordion`).

### Check for Updates

Check if updates are available for your installed skills:

{% tabs %}
{% highlight bash tabtitle="NPM" %}

npx skills check

{% endhighlight %}
{% endtabs %}

### Update All Skills

Update all installed skills to their latest versions:

{% tabs %}
{% highlight bash tabtitle="NPM" %}

npx skills update

{% endhighlight %}
{% endtabs %}

## FAQ

**Which agents and IDEs are supported?**

Any Skills compatible agent or IDE that loads local skill files (Visual Studio Code, Cursor, CodeStudio, etc.).

**Are skills loaded automatically?**

Yes. Once installed, supported agents automatically detect and load relevant skills for Syncfusion‑related queries without requiring additional configuration.

**Skills are not being loaded**

Verify that skills are installed in the correct agent directory, restart the IDE, and confirm that the agent supports external skill files.

## See also

- [Agent Skills Standards](https://agentskills.io/home)
- [Skills CLI](https://skills.sh/docs)