Add Ignite UI Blazor skill - #994
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request introduces a new dotnet-blazor skill that guides developers through integrating Ignite UI (including GridLite) into Blazor apps—especially split Blazor Web Apps—and adds a capability eval to validate that the skill produces concrete, file-oriented setup steps.
Changes:
- Added a new skill document (
SKILL.md) describing NuGet packages, service registration,_Imports.razor, host-page assets, and render-mode guidance for Ignite UI in Blazor. - Added a new evaluation spec (
eval.yaml) to test that responses include the required packages,AddIgniteUIBlazor()registration,_Imports.razorusage, and asset linking details.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| tests/dotnet-blazor/use-igniteui-blazor/eval.yaml | Adds a capability eval that checks for key Ignite UI integration details in the model output. |
| plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md | Adds the new skill guidance for installing/configuring Ignite UI (Lite + GridLite) across Blazor project types. |
Suppressed comments (2)
plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md:84
- The fingerprinted asset example also uses the
_content/IgniteUI.Blazor/...root; if the intent is to document the Lite package setup, this should reference the Lite asset root for consistency with the rest of the setup steps.
<link rel="stylesheet" href="@Assets["_content/IgniteUI.Blazor/themes/light/bootstrap.css"]" />
plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md:79
- The theme path description still points to
_content/IgniteUI.Blazor/themes/, which doesn’t match the recommendedIgniteUI.Blazor.Litepackage in this skill. Aligning the documented_contentroot avoids confusion about which static asset base path to use.
Theme files under `_content/IgniteUI.Blazor/themes/` are `{light|dark}/{bootstrap|material|fluent|indigo}.css` — link exactly one.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| - type: output-contains | ||
| config: | ||
| substring: server and client Program.cs | ||
| - type: prompt |
|
Tagging @danroth27 and @javiercn to help review. |
| license: MIT | ||
| name: use-igniteui-blazor | ||
| description: > | ||
| Add, configure, or review Ignite UI component support in Blazor applications. |
There was a problem hiding this comment.
I think maximum of 1024 chars, please check if it fits
There was a problem hiding this comment.
The eval infra should flag if it exceeds.
There was a problem hiding this comment.
@kotlarmilos @AbhitejJohn Brought the description down to 924 chars.
| builder.Services.AddIgniteUIBlazor(); // all modules available | ||
| ``` | ||
|
|
||
| Pass `typeof(Igb<Name>Module)` values to eagerly pre-load a specific set instead: |
There was a problem hiding this comment.
Do you want to provide an example?
There was a problem hiding this comment.
@kotlarmilos The code snippet on lines 37-40 is the example.
| defaults: | ||
| timeout: 10m | ||
| runs: 5 | ||
| stimuli: |
There was a problem hiding this comment.
This eval runs the same scenario five times, so it does not test the other supported setups, for example single project blazor server, MAUI blazor hybrid, GridLite only setup
There was a problem hiding this comment.
@kotlarmilos I believe all review comments have been addressed (including the copilot one) in the latest commit. If everything looks OK now, I will work on moving this to a different branch, which is not in a fork. However evals should be able to be ran with a manual workflow approval off of forks.
|
/evaluate |
There was a problem hiding this comment.
Review details
Suppressed comments (4)
plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md:74
- The static web asset paths in this example point at
_content/IgniteUI.Blazor/..., which corresponds to the non-Lite package. Since this skill instructs installingIgniteUI.Blazor.Lite, the CSS/JS URLs should use_content/IgniteUI.Blazor.Lite/...or users will get 404s and the components won’t load.
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
...
<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
<script src="_framework/blazor.web.js"></script> <!-- or blazor.server.js / blazor.webassembly.js / blazor.webview.js -->
plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md:79
- This path should also use the
IgniteUI.Blazor.Litestatic asset root to match the package name used elsewhere in the skill; otherwise the guidance is inconsistent and likely wrong for OSS Lite installs.
Theme files under `_content/IgniteUI.Blazor/themes/` are `{light|dark}/{bootstrap|material|fluent|indigo}.css` — link exactly one.
tests/dotnet-blazor/use-igniteui-blazor/eval.yaml:46
- This grader is very brittle: the skill text says “both the server and the client
Program.cs”, which won’t match the exact substringserver and client Program.cs. Using a case-insensitive regex makes the check resilient while still enforcing that both sides are mentioned.
- type: output-contains
config:
substring: server and client Program.cs
- type: prompt
plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md:84
- This fingerprinted asset example should use the
IgniteUI.Blazor.Litestatic asset root to match the package name used elsewhere in the skill; otherwise it won’t resolve for OSS Lite installs.
<link rel="stylesheet" href="@Assets["_content/IgniteUI.Blazor/themes/light/bootstrap.css"]" />
- Files reviewed: 2/2 changed files
- Comments generated: 0 new
- Review effort level: Lite
|
|
@kdinev , @kotlarmilos : Would you mind moving these changes to a branch against this repo please? That would help get PR evaluations going. They do not run against branches in forks. |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
Suppressed comments (2)
Previously missed (2) — in code that hasn't changed since the last review.
plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md:83
- The Razor example for fingerprinted assets uses nested double quotes (href="@assets["..."]"), which won’t compile because the attribute string terminates early. Use single quotes around the HTML attribute (or assign the value to a variable) so the indexer string literal is parsed correctly.
```razor
<link rel="stylesheet" href="@Assets["_content/IgniteUI.Blazor/themes/light/bootstrap.css"]" />
**plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md:91**
* The GridLite section only mentions the stylesheet path, but GridLite also requires its own JS bundle when used in a grid-only setup. Without referencing the GridLite app.bundle.js, users can end up with a grid that doesn’t render.
IgniteUI.Blazor.GridLite ships its own stylesheet from its own asset root:
<link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css" rel="stylesheet" /></details>
…ssue I noticed with the skill
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
Suppressed comments (1)
plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md:91
- This GridLite stylesheet example uses a concrete light/bootstrap path that the split-app eval explicitly forbids in output. Making the example path generic reduces the chance the model will echo the exact forbidden substring in non-grid answers while still documenting the correct asset root.
<link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css" rel="stylesheet" />
| - type: output-does-not-contain | ||
| config: | ||
| substring: _content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css | ||
| - type: output-contains |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
Suppressed comments (2)
Previously missed (1) — in code that hasn't changed since the last review.
plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md:22
- This skill has no markdown ordered-list workflow steps (
1. ...lines), so skill-validator will emit the warning "No numbered workflow steps". Adding a short ordered workflow list improves agent adherence and avoids that warning.
# Application Setup & Component Registration
## 1. NuGet package
tests/dotnet-blazor/use-igniteui-blazor/eval.yaml:142
- The grid-only scenario uses
output-does-not-contain(unsupported) and also forbids the substringapp.bundle.js, while the rubric requires adding the Ignite UI script. These constraints are internally inconsistent and will likely make the scenario ungradable or force an incorrect answer.
- type: output-does-not-contain
config:
substring: AddIgniteUIBlazor
- type: output-does-not-contain
config:
substring: app.bundle.js
- type: output-contains
| - type: output-does-not-contain | ||
| config: | ||
| substring: _content/IgniteUI.Blazor.GridLite/css/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" /> | ||
| ``` |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
Suppressed comments (8)
Previously missed (1) — in code that hasn't changed since the last review.
plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md:22
- This SKILL.md has no markdown ordered-list steps (
1. ...), which triggers the skill-validator warning "No numbered workflow steps" and is inconsistent with other dotnet-blazor skills that include sequenced steps. Adding a short numbered workflow list improves agent reliability and keeps the skill profile clean.
# Application Setup & Component Registration
## 1. NuGet package
tests/dotnet-blazor/use-igniteui-blazor/eval.yaml:39
- The grader type
output-does-not-containis not a standard vally/skill-validator grader (repo usesoutput-not-contains). Also, checking for the full<link ...tag is overly specific and can miss incorrect suggestions that still mention the GridLite stylesheet path.
- type: output-does-not-contain
config:
substring: '<link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css"'
tests/dotnet-blazor/use-igniteui-blazor/eval.yaml:80
- For consistency with the Lite package and to keep the grader resilient across theme choices, the regex should match the Lite asset root (
IgniteUI.Blazor.Lite) rather thanIgniteUI.Blazor.
- type: output-matches
config:
pattern: '_content/IgniteUI\.Blazor/themes/'
- type: prompt
tests/dotnet-blazor/use-igniteui-blazor/eval.yaml:115
- For consistency with the Lite package, the regex should match
_content/IgniteUI.Blazor.Lite/themes/rather than_content/IgniteUI.Blazor/themes/.
- type: output-matches
config:
pattern: '_content/IgniteUI\.Blazor/themes/'
- type: prompt
tests/dotnet-blazor/use-igniteui-blazor/eval.yaml:138
- The grader type
output-does-not-containis not a standard vally/skill-validator grader (repo usesoutput-not-contains/output-not-matches). This will likely cause schema validation to fail.
- type: output-does-not-contain
config:
substring: AddIgniteUIBlazor
tests/dotnet-blazor/use-igniteui-blazor/eval.yaml:141
- The grader type
output-does-not-containis not a standard vally/skill-validator grader (repo usesoutput-not-contains/output-not-matches). This will likely cause schema validation to fail.
- type: output-does-not-contain
config:
substring: app.bundle.js
plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md:80
- This note points to the theme directory under
_content/IgniteUI.Blazor/themes/, which is inconsistent with theIgniteUI.Blazor.Litepackage used elsewhere in the skill. Using the Lite package ID here avoids confusion when users try to locate the theme files.
Theme files under `_content/IgniteUI.Blazor/themes/` are `{light|dark}/{bootstrap|material|fluent|indigo}.css` — link exactly one.
plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md:85
- The fingerprinted-asset example uses the non-Lite asset root. If the package reference is
IgniteUI.Blazor.Lite, the Assets[] key should likely use_content/IgniteUI.Blazor.Lite/...as well.
<link rel="stylesheet" href="@Assets["_content/IgniteUI.Blazor/themes/light/bootstrap.css"]" />
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
Suppressed comments (3)
tests/dotnet-blazor/use-igniteui-blazor/eval.yaml:40
output-does-not-containis not a recognized grader type in this repo’s eval schema (other evals useoutput-not-contains). As written, the eval will fail schema validation or be ignored.
- type: output-does-not-contain
config:
substring: '<link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css"'
- type: output-contains
tests/dotnet-blazor/use-igniteui-blazor/eval.yaml:136
output-does-not-containis not a valid grader type here; the standard negative contains grader isoutput-not-contains(see other eval.yaml files under tests/).
- type: output-does-not-contain
tests/dotnet-blazor/use-igniteui-blazor/eval.yaml:139
output-does-not-containis not a valid grader type here; the standard negative contains grader isoutput-not-contains.
- type: output-does-not-contain
| # Application Setup & Component Registration | ||
|
|
||
| ## 1. NuGet package | ||
|
|
…ills into igniteui-blazor-skills
Summary
This pull request adds a new skill for integrating Ignite UI components into Blazor applications, along with an evaluation test for the skill. The main focus is to provide clear, file-oriented guidance for adding and configuring Ignite UI in various Blazor project types, especially split Blazor Web Apps.
Related issue
Validation
Introduced a new evaluation YAML (
eval.yaml) that tests the skill’s ability to provide concrete, file-specific integration steps for using Ignite UI in a split Blazor Web App. The evaluation checks for explicit package references, service registration in both server and client, correct_Imports.razorusage, proper asset linking, and file-oriented instructions.Checklist
eng/known-domains.txtfor any new external domains referenced by skill content.