maui-ui-components-skills

Skills for Syncfusion .NET MAUI components, designed for use with AI coding assistants.

This repository contains 76 AI-ready skill guides for working with Syncfusion .NET MAUI controls. Each skill includes a SKILL.md file that AI coding assistants can read automatically, plus a references/ subfolder with detailed documentation covering setup, usage patterns, customization, and troubleshooting.

Quick Start

Option 1: Using npx (Recommended)

npx skills add https://github.com/syncfusion/maui-ui-components-skills

This will automatically add the skills to your workspace.

Option 2: Manual Installation

1. Clone this repository

git clone https://github.com/syncfusion/maui-ui-components-skills.git

2. Add it to your VS Code workspace

Open your .code-workspace file (or create one) and add this repo as a second root folder:

{
  "folders": [
    { "path": "/path/to/your-maui-app" },
    { "path": "/path/to/maui-ui-components-skills" }
  ]
}

3. Start asking questions

Your AI assistant will automatically detect and apply the relevant skill based on your prompt:

How do I add grouping to the Syncfusion DataGrid?
How do I configure the Scheduler for week view?
How do I apply a dark theme to Syncfusion controls?

No configuration required. Skills are loaded automatically from the workspace.

---

Prerequisites

• An AI coding assistant that supports skills/context files (e.g., GitHub Copilot, Cursor, or similar tools)
• .NET 9 SDK
• A Syncfusion license key (free community license available)

How These Skills Work

Each SKILL.md file contains a description field in its YAML frontmatter. AI coding assistants read this description to decide when to automatically apply a skill during a conversation. When you ask about a specific Syncfusion control — for example, "How do I add sorting to my DataGrid?" — the AI assistant detects the match and loads the corresponding skill to guide its response.

You can also reference a skill explicitly by mentioning the component or control by name in your prompt.

Example Prompts

How do I bind data to the Syncfusion DataGrid in .NET MAUI?

→ The AI assistant loads the DataGrid skill and uses its get-started and data-binding reference docs.

I need to add a date range picker to my app.

→ The AI assistant loads the Date Time Range Selector skill.

Help me migrate my Xamarin.Forms app to .NET MAUI.

→ The AI assistant loads the Migration skill.

Using Reference Files

Each references/ subfolder contains deeper implementation guides. When the AI assistant loads a skill, it can also pull in these files when you ask follow-up questions:

Show me how to export the DataGrid to Excel.

→ The AI assistant uses references/advanced-features.md from the DataGrid skill for the detailed answer.

Skill File Structure

Every skill folder follows this layout:

skills/
└── syncfusion-maui-<control>/
    ├── SKILL.md                  ← Loaded by AI assistant; contains When to Use, Component Overview, and navigation links
    └── references/
        ├── getting-started.md    ← Installation, setup, NuGet packages, MauiProgram.cs
        ├── advanced-features.md  ← In-depth feature guides and code samples
        └── ...                   ← Additional reference files per control

SKILL.md sections:

• When to Use This Skill — trigger phrases and scenarios that activate this skill
• Component Overview — NuGet package, namespace, key capabilities at a glance
• Documentation and Navigation Guide — links to all reference files in the skill

Repository Structure

README.md
skills/
    syncfusion-maui-getting-started/
    syncfusion-maui-migration/
    syncfusion-maui-theming/
    syncfusion-maui-accordion/
    syncfusion-maui-ai-assistview/
    syncfusion-maui-autocomplete/
    ... (one folder per control, 76 total)

Skill Index

Tip: Start with Getting Started if you are setting up a new project, and Migration if upgrading from Xamarin.Forms. For all other tasks, find the skill that matches the specific control below.

Foundation

• Getting Started — installation, licensing, themes, AI service integration
• Migration — Xamarin.Forms to .NET MAUI migration guide
• Theming — Material/Cupertino themes, dark mode, custom styling

Data Visualization

• Cartesian Charts
• Circular Charts
• Funnel Charts
• Polar Charts
• Pyramid Charts
• Sunburst Charts
• Circular ProgressBar
• Linear ProgressBar
• Step ProgressBar
• Digital Gauge
• Linear Gauge
• Radial Gauge
• Barcode Generator
• Maps
• TreeMap

Grids and Data

• DataGrid
• Smart DataGrid
• ListView
• TreeView
• Kanban Board
• DataForm

Scheduling and Calendars

• Scheduler
• Smart Scheduler
• Calendar

Editors and Inputs

• Autocomplete
• ComboBox
• Picker
• Date Picker
• Time Picker
• Date Time Picker
• Masked Entry
• Numeric Entry
• Text Input Layout
• Rich Text Editor
• Smart Text Editor
• Image Editor
• Color Picker
• Signature Pad
• Rating

Sliders and Range Controls

• Slider
• Range Slider
• Range Selector
• Date Time Slider
• Date Time Range Slider
• Date Time Range Selector

Navigation

• Tab View
• Navigation Drawer
• Toolbar
• Radial Menu
• DockLayout

Layout and Containers

• Accordion
• Expander
• Cards
• Carousel
• Rotator
• Backdrop
• Parallax View
• Pull to Refresh
• Segmented Control

Buttons and Indicators

• Button
• Checkbox
• Radio Button
• Switch
• Chips
• Badge View
• Busy Indicator
• Shimmer
• Effects View

Miscellaneous

• Avatar View
• AI AssistView
• Chat
• Markdown Viewer
• TreeMap