feat(skills): attempt at making the skills more standalone - #277
Open
kdinev wants to merge 1 commit into
Open
Conversation
Contributor
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(); |
Comment on lines
+114
to
+118
| 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"] } } } | ||
| ``` |
Comment on lines
+105
to
+109
| `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"] } } } | ||
| ``` |
Comment on lines
+54
to
+58
| `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"] } } } | ||
| ``` |
Comment on lines
+52
to
+56
| <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" /> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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 #