Merge pull request #2167 from syncfusion-content/wpf-skill-hotfix

Added and modified the Skills md file

Author: thangapriyavalasubramanian

wpf-toc.html

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

wpf/skills.md

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