Skills for Syncfusion Blazor components, designed for use with AI coding assistants.
This repository contains 50+ AI-ready skill guides for working with Syncfusion Blazor components. 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.
The skills guide Blazor development across all hosting models (Server, WebAssembly, Hybrid, Auto) including data grid, chart, scheduler, rich text editor, gantt chart, and more.
npx skills add https://github.com/syncfusion/blazor-ui-components-skillsThis will automatically add the skills to your workspace.
1. Clone this repository
git clone https://github.com/syncfusion/blazor-ui-components-skills.git2. 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-blazor-app" },
{ "path": "/path/to/blazor-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 in Blazor?
How do I configure the Blazor Scheduler for week view?
How do I apply a dark theme to Syncfusion Blazor components?
No configuration required. Skills are loaded automatically from the workspace.
- An AI coding assistant that supports skills/context files (e.g., Syncfusion Code Studio, GitHub Copilot, Cursor, or similar tools)
- .NET 8 SDK or later
- A Syncfusion license key (free community license available)
- Basic knowledge of Blazor (Server, WASM, or Hybrid hosting models)
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 Component — for example, "How do I add sorting to my Blazor 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.
How do I bind data to the Syncfusion DataGrid in Blazor?
→ The AI assistant loads the DataGrid skill and uses its getting-started and data-binding reference docs.
Show me how to implement master-detail in the Blazor TreeGrid.
→ The AI assistant loads the TreeGrid skill.
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.
Every skill folder follows this layout:
skills/
└── syncfusion-blazor-<component>/
├── SKILL.md ← Loaded by AI assistant; contains When to Use, Component Overview, and navigation links
└── references/
├── getting-started.md ← Installation, setup, NuGet packages, basic configuration
├── advanced-features.md ← In-depth feature guides and code samples
└── ... ← Additional reference files per component
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
README.md
skills/
syncfusion-blazor-common/
syncfusion-blazor-themes/
syncfusion-blazor-license/
syncfusion-blazor-charts/
syncfusion-blazor-datagrid/
syncfusion-blazor-scheduler/
... (45+ total skills)
Tip: Start with Common if you are setting up a new project. For all other tasks, find the skill that matches the specific component below.
- Common — installation, script references, themes, bunit setup and localization & globalization
- Themes — Fluent 2, Material 3, Bootstrap 5, Fabric, Tailwind 3 themes, dark mode and lite themes
- License — license key registration and validation
- DataGrid — sorting, filtering, paging, grouping, editing, export
- TreeGrid — hierarchical data, master-detail, export
- Data Manager — data binding and remote data operations
- Data Form — form generation and validation
- Query Builder — visual query building interface
- Scheduler — calendar events, appointments, recurring events
- Rich Text Editor — WYSIWYG text editing with formatting
- Image Editor — image manipulation and editing
- Block Editor — block-based document editing
- Dropdowns — dropdown list, combo box, multi-select
- Dropdown Tree — tree-based dropdown selection
- Smart Paste — intelligent clipboard paste handling
- Smart TextArea — enhanced textarea with autocomplete
- Charts (Cartesian) — line, area, bar, column, scatter, bubble charts
- Accumulation Chart — pie, doughnut, funnel charts
- Maps — geographic mapping and location visualization
- Barcode — QR codes, barcodes, and data matrix generation
- Tabs — tabbed navigation and content organization
- Ribbon — Office-style ribbon interface
- File Manager — file browser and management
- Popups — dialogs, tooltips, and popup components
- Gantt Chart — project timeline, dependencies, and resource management
- Diagram — flowcharts, organizational charts, and diagramming
- AI AssistView — AI-powered assistant interface
- Chat UI — conversational UI and chat components
- Security — CSP configuration and browser-level protections for Blazor applications.
These skills work seamlessly across all Blazor hosting models:
- Blazor Server — Server-side rendering with SignalR communication
- Blazor WebAssembly — Client-side .NET runtime in the browser
- Blazor Hybrid — Desktop applications using MAUI or WPF
- Blazor Auto (Web) — Combined Server and WASM with auto-switching
- Check the Syncfusion Blazor documentation
- Review skill reference files in the
references/folders - Visit Syncfusion community forums
These skills are provided as educational resources for working with Syncfusion Blazor components. Syncfusion components require a valid license key. To acquire a license, you can quote a purchase at https://www.syncfusion.com/sales/pricing.
