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
2 changes: 1 addition & 1 deletion Document-Processing-toc.html
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
<a href="/document-processing/Skills/spreadsheet-editor-sdk/component-skills">Component Skills</a>
</li>
<li>
<a href="/document-processing/Skills/spreadsheet-editor-sdk/ui-builder-skills">UI Builder Skills</a>
<a href="/document-processing/Skills/spreadsheet-editor-sdk/ui-builder-skills">Agentic UI Builder</a>
</li>
</ul>
</li>
Expand Down
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 Spreadsheet 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
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
---
layout: post
title: UI Builder Skill with Spreadsheet Editor SDK | Syncfusion®
title: UI Builder Skills with Spreadsheet Editor SDK | Syncfusion®
description: Learn to use Syncfusion® UI Builder Skill with Spreadsheet Editor SDK to help AI assistants create accurate, production-ready UIs using Spreadsheet components.
control: Spreadsheet Editor SDK
platform: document-processing
documentation: ug
keywords: UI Builder, Skills, AI Assistants, Spreadsheet Editor SDK, Agent Skills
---

# Syncfusion® UI Builder Skill with Spreadsheet Editor SDK
# Syncfusion® UI Builder Skills with Spreadsheet Editor SDK

Syncfusion® UI Builder Skill with Spreadsheet Editor SDK for AI Assistants is an AI-powered companion that accelerates application development by transforming natural-language UI requirements into production-ready implementations using Syncfusion® UI components and Spreadsheet Editor components.
Syncfusion® UI Builder Skills with Spreadsheet Editor SDK for AI Assistants is an AI-powered companion that accelerates application development by transforming natural-language UI requirements into production-ready implementations using Syncfusion® UI components and Spreadsheet Editor components.

It supports multiple platforms—including React, Angular, Blazor, WPF and WinForms integrates seamlessly with AI-powered IDEs to generate accurate, platform-specific code.

By leveraging deep knowledge of Syncfusion® component libraries, it enables developers to build complete user interfaces that combine data visualization, navigation, input controls, and spreadsheet editing experiences. It follows best practices, accessibility standards, and consistent design principles to help create scalable and high-quality applications.

With intelligent UI generation across both general UI components and Spreadsheet Editor capabilities, developers can rapidly design and implement modern applications without leaving their development workflow.

## Supported Platforms for Spreadsheet UI Builder Skill
## Supported Platforms for Spreadsheet UI Builder Skills

You can refer to the platform-specific guidance on how to use Syncfusion<sup style="font-size:70%">&reg;</sup> UI Builder Skill for AI Assistants with Spreadsheet Editor SDK products from the following:
You can refer to the platform-specific guidance on how to use Syncfusion<sup style="font-size:70%">&reg;</sup> UI Builder Skills for AI Assistants with Spreadsheet Editor SDK products from the following:

- [UI Builder Skill for React Spreadsheet Editor](../../Excel/Spreadsheet/react/ui-builder-skill)
- [UI Builder Skill for Angular Spreadsheet Editor](../../Excel/Spreadsheet/angular/ui-builder-skill)
Expand Down