From 74067cfed7282574c07beefaff6b03f5eb7274bc Mon Sep 17 00:00:00 2001 From: RadoMirchev Date: Fri, 8 May 2026 10:58:54 +0300 Subject: [PATCH 01/10] docs(*): update-ai-assited-dev-npm-redme --- .../artifacts/README_Components.md | 58 ++++++++++++++++++- .../artifacts/README_DockManager.md | 58 ++++++++++++++++++- .azure-pipelines/artifacts/README_Grids.md | 2 +- 3 files changed, 111 insertions(+), 7 deletions(-) diff --git a/.azure-pipelines/artifacts/README_Components.md b/.azure-pipelines/artifacts/README_Components.md index 2c1df61..403e7c3 100644 --- a/.azure-pipelines/artifacts/README_Components.md +++ b/.azure-pipelines/artifacts/README_Components.md @@ -62,14 +62,66 @@ This package provides the following components: | Tree | ✅ | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/tree) | ## AI-Assisted Development - -This package ships with **LLM Agent Skills** — structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI, etc.) how to work with Ignite UI for React. The skill files are included in the [`igniteui-react`](https://www.npmjs.com/package/igniteui-react) package and also live in the [`skills/`](https://github.com/IgniteUI/igniteui-react/tree/master/skills) directory: - + +Ignite UI for React provides a complete AI toolchain — **Agent Skills**, the **Ignite UI CLI MCP server**, the **Ignite UI Theming MCP server**, and the **MAKER MCP server** — that grounds AI coding assistants in correct component APIs, import paths, and design tokens. + +| Component | What it provides | Requires Ignite UI installed? | +|:----------|:----------------|:-----------------------------:| +| **Agent Skills** | Developer-owned instruction packages: import paths, component patterns, decision flows, project conventions | Yes | +| **CLI MCP server** (`igniteui-cli`) | Documentation queries, API reference, project scaffolding tools via MCP | No | +| **Theming MCP server** (`igniteui-theming`) | Design tokens, palette tools, CSS custom property generation, WCAG AA contrast validation | No | +| **MAKER MCP server** (`@igniteui/maker-mcp`) | Multi-agent orchestration: decomposes complex tasks into validated, executable step plans | No | + +> **Note:** All AI toolchain commands require Ignite UI CLI 16.0.0 or newer. + +You can start evaluating Ignite UI AI assistance with the MCP servers alone — Ignite UI does not need to be installed in your project. Agent Skills become available once you install Ignite UI packages. + +### Add AI toolchain to an existing project + +Run this command from the root of your project: + +```bash +npx igniteui-cli ai-config +``` + +This copies Agent Skills into the agent discovery path and writes MCP server entries to `.vscode/mcp.json`. After the command finishes, start the MCP servers in your AI client — they are configured but not yet running. + +### Start a new project with AI toolchain + +Run the Ignite UI CLI to scaffold a new React project with the AI toolchain configured from the start: + +```bash +ig new +``` + +The CLI prompts for project name and theme, installs dependencies, and configures Agent Skills and MCP servers in a single interactive flow. If the CLI is not installed globally, use `npm install -g igniteui-cli`. + +### Agent Skills + +This package ships with **Agent Skills** — structured, developer-owned instruction packages that tell AI coding assistants exactly how to use Ignite UI for React. The skill files are included in the [`igniteui-react`](https://www.npmjs.com/package/igniteui-react) package and also live in the [`skills/`](https://github.com/IgniteUI/igniteui-react/tree/master/skills) directory. + | Skill | Description | |:------|:------------| | **components** | Identify the right React components (`Igr*`) for a UI pattern, then install, import, and use them — JSX patterns, events, refs, forms, Next.js setup | | **customize-theme** | Customize styling using CSS custom properties, Sass, and the theming system in React | | **optimize-bundle-size** | Reduce bundle size with granular imports, tree-shaking, and lazy loading | + +When a Skill is active in the AI client, the agent follows the Skill instead of relying on general training data — which may reference outdated API signatures or import paths. The Skill package is developer-owned: edit the `SKILL.md` to match your team's conventions, add project-specific patterns, and version the package alongside your codebase. + +### Supported AI Clients + +| Client | Configuration method | +|:-------|:--------------------| +| VS Code with GitHub Copilot | `.vscode/mcp.json` | +| Cursor | `.cursor/mcp.json` | +| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` | +| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | +| Claude Code | `.mcp.json` or the Claude Code MCP CLI command | +| JetBrains AI Assistant | **Tools → AI Assistant → Model Context Protocol (MCP)** | + +Agent Skills are compatible with GitHub Copilot via `.github/copilot-instructions.md`, Cursor via `.cursorrules` or `.cursor/rules/`, Windsurf via `.windsurfrules`, and JetBrains AI Assistant via project-level prompt settings. + +For full setup instructions, see the [AI-Assisted Development documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/ai-assisted-development-overview). ## License diff --git a/.azure-pipelines/artifacts/README_DockManager.md b/.azure-pipelines/artifacts/README_DockManager.md index 331b3da..ff8a501 100644 --- a/.azure-pipelines/artifacts/README_DockManager.md +++ b/.azure-pipelines/artifacts/README_DockManager.md @@ -30,14 +30,66 @@ Provide a complete windowing experience, splitting complex layouts into smaller, - Fully customizable appearance and behavior ## AI-Assisted Development - -This package ships with **LLM Agent Skills** — structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI, etc.) how to work with Ignite UI for React. The skill files are included in the [`igniteui-react`](https://www.npmjs.com/package/igniteui-react) package and also live in the [`skills/`](https://github.com/IgniteUI/igniteui-react/tree/master/skills) directory: - + +Ignite UI for React provides a complete AI toolchain — **Agent Skills**, the **Ignite UI CLI MCP server**, the **Ignite UI Theming MCP server**, and the **MAKER MCP server** — that grounds AI coding assistants in correct component APIs, import paths, and design tokens. + +| Component | What it provides | Requires Ignite UI installed? | +|:----------|:----------------|:-----------------------------:| +| **Agent Skills** | Developer-owned instruction packages: import paths, component patterns, decision flows, project conventions | Yes | +| **CLI MCP server** (`igniteui-cli`) | Documentation queries, API reference, project scaffolding tools via MCP | No | +| **Theming MCP server** (`igniteui-theming`) | Design tokens, palette tools, CSS custom property generation, WCAG AA contrast validation | No | +| **MAKER MCP server** (`@igniteui/maker-mcp`) | Multi-agent orchestration: decomposes complex tasks into validated, executable step plans | No | + +> **Note:** All AI toolchain commands require Ignite UI CLI 16.0.0 or newer. + +You can start evaluating Ignite UI AI assistance with the MCP servers alone — Ignite UI does not need to be installed in your project. Agent Skills become available once you install Ignite UI packages. + +### Add AI toolchain to an existing project + +Run this command from the root of your project: + +```bash +npx igniteui-cli ai-config +``` + +This copies Agent Skills into the agent discovery path and writes MCP server entries to `.vscode/mcp.json`. After the command finishes, start the MCP servers in your AI client — they are configured but not yet running. + +### Start a new project with AI toolchain + +Run the Ignite UI CLI to scaffold a new React project with the AI toolchain configured from the start: + +```bash +ig new +``` + +The CLI prompts for project name and theme, installs dependencies, and configures Agent Skills and MCP servers in a single interactive flow. If the CLI is not installed globally, use `npm install -g igniteui-cli`. + +### Agent Skills + +This package ships with **Agent Skills** — structured, developer-owned instruction packages that tell AI coding assistants exactly how to use Ignite UI for React. The skill files are included in the [`igniteui-react`](https://www.npmjs.com/package/igniteui-react) package and also live in the [`skills/`](https://github.com/IgniteUI/igniteui-react/tree/master/skills) directory. + | Skill | Description | |:------|:------------| | **components** | Identify the right React components (`Igr*`) for a UI pattern, then install, import, and use them — JSX patterns, events, refs, forms, Next.js setup | | **customize-theme** | Customize styling using CSS custom properties, Sass, and the theming system in React | | **optimize-bundle-size** | Reduce bundle size with granular imports, tree-shaking, and lazy loading | + +When a Skill is active in the AI client, the agent follows the Skill instead of relying on general training data — which may reference outdated API signatures or import paths. The Skill package is developer-owned: edit the `SKILL.md` to match your team's conventions, add project-specific patterns, and version the package alongside your codebase. + +### Supported AI Clients + +| Client | Configuration method | +|:-------|:--------------------| +| VS Code with GitHub Copilot | `.vscode/mcp.json` | +| Cursor | `.cursor/mcp.json` | +| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` | +| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | +| Claude Code | `.mcp.json` or the Claude Code MCP CLI command | +| JetBrains AI Assistant | **Tools → AI Assistant → Model Context Protocol (MCP)** | + +Agent Skills are compatible with GitHub Copilot via `.github/copilot-instructions.md`, Cursor via `.cursorrules` or `.cursor/rules/`, Windsurf via `.windsurfrules`, and JetBrains AI Assistant via project-level prompt settings. + +For full setup instructions, see the [AI-Assisted Development documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/ai-assisted-development-overview). ## License diff --git a/.azure-pipelines/artifacts/README_Grids.md b/.azure-pipelines/artifacts/README_Grids.md index d60ff4c..5b040e0 100644 --- a/.azure-pipelines/artifacts/README_Grids.md +++ b/.azure-pipelines/artifacts/README_Grids.md @@ -69,7 +69,7 @@ Run the Ignite UI CLI to scaffold a new React project with the AI toolchain conf ig new ``` -The CLI prompts for project name and theme, installs dependencies, and configures Agent Skills and MCP servers in a single interactive flow. If the CLI is not installed globally, use `npx igniteui-cli@latest new`. +The CLI prompts for project name and theme, installs dependencies, and configures Agent Skills and MCP servers in a single interactive flow. If the CLI is not installed globally, use `npm install -g igniteui-cli`. ### Agent Skills From 1704859d270eaac8111ee2e20cb4630c1ef891bf Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Tue, 19 May 2026 10:32:56 +0300 Subject: [PATCH 02/10] Apply suggestion from @damyanpetev Co-authored-by: Damyan Petev --- .azure-pipelines/artifacts/README_Components.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/.azure-pipelines/artifacts/README_Components.md b/.azure-pipelines/artifacts/README_Components.md index 403e7c3..135e0a0 100644 --- a/.azure-pipelines/artifacts/README_Components.md +++ b/.azure-pipelines/artifacts/README_Components.md @@ -74,8 +74,6 @@ Ignite UI for React provides a complete AI toolchain — **Agent Skills**, the * > **Note:** All AI toolchain commands require Ignite UI CLI 16.0.0 or newer. -You can start evaluating Ignite UI AI assistance with the MCP servers alone — Ignite UI does not need to be installed in your project. Agent Skills become available once you install Ignite UI packages. - ### Add AI toolchain to an existing project Run this command from the root of your project: From 5c055b22d4dbbaeb0178edf8e190df612a0f7abc Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Tue, 19 May 2026 10:33:23 +0300 Subject: [PATCH 03/10] Apply suggestion from @damyanpetev Co-authored-by: Damyan Petev --- .azure-pipelines/artifacts/README_Components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.azure-pipelines/artifacts/README_Components.md b/.azure-pipelines/artifacts/README_Components.md index 135e0a0..d79ace5 100644 --- a/.azure-pipelines/artifacts/README_Components.md +++ b/.azure-pipelines/artifacts/README_Components.md @@ -79,7 +79,7 @@ Ignite UI for React provides a complete AI toolchain — **Agent Skills**, the * Run this command from the root of your project: ```bash -npx igniteui-cli ai-config +ig ai-config ``` This copies Agent Skills into the agent discovery path and writes MCP server entries to `.vscode/mcp.json`. After the command finishes, start the MCP servers in your AI client — they are configured but not yet running. From 766cf07feaad4fb9f74c143d259c71f922ceeb77 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Tue, 19 May 2026 10:34:37 +0300 Subject: [PATCH 04/10] Apply suggestion from @radomirchev --- .azure-pipelines/artifacts/README_Components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.azure-pipelines/artifacts/README_Components.md b/.azure-pipelines/artifacts/README_Components.md index d79ace5..873b02b 100644 --- a/.azure-pipelines/artifacts/README_Components.md +++ b/.azure-pipelines/artifacts/README_Components.md @@ -82,7 +82,7 @@ Run this command from the root of your project: ig ai-config ``` -This copies Agent Skills into the agent discovery path and writes MCP server entries to `.vscode/mcp.json`. After the command finishes, start the MCP servers in your AI client — they are configured but not yet running. +This copies Agent Skills into the agent discovery path and writes MCP server entries to `.vscode/mcp.json`. ### Start a new project with AI toolchain From 73be40afce5a6d00692428357f0b1167e053ca74 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Tue, 19 May 2026 11:24:37 +0300 Subject: [PATCH 05/10] Apply suggestion from @radomirchev --- .azure-pipelines/artifacts/README_Components.md | 1 - 1 file changed, 1 deletion(-) diff --git a/.azure-pipelines/artifacts/README_Components.md b/.azure-pipelines/artifacts/README_Components.md index 873b02b..d7d5506 100644 --- a/.azure-pipelines/artifacts/README_Components.md +++ b/.azure-pipelines/artifacts/README_Components.md @@ -92,7 +92,6 @@ Run the Ignite UI CLI to scaffold a new React project with the AI toolchain conf ig new ``` -The CLI prompts for project name and theme, installs dependencies, and configures Agent Skills and MCP servers in a single interactive flow. If the CLI is not installed globally, use `npm install -g igniteui-cli`. ### Agent Skills From 52f5c8074059e8775c97a0ed3c4edcf0dec2f39e Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Tue, 19 May 2026 11:24:51 +0300 Subject: [PATCH 06/10] Apply suggestion from @radomirchev --- .azure-pipelines/artifacts/README_Components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.azure-pipelines/artifacts/README_Components.md b/.azure-pipelines/artifacts/README_Components.md index d7d5506..92f77ca 100644 --- a/.azure-pipelines/artifacts/README_Components.md +++ b/.azure-pipelines/artifacts/README_Components.md @@ -63,7 +63,7 @@ This package provides the following components: ## AI-Assisted Development -Ignite UI for React provides a complete AI toolchain — **Agent Skills**, the **Ignite UI CLI MCP server**, the **Ignite UI Theming MCP server**, and the **MAKER MCP server** — that grounds AI coding assistants in correct component APIs, import paths, and design tokens. +Ignite UI for React provides a toolchain to enhance the AI coding workflow — **Agent Skills**, the **Ignite UI CLI MCP server**, the **Ignite UI Theming MCP server**, and the **MAKER MCP server** — that grounds AI coding assistants in correct component APIs, import paths, and design tokens. | Component | What it provides | Requires Ignite UI installed? | |:----------|:----------------|:-----------------------------:| From ee62cf9ee3b43737d611663c53f85a6a4970d537 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Tue, 19 May 2026 11:25:05 +0300 Subject: [PATCH 07/10] Apply suggestion from @radomirchev --- .azure-pipelines/artifacts/README_Components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.azure-pipelines/artifacts/README_Components.md b/.azure-pipelines/artifacts/README_Components.md index 92f77ca..a1b1e8a 100644 --- a/.azure-pipelines/artifacts/README_Components.md +++ b/.azure-pipelines/artifacts/README_Components.md @@ -72,7 +72,7 @@ Ignite UI for React provides a toolchain to enhance the AI coding workflow — * | **Theming MCP server** (`igniteui-theming`) | Design tokens, palette tools, CSS custom property generation, WCAG AA contrast validation | No | | **MAKER MCP server** (`@igniteui/maker-mcp`) | Multi-agent orchestration: decomposes complex tasks into validated, executable step plans | No | -> **Note:** All AI toolchain commands require Ignite UI CLI 16.0.0 or newer. +> **Note:** All AI toolchain commands require Ignite UI CLI 15.0.0 or newer. ### Add AI toolchain to an existing project From 3de3730467dea6796a6f3094942b25d7192566df Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Tue, 19 May 2026 11:25:17 +0300 Subject: [PATCH 08/10] Apply suggestion from @radomirchev --- .azure-pipelines/artifacts/README_Components.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/.azure-pipelines/artifacts/README_Components.md b/.azure-pipelines/artifacts/README_Components.md index a1b1e8a..e353848 100644 --- a/.azure-pipelines/artifacts/README_Components.md +++ b/.azure-pipelines/artifacts/README_Components.md @@ -65,12 +65,12 @@ This package provides the following components: Ignite UI for React provides a toolchain to enhance the AI coding workflow — **Agent Skills**, the **Ignite UI CLI MCP server**, the **Ignite UI Theming MCP server**, and the **MAKER MCP server** — that grounds AI coding assistants in correct component APIs, import paths, and design tokens. -| Component | What it provides | Requires Ignite UI installed? | -|:----------|:----------------|:-----------------------------:| -| **Agent Skills** | Developer-owned instruction packages: import paths, component patterns, decision flows, project conventions | Yes | -| **CLI MCP server** (`igniteui-cli`) | Documentation queries, API reference, project scaffolding tools via MCP | No | -| **Theming MCP server** (`igniteui-theming`) | Design tokens, palette tools, CSS custom property generation, WCAG AA contrast validation | No | -| **MAKER MCP server** (`@igniteui/maker-mcp`) | Multi-agent orchestration: decomposes complex tasks into validated, executable step plans | No | +| Component | What it provides | +|:----------|:----------------| +| **Agent Skills** | Developer-owned instruction packages: import paths, component patterns, decision flows, project conventions | +| **CLI MCP server** (`igniteui-cli`) | Documentation queries, API reference, project scaffolding tools via MCP | +| **Theming MCP server** (`igniteui-theming`) | Design tokens, palette tools, CSS custom property generation, WCAG AA contrast validation | +| **MAKER MCP server** (`@igniteui/maker-mcp`) | Multi-agent orchestration: decomposes complex tasks into validated, executable step plans | > **Note:** All AI toolchain commands require Ignite UI CLI 15.0.0 or newer. From 93d321a4209f2c5ecdcefd49ba1ae7fea852ee27 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Tue, 19 May 2026 11:27:46 +0300 Subject: [PATCH 09/10] Apply suggestion from @radomirchev --- .azure-pipelines/artifacts/README_Components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.azure-pipelines/artifacts/README_Components.md b/.azure-pipelines/artifacts/README_Components.md index e353848..9edf6da 100644 --- a/.azure-pipelines/artifacts/README_Components.md +++ b/.azure-pipelines/artifacts/README_Components.md @@ -95,7 +95,7 @@ ig new ### Agent Skills -This package ships with **Agent Skills** — structured, developer-owned instruction packages that tell AI coding assistants exactly how to use Ignite UI for React. The skill files are included in the [`igniteui-react`](https://www.npmjs.com/package/igniteui-react) package and also live in the [`skills/`](https://github.com/IgniteUI/igniteui-react/tree/master/skills) directory. +This package ships with **Agent Skills** — instructions, developer-owned structured knowledge files that tell AI coding assistants exactly how to use Ignite UI for React. The skill files are included in the [`igniteui-react`](https://www.npmjs.com/package/igniteui-react) package and also live in the [`skills/`](https://github.com/IgniteUI/igniteui-react/tree/master/skills) directory. | Skill | Description | |:------|:------------| From 25989677e6c0e827d24590b7558f41aa6a0883ed Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Tue, 19 May 2026 11:28:41 +0300 Subject: [PATCH 10/10] Apply suggestion from @damyanpetev Co-authored-by: Damyan Petev --- .azure-pipelines/artifacts/README_Components.md | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/.azure-pipelines/artifacts/README_Components.md b/.azure-pipelines/artifacts/README_Components.md index 9edf6da..869e147 100644 --- a/.azure-pipelines/artifacts/README_Components.md +++ b/.azure-pipelines/artifacts/README_Components.md @@ -105,18 +105,6 @@ This package ships with **Agent Skills** — instructions, developer-owned struc When a Skill is active in the AI client, the agent follows the Skill instead of relying on general training data — which may reference outdated API signatures or import paths. The Skill package is developer-owned: edit the `SKILL.md` to match your team's conventions, add project-specific patterns, and version the package alongside your codebase. -### Supported AI Clients - -| Client | Configuration method | -|:-------|:--------------------| -| VS Code with GitHub Copilot | `.vscode/mcp.json` | -| Cursor | `.cursor/mcp.json` | -| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` | -| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | -| Claude Code | `.mcp.json` or the Claude Code MCP CLI command | -| JetBrains AI Assistant | **Tools → AI Assistant → Model Context Protocol (MCP)** | - -Agent Skills are compatible with GitHub Copilot via `.github/copilot-instructions.md`, Cursor via `.cursorrules` or `.cursor/rules/`, Windsurf via `.windsurfrules`, and JetBrains AI Assistant via project-level prompt settings. For full setup instructions, see the [AI-Assisted Development documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/ai-assisted-development-overview).