From c951ca59b51fe050817d8469049eae623279f9d3 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Wed, 5 Aug 2026 16:54:28 +0300 Subject: [PATCH 01/12] feat(dotnet-blazor): adding igniteui-blazor skill --- .../skills/use-igniteui-blazor/SKILL.md | 90 +++++++++++++++++++ .../use-igniteui-blazor/eval.yaml | 53 +++++++++++ 2 files changed, 143 insertions(+) create mode 100644 plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md create mode 100644 tests/dotnet-blazor/use-igniteui-blazor/eval.yaml diff --git a/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md b/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md new file mode 100644 index 0000000000..41450a40c1 --- /dev/null +++ b/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md @@ -0,0 +1,90 @@ +# Application Setup & Component Registration + +## 1. NuGet package + +```bash +dotnet add package IgniteUI.Blazor.Lite # OSS core UI components (MIT) +dotnet add package IgniteUI.Blazor.GridLite # OSS lightweight grid (MIT) +``` + +## 2. `Program.cs` + +```csharp +builder.Services.AddIgniteUIBlazor(); // all modules available +``` + +Pass `typeof(IgbModule)` values to eagerly pre-load a specific set instead: + +```csharp +builder.Services.AddIgniteUIBlazor( + typeof(IgbInputModule), typeof(IgbComboModule), typeof(IgbDialogModule)); +``` + +Module names always follow `Igb{ComponentName}Module`. In `IgniteUI.Blazor.Lite` a component registers its own module on first render, so the explicit list trims the initial payload rather than gating rendering. + +**Blazor Web App:** call `AddIgniteUIBlazor()` in **both** the server and the client `Program.cs`. + +```csharp +// Server +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddIgniteUIBlazor(); + +// Client (WebAssemblyHostBuilder) +builder.Services.AddIgniteUIBlazor(); +``` + +## 3. `_Imports.razor` + +```razor +@using IgniteUI.Blazor.Controls +``` + +Add it to both `_Imports.razor` files in split Blazor Web App solutions. + +## 4. Host page — CSS and script + +Host page is `wwwroot/index.html` (WASM/MAUI), `Pages/_Host.cshtml` (Server), or `Components/App.razor` (Web App). + +```html + +... + + +``` + +Both tags are required: without the stylesheet components render unstyled, without `app.bundle.js` they do not render at all. `app.bundle.js` must come **before** the Blazor framework script. + +Theme files under `_content/IgniteUI.Blazor/themes/` are `{light|dark}/{bootstrap|material|fluent|indigo}.css` — link exactly one. + +.NET 9+ Web App projects can use the fingerprinted asset collection: + +```razor + +``` + +`IgniteUI.Blazor.GridLite` ships its own stylesheet from its own asset root: + +```html + +``` + +## 5. Render mode (Blazor Web App only) + +Ignite UI components need an interactive render mode; static SSR renders nothing usable. + +```razor +@rendermode InteractiveServer @* or InteractiveWebAssembly / InteractiveAuto *@ +``` + +Or globally in `App.razor`: ``. + +## Project type reference + +| Project type | Builder | Host page | Framework script | +|---|---|---|---| +| Blazor Server | `WebApplication.CreateBuilder` | `Pages/_Host.cshtml` | `blazor.server.js` | +| Blazor WASM | `WebAssemblyHostBuilder` | `wwwroot/index.html` | `blazor.webassembly.js` | +| Blazor Web App | both server + client | `Components/App.razor` | `blazor.web.js` | +| MAUI Blazor Hybrid | `MauiApp.CreateBuilder` | `wwwroot/index.html` | `blazor.webview.js` | diff --git a/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml b/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml new file mode 100644 index 0000000000..afab1ec46a --- /dev/null +++ b/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml @@ -0,0 +1,53 @@ +name: use-igniteui-blazor +description: Evaluates the dotnet-blazor/use-igniteui-blazor skill +type: capability +defaults: + timeout: 10m + runs: 5 +stimuli: + - name: Wire Ignite UI into a split Blazor Web App + prompt: | + I have a Blazor Web App with a separate Server project and Client project, and I want to use Ignite UI components throughout the app. + + Please tell me exactly what I need to change to make that work. I need: + + 1. The package references for the core Ignite UI Blazor components and the GridLite package. + 2. The service registration needed in Program.cs for a split Blazor Web App. + 3. The _Imports.razor entry required so the component namespaces are available. + 4. The host-page CSS and script tags, including the correct order and the fact that GridLite uses its own stylesheet root. + 5. Any note about where AddIgniteUIBlazor() has to be called in a split app. + + Keep the answer concrete and file-oriented. I do not want a generic overview. + graders: + - type: output-contains + config: + substring: IgniteUI.Blazor.Lite + - type: output-contains + config: + substring: IgniteUI.Blazor.GridLite + - type: output-contains + config: + substring: AddIgniteUIBlazor + - type: output-contains + config: + substring: _Imports.razor + - type: output-contains + config: + substring: app.bundle.js + - type: output-contains + config: + substring: GridLite/css/themes/light/bootstrap.css + - type: output-contains + config: + substring: themes/light/bootstrap.css + - type: output-contains + config: + substring: server and client Program.cs + - type: prompt + rubric: + - Identifies the package references for both IgniteUI.Blazor.Lite and IgniteUI.Blazor.GridLite + - Says AddIgniteUIBlazor() must be called in both the Server and Client Program.cs files for a split Blazor Web App + - Adds @using IgniteUI.Blazor.Controls to _Imports.razor so the components are available everywhere that needs them + - Includes both the Ignite UI theme stylesheet and app.bundle.js in the host page, with app.bundle.js before the Blazor framework script + - Calls out that GridLite uses its own stylesheet path under _content/IgniteUI.Blazor.GridLite/ + - Keeps the answer specific to the relevant files instead of giving only general guidance \ No newline at end of file From 775d8f00bcc710f0617abb2bd326c8dc3a16617e Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Wed, 5 Aug 2026 17:04:14 +0300 Subject: [PATCH 02/12] feat(dotnet-blazor): updating the use-igniteui-blazor description --- .../skills/use-igniteui-blazor/SKILL.md | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md b/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md index 41450a40c1..3e10585230 100644 --- a/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md +++ b/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md @@ -1,3 +1,23 @@ +--- +license: MIT +name: use-igniteui-blazor +description: > + Add, configure, or review Ignite UI component support in Blazor applications. + USE FOR: installing IgniteUI.Blazor.Lite or IgniteUI.Blazor.GridLite, + registering AddIgniteUIBlazor() in Blazor Server, WASM, Hybrid, or split Blazor + Web App projects, adding @using IgniteUI.Blazor.Controls, wiring the required + theme stylesheet and app.bundle.js assets, and checking where interactive + render mode is needed for Ignite UI components to appear and function. + Also USE FOR: explaining the setup differences between single-project and + split Server/Client Blazor Web Apps, identifying the correct host page for the + framework script, and locating the GridLite-specific stylesheet path. + DO NOT USE FOR: general Blazor component authoring that does not involve + Ignite UI, choosing app architecture or render mode from scratch (see + create-blazor-project), JavaScript interop (see use-js-interop), authentication + (see configure-auth), prerendering behavior (see support-prerendering), or + generic layout/component design questions that do not require Ignite UI setup. +--- + # Application Setup & Component Registration ## 1. NuGet package From 084e13c1dbb4e7231f470e53c702e95535d44bc0 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Mon, 24 Aug 2026 11:41:49 +0300 Subject: [PATCH 03/12] fix(use-igniteui-blazor): addressing review comments --- .../skills/use-igniteui-blazor/SKILL.md | 23 ++-- .../use-igniteui-blazor/eval.yaml | 110 +++++++++++++++++- 2 files changed, 117 insertions(+), 16 deletions(-) diff --git a/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md b/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md index 3e10585230..d969dedd92 100644 --- a/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md +++ b/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md @@ -4,18 +4,17 @@ name: use-igniteui-blazor description: > Add, configure, or review Ignite UI component support in Blazor applications. USE FOR: installing IgniteUI.Blazor.Lite or IgniteUI.Blazor.GridLite, - registering AddIgniteUIBlazor() in Blazor Server, WASM, Hybrid, or split Blazor - Web App projects, adding @using IgniteUI.Blazor.Controls, wiring the required - theme stylesheet and app.bundle.js assets, and checking where interactive - render mode is needed for Ignite UI components to appear and function. - Also USE FOR: explaining the setup differences between single-project and - split Server/Client Blazor Web Apps, identifying the correct host page for the - framework script, and locating the GridLite-specific stylesheet path. - DO NOT USE FOR: general Blazor component authoring that does not involve - Ignite UI, choosing app architecture or render mode from scratch (see - create-blazor-project), JavaScript interop (see use-js-interop), authentication - (see configure-auth), prerendering behavior (see support-prerendering), or - generic layout/component design questions that do not require Ignite UI setup. + registering AddIgniteUIBlazor() in Blazor Server, WASM, Hybrid, or split + Blazor Web App projects, adding @using IgniteUI.Blazor.Controls, wiring the + theme stylesheet and app.bundle.js assets, picking the right host page and + framework script, locating the GridLite stylesheet path, explaining + single-project vs split Server/Client Web App setup differences, and checking + where an interactive render mode is needed for Ignite UI components to work. + DO NOT USE FOR: general Blazor component authoring without Ignite UI, choosing + app architecture or render mode from scratch (see create-blazor-project), + JavaScript interop (see use-js-interop), authentication (see configure-auth), + prerendering (see support-prerendering), or layout/component design questions that need + no Ignite UI setup. --- # Application Setup & Component Registration diff --git a/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml b/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml index afab1ec46a..b1a4f4f69b 100644 --- a/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml +++ b/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml @@ -3,7 +3,7 @@ description: Evaluates the dotnet-blazor/use-igniteui-blazor skill type: capability defaults: timeout: 10m - runs: 5 + runs: 3 stimuli: - name: Wire Ignite UI into a split Blazor Web App prompt: | @@ -40,9 +40,9 @@ stimuli: - type: output-contains config: substring: themes/light/bootstrap.css - - type: output-contains + - type: output-matches config: - substring: server and client Program.cs + pattern: '(?:both|each)[\s\S]{0,80}(?:[Ss]erver[\s\S]{0,80}[Cc]lient|[Cc]lient[\s\S]{0,80}[Ss]erver)' - type: prompt rubric: - Identifies the package references for both IgniteUI.Blazor.Lite and IgniteUI.Blazor.GridLite @@ -50,4 +50,106 @@ stimuli: - Adds @using IgniteUI.Blazor.Controls to _Imports.razor so the components are available everywhere that needs them - Includes both the Ignite UI theme stylesheet and app.bundle.js in the host page, with app.bundle.js before the Blazor framework script - Calls out that GridLite uses its own stylesheet path under _content/IgniteUI.Blazor.GridLite/ - - Keeps the answer specific to the relevant files instead of giving only general guidance \ No newline at end of file + - Keeps the answer specific to the relevant files instead of giving only general guidance + - name: Wire Ignite UI into a single-project Blazor Server app + prompt: | + I have an existing Blazor Server app — one project, created from the original Blazor Server template, with Pages/_Host.cshtml as the host page. + + I want to start using Ignite UI components (inputs, combos, a dialog) on a couple of my pages. Walk me through every file I have to touch and exactly what goes in it, in the order I should do it. + + Also tell me whether there is anything about render modes I need to deal with here. + graders: + - type: output-contains + config: + substring: IgniteUI.Blazor.Lite + - type: output-contains + config: + substring: AddIgniteUIBlazor + - type: output-contains + config: + substring: IgniteUI.Blazor.Controls + - type: output-contains + config: + substring: app.bundle.js + - type: output-contains + config: + substring: blazor.server.js + - type: output-matches + config: + pattern: '_content/IgniteUI\.Blazor/themes/' + - type: prompt + rubric: + - Adds the core Ignite UI Blazor package reference to the app + - Registers the Ignite UI services once, in the app's only Program.cs, without inventing a second project to register them in + - Makes the control namespace available to the pages, for example through _Imports.razor + - Places both an Ignite UI theme stylesheet and the Ignite UI script in Pages/_Host.cshtml + - Puts the Ignite UI script before the Blazor framework script rather than after it + - Uses blazor.server.js as the framework script instead of the WebAssembly or Blazor Web App equivalent + - Tells the user that no render mode directive is needed because a Blazor Server app is already interactive, instead of instructing them to add one + - name: Wire Ignite UI into a MAUI Blazor Hybrid app + prompt: | + I'm building a .NET MAUI Blazor Hybrid app — MauiProgram.cs, a BlazorWebView, and wwwroot/index.html — and I want to use Ignite UI Blazor components in the Razor pages it hosts. + + I've tried this once already and got two different bad results: on one page the components showed up as plain unstyled markup, and on another nothing appeared at all. + + Tell me what I'm missing and where each piece goes for this kind of project. + graders: + - type: output-contains + config: + substring: IgniteUI.Blazor.Lite + - type: output-contains + config: + substring: AddIgniteUIBlazor + - type: output-contains + config: + substring: app.bundle.js + - type: output-contains + config: + substring: blazor.webview.js + - type: output-contains + config: + substring: wwwroot/index.html + - type: output-matches + config: + pattern: '_content/IgniteUI\.Blazor/themes/' + - type: prompt + rubric: + - Adds the core Ignite UI Blazor package to the MAUI project + - Registers the Ignite UI services on the MauiApp builder's service collection + - Identifies wwwroot/index.html as the host page that needs the stylesheet and script tags for this project type + - Explains that the unstyled result comes from the missing theme stylesheet and the completely-absent components from the missing Ignite UI script + - Puts the Ignite UI script before the Blazor framework script + - Names blazor.webview.js as the framework script for a Blazor Hybrid host page instead of blazor.server.js or blazor.webassembly.js + - Makes the control namespace available to the pages, for example through _Imports.razor + - Does not send the user after render mode configuration, which does not apply to this project type + - name: Wire up a grid-only Ignite UI setup + prompt: | + I only need a data grid out of Ignite UI — none of the other components — so I added just the IgniteUI.Blazor.GridLite package to my Blazor WebAssembly app and put the grid component on a page. + + Nothing renders where the grid should be, and in an earlier attempt I got a grid that was completely unstyled. My index.html currently has no Ignite UI tags in it at all. + + Give me the exact package, startup and index.html changes for a grid-only setup, and don't have me pull in things I don't need. + graders: + - type: output-contains + config: + substring: IgniteUI.Blazor.GridLite + - type: output-contains + config: + substring: AddIgniteUIBlazor + - type: output-contains + config: + substring: app.bundle.js + - type: output-contains + config: + substring: blazor.webassembly.js + - type: output-matches + config: + pattern: '_content/IgniteUI\.Blazor\.GridLite/css/themes/' + - type: prompt + rubric: + - Registers the Ignite UI services in Program.cs even though only the grid package is referenced + - Links the grid package's own stylesheet, served from the grid package's content root rather than from the core package's theme folder + - Adds the Ignite UI script to wwwroot/index.html ahead of blazor.webassembly.js + - Explains that the absent grid is caused by the missing script and the unstyled grid by the missing stylesheet + - Makes the control namespace available to the page, for example through _Imports.razor + - Keeps the setup grid-only instead of telling the user to also reference the full component package From 8d11f7d20bf45fc5e0542c82af9c8d426a61d042 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Mon, 24 Aug 2026 17:58:54 +0300 Subject: [PATCH 04/12] fix(use-igniteui-blazor): addressing copilot comments and fixing an issue I noticed with the skill --- .../skills/use-igniteui-blazor/SKILL.md | 6 ++++-- .../use-igniteui-blazor/eval.yaml | 20 +++++++++---------- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md b/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md index d969dedd92..6d0c872e2b 100644 --- a/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md +++ b/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md @@ -26,7 +26,9 @@ dotnet add package IgniteUI.Blazor.Lite # OSS core UI components (MIT) dotnet add package IgniteUI.Blazor.GridLite # OSS lightweight grid (MIT) ``` -## 2. `Program.cs` +## 2. `IgniteUI.Blazor.Lite` Service Registration + +Usually in `Program.cs`: ```csharp builder.Services.AddIgniteUIBlazor(); // all modules available @@ -83,7 +85,7 @@ Theme files under `_content/IgniteUI.Blazor/themes/` are `{light|dark}/{bootstra ``` -`IgniteUI.Blazor.GridLite` ships its own stylesheet from its own asset root: +`IgniteUI.Blazor.GridLite` ships its own stylesheet from its own asset root, but should be used only if you are using the GridLite component exclusively. If you are using other Ignite UI components, use the main theme stylesheet above. ```html diff --git a/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml b/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml index b1a4f4f69b..c350cb4a06 100644 --- a/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml +++ b/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml @@ -14,7 +14,7 @@ stimuli: 1. The package references for the core Ignite UI Blazor components and the GridLite package. 2. The service registration needed in Program.cs for a split Blazor Web App. 3. The _Imports.razor entry required so the component namespaces are available. - 4. The host-page CSS and script tags, including the correct order and the fact that GridLite uses its own stylesheet root. + 4. The host-page CSS and script tags, including the correct order. 5. Any note about where AddIgniteUIBlazor() has to be called in a split app. Keep the answer concrete and file-oriented. I do not want a generic overview. @@ -34,12 +34,12 @@ stimuli: - type: output-contains config: substring: app.bundle.js - - type: output-contains + - type: output-does-not-contain config: - substring: GridLite/css/themes/light/bootstrap.css + substring: _content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css - type: output-contains config: - substring: themes/light/bootstrap.css + substring: _content/IgniteUI.Blazor/themes/light/bootstrap.css - type: output-matches config: pattern: '(?:both|each)[\s\S]{0,80}(?:[Ss]erver[\s\S]{0,80}[Cc]lient|[Cc]lient[\s\S]{0,80}[Ss]erver)' @@ -49,7 +49,7 @@ stimuli: - Says AddIgniteUIBlazor() must be called in both the Server and Client Program.cs files for a split Blazor Web App - Adds @using IgniteUI.Blazor.Controls to _Imports.razor so the components are available everywhere that needs them - Includes both the Ignite UI theme stylesheet and app.bundle.js in the host page, with app.bundle.js before the Blazor framework script - - Calls out that GridLite uses its own stylesheet path under _content/IgniteUI.Blazor.GridLite/ + - Does not suggest the GridLite stylesheet, which is only needed for a grid-only setup - Keeps the answer specific to the relevant files instead of giving only general guidance - name: Wire Ignite UI into a single-project Blazor Server app prompt: | @@ -126,17 +126,17 @@ stimuli: prompt: | I only need a data grid out of Ignite UI — none of the other components — so I added just the IgniteUI.Blazor.GridLite package to my Blazor WebAssembly app and put the grid component on a page. - Nothing renders where the grid should be, and in an earlier attempt I got a grid that was completely unstyled. My index.html currently has no Ignite UI tags in it at all. + I got a grid that was completely unstyled. My index.html currently has no Ignite UI tags in it at all. Give me the exact package, startup and index.html changes for a grid-only setup, and don't have me pull in things I don't need. graders: - type: output-contains config: substring: IgniteUI.Blazor.GridLite - - type: output-contains + - type: output-does-not-contain config: substring: AddIgniteUIBlazor - - type: output-contains + - type: output-does-not-contain config: substring: app.bundle.js - type: output-contains @@ -147,9 +147,9 @@ stimuli: pattern: '_content/IgniteUI\.Blazor\.GridLite/css/themes/' - type: prompt rubric: - - Registers the Ignite UI services in Program.cs even though only the grid package is referenced + - Does not register the Ignite UI services in Program.cs - Links the grid package's own stylesheet, served from the grid package's content root rather than from the core package's theme folder - Adds the Ignite UI script to wwwroot/index.html ahead of blazor.webassembly.js - - Explains that the absent grid is caused by the missing script and the unstyled grid by the missing stylesheet + - Explains that the unstyled grid is caused by the missing stylesheet - Makes the control namespace available to the page, for example through _Imports.razor - Keeps the setup grid-only instead of telling the user to also reference the full component package From ebab96e337debd7e1817f66ea7b4e2be46a254ce Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Tue, 25 Aug 2026 11:28:27 +0300 Subject: [PATCH 05/12] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md b/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md index 6d0c872e2b..f0cc3455c6 100644 --- a/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md +++ b/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md @@ -85,7 +85,7 @@ Theme files under `_content/IgniteUI.Blazor/themes/` are `{light|dark}/{bootstra ``` -`IgniteUI.Blazor.GridLite` ships its own stylesheet from its own asset root, but should be used only if you are using the GridLite component exclusively. If you are using other Ignite UI components, use the main theme stylesheet above. +`IgniteUI.Blazor.GridLite` ships its own stylesheet from its own asset root, but should be used only if you are using the GridLite component exclusively. If you are using other Ignite UI components, do not link (or suggest) the GridLite stylesheet — use the main theme stylesheet above instead. ```html From b7658d635a0495c535a0482eaa679f33e09e98e6 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Tue, 25 Aug 2026 11:31:33 +0300 Subject: [PATCH 06/12] fix(use-igniteui-blazor): applying copilot comment to eval rubric --- tests/dotnet-blazor/use-igniteui-blazor/eval.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml b/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml index c350cb4a06..4db57517a7 100644 --- a/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml +++ b/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml @@ -36,7 +36,7 @@ stimuli: substring: app.bundle.js - type: output-does-not-contain config: - substring: _content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css + substring: ' Date: Thu, 27 Aug 2026 16:43:03 +0300 Subject: [PATCH 07/12] tests(use-igniteui-blazor): adding one more stimulus to satisfy the requirements of 5 --- .../use-igniteui-blazor/eval.yaml | 54 +++++++++++++++++-- 1 file changed, 50 insertions(+), 4 deletions(-) diff --git a/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml b/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml index 4db57517a7..536bdb86f4 100644 --- a/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml +++ b/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml @@ -3,7 +3,7 @@ description: Evaluates the dotnet-blazor/use-igniteui-blazor skill type: capability defaults: timeout: 10m - runs: 3 + runs: 5 stimuli: - name: Wire Ignite UI into a split Blazor Web App prompt: | @@ -34,7 +34,7 @@ stimuli: - type: output-contains config: substring: app.bundle.js - - type: output-does-not-contain + - type: output-not-contains config: substring: ' Date: Mon, 31 Aug 2026 11:02:44 +0300 Subject: [PATCH 08/12] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- tests/dotnet-blazor/use-igniteui-blazor/eval.yaml | 1 - 1 file changed, 1 deletion(-) diff --git a/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml b/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml index 536bdb86f4..a04d9ecbf5 100644 --- a/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml +++ b/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml @@ -149,7 +149,6 @@ stimuli: rubric: - Does not register the Ignite UI services in Program.cs - Links the grid package's own stylesheet, served from the grid package's content root rather than from the core package's theme folder - - Adds the Ignite UI script to wwwroot/index.html ahead of blazor.webassembly.js - Explains that the unstyled grid is caused by the missing stylesheet - Makes the control namespace available to the page, for example through _Imports.razor - Keeps the setup grid-only instead of telling the user to also reference the full component package From 44f5ca37c4368b50c6ff6ea75351b57bcbb32137 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Wed, 2 Sep 2026 10:19:11 +0300 Subject: [PATCH 09/12] Update plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md Co-authored-by: Daniel Roth --- plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md b/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md index f0cc3455c6..5142b43ca4 100644 --- a/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md +++ b/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md @@ -2,7 +2,7 @@ license: MIT name: use-igniteui-blazor description: > - Add, configure, or review Ignite UI component support in Blazor applications. + Add, configure, or review Ignite UI for Blazor Lite component support in Blazor applications. USE FOR: installing IgniteUI.Blazor.Lite or IgniteUI.Blazor.GridLite, registering AddIgniteUIBlazor() in Blazor Server, WASM, Hybrid, or split Blazor Web App projects, adding @using IgniteUI.Blazor.Controls, wiring the From f8f2e18ffed74cca7f1c4c485df939f94bfa557b Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Tue, 8 Sep 2026 15:18:26 +0300 Subject: [PATCH 10/12] fix(use-igniteui-blazor): applying the latest review comments --- .../skills/use-igniteui-blazor/SKILL.md | 23 +++----- .../use-igniteui-blazor/eval.yaml | 53 ++++--------------- 2 files changed, 17 insertions(+), 59 deletions(-) diff --git a/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md b/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md index 5142b43ca4..1a301c5ed0 100644 --- a/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md +++ b/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md @@ -6,10 +6,10 @@ description: > USE FOR: installing IgniteUI.Blazor.Lite or IgniteUI.Blazor.GridLite, registering AddIgniteUIBlazor() in Blazor Server, WASM, Hybrid, or split Blazor Web App projects, adding @using IgniteUI.Blazor.Controls, wiring the - theme stylesheet and app.bundle.js assets, picking the right host page and - framework script, locating the GridLite stylesheet path, explaining - single-project vs split Server/Client Web App setup differences, and checking - where an interactive render mode is needed for Ignite UI components to work. + theme stylesheet, picking the right host page, locating the GridLite + stylesheet path, explaining single-project vs split Server/Client Web App + setup differences, and checking where an interactive render mode is needed + for Ignite UI components to work. DO NOT USE FOR: general Blazor component authoring without Ignite UI, choosing app architecture or render mode from scratch (see create-blazor-project), JavaScript interop (see use-js-interop), authentication (see configure-auth), @@ -64,18 +64,15 @@ builder.Services.AddIgniteUIBlazor(); Add it to both `_Imports.razor` files in split Blazor Web App solutions. -## 4. Host page — CSS and script +## 4. Host page — theme stylesheet Host page is `wwwroot/index.html` (WASM/MAUI), `Pages/_Host.cshtml` (Server), or `Components/App.razor` (Web App). ```html -... - - ``` -Both tags are required: without the stylesheet components render unstyled, without `app.bundle.js` they do not render at all. `app.bundle.js` must come **before** the Blazor framework script. +The stylesheet is required: without it components render unstyled. Theme files under `_content/IgniteUI.Blazor/themes/` are `{light|dark}/{bootstrap|material|fluent|indigo}.css` — link exactly one. @@ -101,11 +98,3 @@ Ignite UI components need an interactive render mode; static SSR renders nothing Or globally in `App.razor`: ``. -## Project type reference - -| Project type | Builder | Host page | Framework script | -|---|---|---|---| -| Blazor Server | `WebApplication.CreateBuilder` | `Pages/_Host.cshtml` | `blazor.server.js` | -| Blazor WASM | `WebAssemblyHostBuilder` | `wwwroot/index.html` | `blazor.webassembly.js` | -| Blazor Web App | both server + client | `Components/App.razor` | `blazor.web.js` | -| MAUI Blazor Hybrid | `MauiApp.CreateBuilder` | `wwwroot/index.html` | `blazor.webview.js` | diff --git a/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml b/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml index a04d9ecbf5..a3b209976c 100644 --- a/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml +++ b/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml @@ -14,7 +14,7 @@ stimuli: 1. The package references for the core Ignite UI Blazor components and the GridLite package. 2. The service registration needed in Program.cs for a split Blazor Web App. 3. The _Imports.razor entry required so the component namespaces are available. - 4. The host-page CSS and script tags, including the correct order. + 4. The host-page tags for the Ignite UI assets. 5. Any note about where AddIgniteUIBlazor() has to be called in a split app. Keep the answer concrete and file-oriented. I do not want a generic overview. @@ -31,15 +31,12 @@ stimuli: - type: output-contains config: substring: _Imports.razor - - type: output-contains - config: - substring: app.bundle.js - type: output-not-contains config: substring: ' Date: Tue, 8 Sep 2026 16:36:19 +0300 Subject: [PATCH 11/12] fix(lint): removing an extra blank line --- plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md | 1 - 1 file changed, 1 deletion(-) diff --git a/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md b/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md index 1a301c5ed0..d3945d0efc 100644 --- a/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md +++ b/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md @@ -97,4 +97,3 @@ Ignite UI components need an interactive render mode; static SSR renders nothing ``` Or globally in `App.razor`: ``. - From 7f71bd0784ca3a37f1a1dad0d0b827867bcc780e Mon Sep 17 00:00:00 2001 From: Milos Kotlar Date: Wed, 9 Sep 2026 13:43:21 +0200 Subject: [PATCH 12/12] Address Ignite UI skill review feedback Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 30fab6c6-952c-4a25-a586-e374c984a247 --- .../skills/use-igniteui-blazor/SKILL.md | 4 +- .../use-igniteui-blazor/eval.yaml | 52 +++++++++++++++---- 2 files changed, 44 insertions(+), 12 deletions(-) diff --git a/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md b/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md index d3945d0efc..601805ba20 100644 --- a/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md +++ b/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md @@ -41,7 +41,9 @@ builder.Services.AddIgniteUIBlazor( typeof(IgbInputModule), typeof(IgbComboModule), typeof(IgbDialogModule)); ``` -Module names always follow `Igb{ComponentName}Module`. In `IgniteUI.Blazor.Lite` a component registers its own module on first render, so the explicit list trims the initial payload rather than gating rendering. +Module names always follow `Igb{ComponentName}Module`. Passing modules eagerly loads them during startup, increasing the initial transfer to reduce first-render latency. Components not listed still register their own modules on first render. + +For a GridLite-only setup, do not call `AddIgniteUIBlazor()` or add `app.bundle.js`. Reference `IgniteUI.Blazor.GridLite`, add the control namespace, and link the GridLite stylesheet shown below. **Blazor Web App:** call `AddIgniteUIBlazor()` in **both** the server and the client `Program.cs`. diff --git a/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml b/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml index a3b209976c..90ca90db68 100644 --- a/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml +++ b/tests/dotnet-blazor/use-igniteui-blazor/eval.yaml @@ -31,9 +31,6 @@ stimuli: - type: output-contains config: substring: _Imports.razor - - type: output-not-contains - config: - substring: '