Skip to content
Open
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
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Before installing Angular UI Builder Skill with Spreadsheet, ensure the followin
- Required [Node.js](https://nodejs.org/en) version ≥ 18
- Angular application (existing or new); see [Quick Start](https://ej2.syncfusion.com/angular/documentation/getting-started/angular-cli)
- A supported AI agent or IDE that integrates with the Skills (VS Code, Cursor, Syncfusion® Code Studio, etc.)
- Active Syncfusion<sup style="font-size:70%">&reg;</sup> license(any of the following):
- Active Syncfusion<sup style="font-size:70%">&reg;</sup> 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)
Expand Down Expand Up @@ -145,7 +145,7 @@ To start using the skill:

> For Syncfusion® Code Studio, if the UI Builder agent is not shown, ensure that the agent location is configured to use it in the chat, and refer to the [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/usersettings#agent-file-locations) to configure the agent location properly.

**Examples Prompts:**
**Example Prompts:**

{% promptcards %}
{% promptcard Project Task Planner %}
Expand All @@ -160,7 +160,7 @@ Generated code follows best practices with accessible, semantic HTML, responsive

## Best Practices

Follow these guidelines to get the most out of UI Builder and ensure high-quality production-ready result:
Follow these guidelines to get the most out of UI Builder and ensure high-quality production-ready results:

- **Stay consistent:** Maintain consistent file organization, naming conventions, and coding standards 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.
Expand Down
12 changes: 6 additions & 6 deletions Document-Processing/Excel/Spreadsheet/Blazor/ui-builder-skill.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
layout: post
title: Blazor UI Builder Skill with Spreadsheet | Syncfusion®
description: Install Blazor UI Builder to generate production-ready Blazor components with Spreadsheet from natural-language prompts.
control: SfSpreadsheet
description: Install Syncfusion® Blazor UI Builder to generate production-ready Blazor components with Spreadsheet from natural-language prompts.
control: Spreadsheet
platform: document-processing
documentation: ug
keywords: Blazor UI Builder, Skills, AI Assistants, Spreadsheet SDK, Agent Skills
---

# Syncfusion® Blazor UI Builder Skill with Spreadsheet for AI Assistants
# Syncfusion® Blazor UI Builder Skill with Spreadsheet

**Syncfusion® Blazor UI Builder Skill** is an AI-powered skill and companion agent that accelerates Blazor Spreadsheet application development by transforming natural-language UI requirements into production-ready components using Syncfusion® Blazor UI libraries.

Expand All @@ -24,7 +24,7 @@ Before installing Blazor UI Builder Skill with Spreadsheet, ensure the following
- Required [Node.js](https://nodejs.org/en) version ≥ 18
- **Agent Package Manager** (APM) installed — follow [Installation Guidelines](https://microsoft.github.io/apm/quickstart/#1-install-apm)
- A supported AI agent or IDE that integrates with the Skills (VS Code, Cursor, Syncfusion® Code Studio, etc.)
- Active Syncfusion<sup style="font-size:70%">&reg;</sup> license(any of the following):
- Active Syncfusion<sup style="font-size:70%">&reg;</sup> 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)
Expand Down Expand Up @@ -158,11 +158,11 @@ Create a employee directory using blazor spreadsheet component with columns for
{% endpromptcard %}
{% endpromptcards %}

* Generated code follows best practices with accessible, semantic HTML, responsive mobile-first layouts, strong C# typing, and built-in security measures such as input validation and avoidance of embedded secrets.
Generated code follows best practices with accessible, semantic HTML, responsive mobile-first layouts, strong C# typing, and built-in security measures such as input validation and avoidance of embedded secrets.

## Best Practices

Follow these guidelines to get the most out of UI Builder and ensure high-quality production-ready result:
Follow these guidelines to get the most out of UI Builder and ensure high-quality production-ready results:

- **Stay consistent** - Maintain consistent file organization, naming conventions, and coding standards 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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ documentation: ug
keywords: React UI Builder, Skills, AI Assistants, Spreadsheet SDK, Agent Skills
---

# Syncfusion® React UI Builder Skill with Spreadsheet for AI Assistants
# Syncfusion® React UI Builder Skill with Spreadsheet

**Syncfusion® React UI Builder Skill** is an AI-powered agent skill that accelerates React Spreadsheet development by transforming natural-language UI requirements into production-ready code using Syncfusion® React components.

Expand All @@ -23,7 +23,7 @@ Before installing React UI Builder Skill with Spreadsheet, ensure the following:
- Required [Node.js](https://nodejs.org/en) version ≥ 18
- React application (existing or new); see [Quick Start](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start)
- A supported AI agent or IDE that integrates with the Skills (VS Code, Cursor, Syncfusion® Code Studio, etc.)
- Active Syncfusion<sup style="font-size:70%">&reg;</sup> license(any of the following):
- Active Syncfusion<sup style="font-size:70%">&reg;</sup> 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)
Expand Down Expand Up @@ -111,7 +111,7 @@ Refer to the [documentation](https://microsoft.github.io/apm/reference/cli/targe
Load required theming guidelines and confirm key design choices:
- CSS framework (Tailwind, Bootstrap, Material, or Greenfield(custom theme)). If no themes detected in the existing project, Greenfield and Syncfusion Tailwind3 theme are shown as the default option.
- Syncfusion theme (Tailwind3, Bootstrap5, Material3, fluent2)
- Light and Dark Mode
- Light and Dark Mode
- Core design basics (colors, spacing, typography, responsiveness, accessibility)
5. **Code Generation:** Produce TypeScript React components with Spreadsheet integration, props interfaces, and CSS/styling scaffolding.
6. **Dependency Management:** Recommend or install required Syncfusion® packages and peer dependencies.
Expand Down Expand Up @@ -160,7 +160,7 @@ Generated code follows best practices with accessible, semantic HTML, responsive

## Best Practices

Follow these guidelines to get the most out of UI Builder and ensure high-quality production-ready result:
Follow these guidelines to get the most out of UI Builder and ensure high-quality production-ready results:

- **Stay consistent:** Maintain consistent file organization, naming conventions, and coding standards 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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ keywords: Skills, AI Assistants, Spreadsheet Editor SDK, Agent Skills

# Syncfusion Spreadsheet Editor SDK Agent Skills for AI Assistants

This guide introduces **Syncfusion Spreadsheet Editor SDK Skills**, a curated knowledge package that empowers AI assistants (such as GitHub Copilot, Code Studio, Cursor, Claude, and others) to generate accurate code for Syncfusion<sup style="font-size:70%">&reg;</sup> Spreadsheet Editor SDK components across supported platforms.
This guide introduces **Syncfusion Spreadsheet Editor SDK Skills**, a curated knowledge package that empowers AI assistants (such as GitHub Copilot, Code Studio, Cursor, Claude, and others) to generate accurate, production ready Spreadsheet integration code using the Syncfusion<sup style="font-size:70%">&reg;</sup> Spreadsheet Editor SDK components across supported platforms.

Syncfusion<sup style="font-size:70%">&reg;</sup> Spreadsheet Editor SDK Skills address common issues with generic AI code suggestions by grounding the assistant in precise Spreadsheet Editor SDK Component APIs, spreadsheet editor patterns, and platform-specific configuration for the following platforms:

Expand All @@ -20,7 +20,7 @@ Syncfusion<sup style="font-size:70%">&reg;</sup> Spreadsheet Editor SDK Skills a
| [Blazor](https://help.syncfusion.com/document-processing/excel/spreadsheet/blazor/overview) | [syncfusion-blazor-spreadsheet-editor](https://github.com/syncfusion/spreadsheet-editor-sdk-skills/tree/master/skills/syncfusion-blazor-spreadsheet-editor) |
| [ASP.NET Core](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/overview) | [syncfusion-aspnetcore-spreadsheet-editor](https://github.com/syncfusion/spreadsheet-editor-sdk-skills/tree/master/skills/syncfusion-aspnetcore-spreadsheet-editor) |
| [ASP.NET MVC](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-mvc/overview) | [syncfusion-aspnetmvc-spreadsheet-editor](https://github.com/syncfusion/spreadsheet-editor-sdk-skills/tree/master/skills/syncfusion-aspnetmvc-spreadsheet-editor) |
| [TypeScript](https://help.syncfusion.com/document-processing/excel/spreadsheet/javascript-es6/overview) | [syncfusion-javascript-spreadsheet-editor](https://github.com/syncfusion/spreadsheet-editor-sdk-skills/tree/master/skills/syncfusion-javascript-spreadsheet-editor) |
| [avaScript (ES6)](https://help.syncfusion.com/document-processing/excel/spreadsheet/javascript-es6/overview) | [syncfusion-javascript-spreadsheet-editor](https://github.com/syncfusion/spreadsheet-editor-sdk-skills/tree/master/skills/syncfusion-javascript-spreadsheet-editor) |
| [Vue](https://help.syncfusion.com/document-processing/excel/spreadsheet/vue/overview) | [syncfusion-vue-spreadsheet-editor](https://github.com/syncfusion/spreadsheet-editor-sdk-skills/tree/master/skills/syncfusion-vue-spreadsheet-editor) |
| [UWP](https://help.syncfusion.com/document-processing/excel/spreadsheet/uwp/overview) | [syncfusion-uwp-spreadsheet-editor](https://github.com/syncfusion/spreadsheet-editor-sdk-skills/tree/master/skills/syncfusion-uwp-spreadsheet-editor) |
| [WPF](https://help.syncfusion.com/document-processing/excel/spreadsheet/wpf/overview) | [syncfusion-wpf-spreadsheet-editor](https://github.com/syncfusion/spreadsheet-editor-sdk-skills/tree/master/skills/syncfusion-wpf-spreadsheet-editor) |
Expand Down Expand Up @@ -74,10 +74,10 @@ The terminal will show a list of available skills. Use the arrow keys to navigat

Select skills to install (space to toggle)
│ ◻ syncfusion-react-spreadsheet-editor
│ ◻ ssyncfusion-angular-spreadsheet-editor
│ ◻ syncfusion-angular-spreadsheet-editor
│ ◻ syncfusion-blazor-spreadsheet-editor
│ ◻ syncfusion-aspnetcore-spreadsheet-editor
│ ◻ ssyncfusion-aspnetmvc-spreadsheet-editor
│ ◻ syncfusion-aspnetmvc-spreadsheet-editor
│ ◻ syncfusion-javascript-spreadsheet-editor
│ ◻ syncfusion-vue-spreadsheet-editor
│ ◻ syncfusion-uwp-spreadsheet-editor
Expand Down Expand Up @@ -252,7 +252,7 @@ Yes. Once installed, supported agents automatically detect and load relevant ski

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

## See also
## See Also

- [Syncfusion Spreadsheet Editor Documentation](https://help.syncfusion.com/document-processing/excel/spreadsheet/overview)
- [Agent Skills Standards](https://agentskills.io/home)
Expand Down