Add Ignite UI Blazor skill

plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md

@@ -0,0 +1,101 @@
+---
+license: MIT
+name: use-igniteui-blazor
+description: >
+  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
+  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),
+  prerendering (see support-prerendering), or layout/component design questions that need
+  no Ignite UI setup.
+---
+
+# 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. `IgniteUI.Blazor.Lite` Service Registration
+
+Usually in `Program.cs`:
+
+```csharp
+builder.Services.AddIgniteUIBlazor();   // all modules available
+```
+
+Pass `typeof(Igb<Name>Module)` 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`. 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`.
+
+```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 — theme stylesheet
+
+Host page is `wwwroot/index.html` (WASM/MAUI), `Pages/_Host.cshtml` (Server), or `Components/App.razor` (Web App).
+
+```html
+<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+```
+
+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.
+
+.NET 9+ Web App projects can use the fingerprinted asset collection:
+
+```razor
+<link rel="stylesheet" href="@Assets["_content/IgniteUI.Blazor/themes/light/bootstrap.css"]" />
+```
+
+`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
+<link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css" rel="stylesheet" />
+```
+
+## 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`: `<Routes @rendermode="InteractiveAuto" />`.

tests/dotnet-blazor/use-igniteui-blazor/eval.yaml

@@ -0,0 +1,199 @@
+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 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.
+    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-matches
+        config:
+          pattern: '_content/IgniteUI\.Blazor/themes/(?:light|dark)/(?:bootstrap|material|fluent|indigo)\.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)'
+      - 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
+      - Links an Ignite UI theme stylesheet in the host page
+      - 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: |
+      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-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 an Ignite UI theme stylesheet in Pages/_Host.cshtml
+      - 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 the components showed up as plain unstyled markup.
+
+      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: wwwroot/index.html
+      - type: output-matches
+        config:
+          pattern: '_content/IgniteUI\.Blazor/themes/(?:light|dark)/(?:bootstrap|material|fluent|indigo)\.css'
+      - 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 theme stylesheet for this project type
+      - Explains that the unstyled result comes from the missing theme stylesheet
+      - 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.
+
+      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-matches
+        config:
+          pattern: '_content/IgniteUI\.Blazor\.GridLite/css/themes/'
+      - type: prompt
+    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
+      - 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
+  - name: Set up Ignite UI components without the grid package
+    prompt: |
+      I have a standalone Blazor WebAssembly app — wwwroot/index.html, no server project — and I want to use Ignite UI inputs, a combo and a dialog on a few pages. I am never going to put a data grid in this app, so leave anything grid-related out of your answer entirely.
+
+      Two things I specifically want covered:
+
+      1. I want the dark material theme rather than the default one. Give me the exact stylesheet path.
+      2. Can I pre-load the modules for the components I use to reduce their first-render latency, and what does that do to the initial download? Would other components still render?
+
+      Otherwise just give me the package, the startup registration, the imports and the exact index.html tags.
+    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: _content/IgniteUI.Blazor/themes/dark/material.css
+      - type: output-matches
+        config:
+          pattern: 'Igb[A-Za-z]+Module'
+      - type: prompt
+    rubric:
+      - References only IgniteUI.Blazor.Lite and does not pull in the grid package the user ruled out
+      - Registers the services once, with AddIgniteUIBlazor() in the WebAssembly app's Program.cs
+      - Gives the dark material theme path out of the core package's theme folder instead of the light bootstrap default
+      - Links exactly one theme stylesheet rather than several
+      - Shows the module overload of AddIgniteUIBlazor() taking Igb{Component}Module arguments for the components the user named
+      - Explains that explicitly listed modules are loaded during startup, increasing the initial transfer to reduce their first-render latency
+      - Says unlisted components still register their own modules on first render instead of claiming they will not work
+      - Links the theme stylesheet in wwwroot/index.html
+      - Makes the control namespace available to the pages, for example through _Imports.razor
+      - Does not tell the user to add an interactive render mode directive, which does not apply to a standalone WebAssembly app
+  - name: Wire Ignite UI into an interactive server Blazor Web App
+    prompt: |
+      I have a .NET 9 Blazor Web App with one server project and Interactive Server components. I want to add Ignite UI inputs and dialogs.
+
+      Give me the package, Program.cs registration, imports, App.razor theme tag and render-mode setup. Use the .NET 9 asset collection syntax where it applies. Do not invent a separate client project.
+    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-matches
+        config:
+          pattern: '@Assets\["_content/IgniteUI\.Blazor/themes/(?:light|dark)/(?:bootstrap|material|fluent|indigo)\.css"\]'
+      - type: output-matches
+        config:
+          pattern: 'InteractiveServer'
+      - type: prompt
+    rubric:
+      - Adds IgniteUI.Blazor.Lite to the existing server project
+      - Registers AddIgniteUIBlazor() once in the server Program.cs without inventing a client project
+      - Adds @using IgniteUI.Blazor.Controls to _Imports.razor
+      - Uses the @Assets fingerprinted asset collection syntax for the theme stylesheet in Components/App.razor
+      - Configures an InteractiveServer render mode for the component or globally
+  - name: Stay dormant for a plain Blazor component request
+    prompt: |
+      Build a reusable Blazor confirmation dialog component with confirm and cancel callbacks. Use only built-in Blazor APIs and include a small usage example.
+    expect_activation: false
+    graders:
+      - type: prompt
+    rubric:
+      - The Ignite UI skill stayed dormant because the request does not mention Ignite UI
+      - Answers the general Blazor component request without introducing Ignite UI packages or setup
+      - Uses built-in Blazor component patterns for parameters and callbacks