feat(skills): attempt at making the skills more standalone - #277
Conversation
There was a problem hiding this comment.
Pull request overview
This PR refactors the skills/ documentation set to be more standalone and copyable into downstream app repos, reducing reliance on MCP server availability by moving setup guidance into each skill hub and tightening the “how to use” routing instructions.
Changes:
- Reworked the main skills README and each skill hub (
SKILL.md) to emphasize self-contained references and an optional MCP workflow. - Consolidated MCP setup guidance into the skill hubs and removed per-skill
references/mcp-setup.mdfiles. - Simplified and tightened multiple reference docs (grids, components, theming) to be more task-oriented and consistent.
Reviewed changes
Copilot reviewed 29 out of 29 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| skills/README.md | Reframes the skills as standalone, adds skill tables, and clarifies MCP as optional. |
| skills/igniteui-blazor-theming/SKILL.md | Condenses theming guidance, adds “how to use”, and embeds optional MCP setup snippet. |
| skills/igniteui-blazor-theming/references/mcp-setup.md | Removed; setup guidance moved into the skill hub. |
| skills/igniteui-blazor-theming/references/common-patterns.md | Streamlined theming patterns and examples; adds runtime switching guidance and ::deep notes. |
| skills/igniteui-blazor-lite-testing/SKILL.md | Minor wording consolidation/clarification around test suite responsibilities. |
| skills/igniteui-blazor-grids/SKILL.md | Rewritten as a “how to use” hub with routing table + optional MCP setup embedded. |
| skills/igniteui-blazor-grids/references/structure.md | Simplifies setup/columns/templates examples and adds clarified notes (e.g., IconName). |
| skills/igniteui-blazor-grids/references/state.md | Streamlines state persistence guidance and examples; emphasizes restore-after-render. |
| skills/igniteui-blazor-grids/references/sizing.md | Condenses sizing guidance; clarifies virtualization and density (--ig-size) behavior. |
| skills/igniteui-blazor-grids/references/paging-remote.md | Condenses paging/remote ops guidance; clarifies paginator placement and remote patterns. |
| skills/igniteui-blazor-grids/references/mcp-setup.md | Removed; setup guidance moved into the skill hub. |
| skills/igniteui-blazor-grids/references/grid-migration.md | Condenses GridLite→Grid migration guidance and examples. |
| skills/igniteui-blazor-grids/references/features.md | Condenses features guidance; adds/updates examples for toolbar/export/drag/action strip. |
| skills/igniteui-blazor-grids/references/editing.md | Condenses editing guidance; updates examples for cell/row editing and validation. |
| skills/igniteui-blazor-grids/references/data-operations.md | Condenses programmatic sorting/filtering/grouping guidance and examples. |
| skills/igniteui-blazor-components/SKILL.md | Rewritten as a “how to use” hub with routing table + optional MCP setup embedded. |
| skills/igniteui-blazor-components/references/setup.md | Streamlines setup steps and clarifies Blazor Web App specifics (dual Program.cs, render mode). |
| skills/igniteui-blazor-components/references/mcp-setup.md | Removed; setup guidance moved into the skill hub. |
| skills/igniteui-blazor-components/references/layout.md | Updates layout/nav component guidance and examples; adds Splitter/Divider and async-method guidance. |
| skills/igniteui-blazor-components/references/layout-manager.md | Updates Tile/Dock Manager guidance and examples; clarifies package boundaries and persistence notes. |
| skills/igniteui-blazor-components/references/form-controls.md | Condenses form controls guidance; adds concise member tables and modern binding notes. |
| skills/igniteui-blazor-components/references/feedback.md | Condenses overlay components guidance; clarifies async vs sync methods and selection guidance. |
| skills/igniteui-blazor-components/references/data-display.md | Condenses “data display” guidance; adds/updates examples for more components (dropdown, highlight, chat, carousel). |
| skills/igniteui-blazor-components/references/charts.md | Condenses visualization guidance; clarifies common pitfalls and chart sizing/theming constraints. |
| skills/AGENTS.md | Updates Ignite UI section to align with the new “standalone skills + optional MCP” framing. |
Comments suppressed due to low confidence (1)
skills/igniteui-blazor-grids/references/state.md:52
- The sample method is named
SaveSortingOnly, but it saves bothsortingandfiltering. This is misleading for readers and makes the example contradict itself. Either rename the method or change the feature list to justsorting.
private Task<string> SaveSortingOnly()
=> gridState.GetStateAsStringAsync(new[] { "sorting", "filtering" });
| await gridState.ApplyStateFromStringAsync(json, Array.Empty<string>()); | ||
| } | ||
|
|
||
| private async void OnGridRendered() => await RestoreState(); |
| To enable the server, add to `.vscode/mcp.json` (VS Code, key `servers`) or `.cursor/mcp.json` / `claude_desktop_config.json` (key `mcpServers`): | ||
|
|
||
| ## Key Rules | ||
| ```json | ||
| { "servers": { "igniteui-theming": { "command": "npx", "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] } } } | ||
| ``` |
| `igniteui-cli` provides `list_components`, `get_doc`, `search_docs`, `search_api`, `get_api_reference`, all taking `framework: "blazor"`. To enable it, add to `.vscode/mcp.json` (VS Code, key `servers`) or `.cursor/mcp.json` / `claude_desktop_config.json` (key `mcpServers`): | ||
|
|
||
| --- | ||
| ```json | ||
| { "servers": { "igniteui-cli": { "command": "npx", "args": ["-y", "igniteui-cli", "mcp"] } } } | ||
| ``` |
| `igniteui-cli` provides `list_components`, `get_doc`, `search_docs`, `search_api`, `get_api_reference`, all taking `framework: "blazor"`. To enable it, add to `.vscode/mcp.json` (VS Code, key `servers`) or `.cursor/mcp.json` / `claude_desktop_config.json` (key `mcpServers`): | ||
|
|
||
| | Package | Source | Who uses it | | ||
| |---|---|---| | ||
| | `IgniteUI.Blazor.Lite` | NuGet.org | Open-source / MIT users needing core UI components (forms, layout, navigation, data display, feedback) | | ||
| | `IgniteUI.Blazor.GridLite` | NuGet.org | Open-source / MIT users needing the lightweight `IgbGridLite` data grid | | ||
| | `IgniteUI.Blazor` | Infragistics private NuGet feed (`https://packages.infragistics.com/nuget/licensed/`) | Licensed / enterprise users that need the full component suite (grids, charts, maps, gauges, Dock Manager) | | ||
| | `IgniteUI.Blazor.Trial` | NuGet.org | Evaluation users - same full suite as `IgniteUI.Blazor` but with a trial watermark | | ||
|
|
||
| `IgniteUI.Blazor.Lite` contains the open-source UI component set, while `IgniteUI.Blazor.GridLite` contains the free `IgbGridLite` data grid package. Both use the `IgniteUI.Blazor.Controls` namespace. Do **not** mix the licensed `IgniteUI.Blazor` package with `IgniteUI.Blazor.Lite` in the same project; they use the same namespaces and duplicate some components. If full `IgniteUI.Blazor` is already referenced, do not add Lite/GridLite unless the user explicitly asks to switch package strategy. | ||
|
|
||
| ## Key Blazor-Specific Notes | ||
|
|
||
| Add the Ignite UI runtime script before the Blazor framework script in the host page: `<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>`. **If this script is missing, web components will not register and the app will render blank or broken. Verify this is present in every new project.** | ||
|
|
||
| > **AGENT INSTRUCTION - Module Registration** | ||
| > | ||
| > Every Ignite UI for Blazor component **and its sub-components** has a corresponding module. Register **all** modules for every component used on the page in `Program.cs`: | ||
| > | ||
| > ```csharp | ||
| > builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule), typeof(IgbDatePickerModule)); | ||
| > ``` | ||
| > | ||
| > Calling `builder.Services.AddIgniteUIBlazor()` with no arguments registers ALL modules (useful for prototypes but increases bundle size). Prefer explicit module registration in production. | ||
|
|
||
| > **AGENT INSTRUCTION - `@ref` and `EnsureReady`** | ||
| > | ||
| > When accessing a component from C# code (e.g., to call `ShowAsync()` on a dialog), use `@ref`: | ||
| > | ||
| > ```razor | ||
| > <IgbDialog @ref="DialogRef" /> | ||
| > | ||
| > @code { | ||
| > public IgbDialog DialogRef { get; set; } | ||
| > } | ||
| > ``` | ||
| > | ||
| > Some components (e.g., `IgbIcon`) require `await component.EnsureReady()` before calling async registration methods in `OnAfterRenderAsync(bool firstRender)`. | ||
|
|
||
| > **AGENT INSTRUCTION - Forms** | ||
| > | ||
| > Several Ignite UI Blazor components such as `IgbCombo` and `IgbRadio` do **not** work with the standard HTML `<form>` element. Do not assume a universal form pattern. Check the component's MCP doc first, bind component values explicitly (`@bind-Value`, `@bind-Checked`, or documented change events), and only use form integration patterns shown by the current docs. | ||
| ```json | ||
| { "servers": { "igniteui-cli": { "command": "npx", "args": ["-y", "igniteui-cli", "mcp"] } } } | ||
| ``` |
| <IgbGrid Data="employees" PrimaryKey="Id" RowEditable="true" AutoGenerate="false" | ||
| RowEdit="OnRowEdit" RowEditDone="OnRowEditDone"> | ||
| <IgbColumn Field="Id" Header="ID" Editable="false" /> | ||
| <IgbColumn Field="Name" Header="Name" Editable="true" /> | ||
| <IgbColumn Field="Department" Header="Department" Editable="true" /> | ||
| <IgbColumn Field="Salary" Header="Salary" Editable="true" DataType="GridColumnDataType.Currency" /> | ||
| </IgbGrid> | ||
| ``` | ||
|
|
||
| - When `RowEditable="true"`, editing a cell shows a row-level overlay with **Confirm** and **Cancel** buttons. | ||
| - All cells in the row are editable simultaneously. | ||
| - Changes are committed to the data source only on **Confirm**. | ||
|
|
||
| ### Row editing events | ||
|
|
||
| | Event | Type | Description | | ||
| |---|---|---| | ||
| | `RowEditEnter` | `EventCallback<IgbGridEditEventArgs>` | Fires when a row enters edit mode | | ||
| | `RowEdit` | `EventCallback<IgbGridEditEventArgs>` | Fires before row changes are committed - set `args.Cancel = true` to reject | | ||
| | `RowEditDone` | `EventCallback<IgbGridEditDoneEventArgs>` | Fires after row changes are committed | | ||
| | `RowEditExit` | `EventCallback<IgbGridEditDoneEventArgs>` | Fires when a row exits edit mode | | ||
|
|
||
| ### Example: Save row on confirm | ||
|
|
||
| ```razor | ||
| <IgbGrid Data="data" PrimaryKey="Id" RowEditable="true" | ||
| RowEditDone="OnRowEditDone"> | ||
| ... | ||
| </IgbGrid> | ||
|
|
||
| @code { | ||
| private async Task OnRowEditDone(IgbGridEditDoneEventArgs args) | ||
| { | ||
| var updatedRow = args.RowData; | ||
| await EmployeeService.UpdateAsync(updatedRow); | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ### Row editing with Action Strip | ||
|
|
||
| Add inline add/edit/delete actions: | ||
|
|
||
| ```razor | ||
| <IgbGrid Data="data" PrimaryKey="Id" RowEditable="true"> | ||
| <IgbColumn Field="Name" Editable="true" /> | ||
| <IgbColumn Field="Salary" Editable="true" DataType="GridColumnDataType.Number" /> | ||
| <IgbColumn Field="StartDate" Header="Start" Editable="true" DataType="GridColumnDataType.Date" /> |
…into blazor-skills
PureWeen
left a comment
PureWeen
left a comment
There was a problem hiding this comment.
Copilot-generated review.
I found five additional correctness issues beyond the existing review threads. Two copy/paste examples fail compilation as written, the GridLite setup references an API and asset that package does not ship, and two lifecycle/tool claims contradict the referenced runtime contracts.
The existing comments about the MCP client schemas, async void, and the ProjectTask/Employee mismatch also remain unresolved at this head.
This is a large prompt/documentation refactor with no committed skill evals or compile-smoke checks. The reproducible failures below are exactly the kind of regression a small package-backed example check would catch, so I recommend adding that validation before merging.
Methodology: three independent Copilot reviewers with adversarial consensus, followed by checks against the published NuGet packages, stable public MCP source, and targeted compile probes.
|
|
||
| | Grid | Module | Package | | ||
| |---|---|---| | ||
| | `IgbGridLite` | `IgbGridLiteModule` | `IgniteUI.Blazor.GridLite` (MIT) | |
There was a problem hiding this comment.
❌ API Design — IgbGridLiteModule does not exist in IgniteUI.Blazor.GridLite 0.9.1. The package's published setup instructions explicitly require no service registration and no manual script tag; its JS is included through its own static web assets. This row and the matching types.md/grid-migration.md examples therefore generate a non-compiling Program.cs, while the unqualified app.bundle.js prerequisite below points GridLite-only apps at an asset they do not ship. Please branch setup by package: GridLite needs the namespace and its own stylesheet only; full grids use AddIgniteUIBlazor(...) and _content/IgniteUI.Blazor/app.bundle.js.
Copilot-generated finding.
| args.Cancel = true; // reject negative salary | ||
| } | ||
| } | ||
| if (args.Column.Field == "Salary" && Convert.ToDecimal(args.NewValue) < 0) |
There was a problem hiding this comment.
❌ Documentation — The edit payload is exposed through args.Detail. Compiling this example against IgniteUI.Blazor.Trial 26.1.98 produces CS1061 for Column, NewValue, Cancel, and the later RowData accesses. Use args.Detail.Column, args.Detail.NewValue, and args.Detail.RowData. The package XML contract exposes args.Detail.Valid = false for validation; because the generated wrapper marks Valid as a component parameter, keep any BL0005 suppression scoped to that assignment rather than suppressing it project-wide.
Copilot-generated finding.
| public DateTime SelectedDate { get; set; } = DateTime.Today; | ||
| } | ||
| ``` | ||
| <IgbCalendar @bind-Value="SelectedDate" Selection="CalendarSelection.Single" |
There was a problem hiding this comment.
❌ Documentation — IgbCalendar.Value and ValueChanged use non-nullable DateTime, but this binds them to DateTime? SelectedDate. The Razor sample fails with CS1503. The snippet already declares the correctly typed CalendarValue; bind the calendar to that property instead.
Copilot-generated finding.
| ``` | ||
|
|
||
| Use `tokens`, not `overrides`. If the token discovery response distinguishes primary tokens from refinement tokens, use only the primary tokens unless the user explicitly requested the refined state or subpart. | ||
| - Use `create_palette` with `output: "css"`. **Do not use `create_theme` for Blazor** — it always emits Sass, which needs a compilation step no standard Blazor project has, and passing `platform: "blazor"` does not change that. |
There was a problem hiding this comment.
❌ Documentation — This is reversed for the stable version resolved by the npx -y igniteui-theming command below. In igniteui-theming 27.4.0, create_theme supports CSS and defaults to CSS for every non-Angular platform, including platform: "blazor". Please describe create_palette as the palette-only choice rather than saying create_theme cannot produce usable Blazor CSS.
Copilot-generated finding.
| Sorting = false | ||
| }; | ||
| } | ||
| => gridState.Options = new IgbGridStateOptions { CellSelection = false, Sorting = false }; |
There was a problem hiding this comment.
❌ Logic — gridState is populated by @ref only after rendering, so dereferencing it from OnInitialized throws before this example can render. Create an IgbGridStateOptions field and pass it through <IgbGridState Options="@stateOptions" /> instead.
Copilot-generated finding.
Description
Motivation / Context
Type of Change (check all that apply):
Component(s) / Area(s) Affected:
How Has This Been Tested?
Test Configuration:
Screenshots / Recordings
Checklist:
README.MDCHANGELOG.MDupdates for newly added functionalityCloses #