Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion skills/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ Both servers must be configured in your AI tool. Setup instructions are in each

| Server | Purpose | Key tools |
|---|---|---|
| **`igniteui-cli`** | Component docs, API reference, scaffolding | `list_components`, `get_doc`, `search_docs`, `get_api_reference`, `search_api` |
| **`igniteui-cli`** | Component docs, API reference, scaffolding | `list_components`, `get_doc`, `get_example`, `search_docs`, `get_api_reference`, `search_api` |
| **`igniteui-theming`** | CSS palette and token generation | `create_palette`, `get_component_design_tokens`, `create_component_theme`, `set_roundness`, `set_spacing`, `set_size` |

---
Expand Down
4 changes: 2 additions & 2 deletions skills/igniteui-blazor-components/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@ Map the user's request to one or more rows in the Task → Reference File table
**STEP 2 - Read every identified reference file in full (PARALLEL).**
Call `read_file` (or equivalent) on **all** reference files identified in Step 1 **in a single parallel batch**. Reference files map components to their MCP doc slugs and explain which MCP calls to make.

**STEP 3 - Extract doc slugs, then call `get_doc` and API tools for each component involved.**
Use the Ignite UI MCP `get_doc` tool with `framework: "blazor"` and the exact doc slug listed in the reference files you just read. It returns the actual registration pattern, Razor markup, examples, and CSS parts. Do NOT skip this step.
**STEP 3 - Extract doc slugs, then call `get_example` (and API tools) for each component involved.**
Use the Ignite UI MCP `get_example` tool with `framework: "blazor"` and `component` set to the doc slug listed in the reference files you just read — it returns working Razor markup, props, and event handler patterns. Do NOT skip this step.

If a reference file does not list a slug for the requested component, call `search_docs(framework: "blazor", query: "<component or feature>")` to find the correct doc. If no Blazor doc exists, say that the component or feature is not covered instead of guessing.

Expand Down
8 changes: 4 additions & 4 deletions skills/igniteui-blazor-components/references/charts.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
## Overview

Ignite UI for Blazor provides 65+ chart types for data visualization. Charts are part of the IgniteUI.Blazor package (trial watermarked version available in the IgniteUI.Blazor.Trial public NuGet package).
This reference gives high-level guidance on when to use some of the chart types, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific chart component or feature you're interested in.
This reference gives high-level guidance on when to use some of the chart types, their key features, and common API members. For detailed documentation and working code examples, call `get_example` (or `get_doc` when explanation context matters) from `igniteui-cli` with the specific chart component or feature you're interested in.

## Chart Type Decision Guide

Expand Down Expand Up @@ -120,7 +120,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDataChartCoreModule), typeof(IgbDat

Every series must reference its axes by matching `Name` and `XAxisName` / `YAxisName`.

> **AGENT INSTRUCTION:** `IgbDataChart` requires separate NuGet module registrations for each category of series. Always check `get_doc` to find the exact module names, for example category, scatter, polar, radial, stacked, or financial modules.
> **AGENT INSTRUCTION:** `IgbDataChart` requires separate NuGet module registrations for each category of series. Always check `get_example` (or `get_doc` for module name reference) to find the exact module names, for example category, scatter, polar, radial, stacked, or financial modules.

---

Expand Down Expand Up @@ -217,7 +217,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSparklineModule));

## Treemap

Always call `get_doc("blazor", "treemap-chart")` before writing markup because hierarchy binding, member paths, and layout options are component-specific.
Always call `get_example(framework: "blazor", component: "treemap-chart")` (or `get_doc` for behavioral details) before writing markup because hierarchy binding, member paths, and layout options are component-specific.

---

Expand Down Expand Up @@ -294,7 +294,7 @@ Use Dashboard Tile when the requested component should infer or render compact d
## Key Rules

1. **`IgbCategoryChart` is the fastest path for standard charts.** It auto-generates series from data. Use `IgbDataChart` only when you need multiple series types, custom axes, or advanced features.
2. **`IgbDataChart` requires one module per series category.** Check `get_doc` for the exact module name.
2. **`IgbDataChart` requires one module per series category.** Check `get_example` (or `get_doc` for module name reference) for the exact module name.
3. **Financial chart data must have `Open`, `High`, `Low`, `Close` fields.** If the data model is different, the chart will not render correctly.
4. **Always set explicit `Width` and `Height` on charts.** Charts do not auto-size to their container without a height.
5. **`IgbDataChart` series must match axes by name.** The `XAxisName` / `YAxisName` on each series must match the `Name` attribute of the axis component.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
---

## Overview
This reference gives high-level guidance on data display and action components, their key features, and common API members. For detailed documentation, call `get_doc` from `igniteui-cli`; use `search_api` and `get_api_reference` for Blazor API details.
This reference gives high-level guidance on data display and action components, their key features, and common API members. For detailed documentation and working code examples, call `get_example` from `igniteui-cli` (or `get_doc` when explanation context matters); use `search_api` and `get_api_reference` for Blazor API details.

## Button & Button Group

Expand Down
4 changes: 2 additions & 2 deletions skills/igniteui-blazor-components/references/feedback.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
---

## Overview
This reference gives high-level guidance on feedback and overlay components, their key features, and common API members. For detailed documentation, call `get_doc` from `igniteui-cli`; use `search_api` and `get_api_reference` for Blazor API details.
This reference gives high-level guidance on feedback and overlay components, their key features, and common API members. For detailed documentation and working code examples, call `get_example` from `igniteui-cli` (or `get_doc` when explanation context matters); use `search_api` and `get_api_reference` for Blazor API details.

## Dialog

Expand Down Expand Up @@ -102,7 +102,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbToastModule));
}
```

> **AGENT INSTRUCTION - Toast vs Snackbar:** `IgbToast` is a simple auto-dismissing notification with no action button. Use `IgbSnackbar` when you need an action button (e.g., "Undo"). Check the doc via `get_doc` for the current difference, as these components evolve.
> **AGENT INSTRUCTION - Toast vs Snackbar:** `IgbToast` is a simple auto-dismissing notification with no action button. Use `IgbSnackbar` when you need an action button (e.g., "Undo"). Check via `get_example` (or `get_doc` for behavioral details) for the current difference, as these components evolve.

---

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
---

## Overview
This reference gives high-level guidance on form controls, their key features, and common API members. For detailed documentation, call `get_doc` from `igniteui-cli`; use `search_api` and `get_api_reference` for Blazor API details.
This reference gives high-level guidance on form controls, their key features, and common API members. For detailed documentation and working code examples, call `get_example` from `igniteui-cli` (or `get_doc` when explanation context matters); use `search_api` and `get_api_reference` for Blazor API details.

## Input

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
---

## Overview
This reference gives high-level guidance on when to use each layout manager component, their key features, and common API members. For detailed documentation, call `get_doc` from `igniteui-cli`; use `search_api` and `get_api_reference` for Blazor API details.
This reference gives high-level guidance on when to use each layout manager component, their key features, and common API members. For detailed documentation and working code examples, call `get_example` from `igniteui-cli` (or `get_doc` when explanation context matters); use `search_api` and `get_api_reference` for Blazor API details.

## Dock Manager

Expand Down
2 changes: 1 addition & 1 deletion skills/igniteui-blazor-components/references/layout.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
---

## Overview
This reference gives high-level guidance on layout and navigation components, their key features, and common API members. For detailed documentation, call `get_doc` from `igniteui-cli`; use `search_api` and `get_api_reference` for Blazor API details.
This reference gives high-level guidance on layout and navigation components, their key features, and common API members. For detailed documentation and working code examples, call `get_example` from `igniteui-cli` (or `get_doc` when explanation context matters); use `search_api` and `get_api_reference` for Blazor API details.

## Tabs

Expand Down
2 changes: 1 addition & 1 deletion skills/igniteui-blazor-components/references/mcp-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
- [WebStorm / JetBrains IDEs](#webstorm--jetbrains-ides)
- [Verifying the Setup](#verifying-the-setup)

The Ignite UI CLI MCP server enables AI assistants to discover Ignite UI components, access Blazor documentation, and support related Ignite UI workflows. It must be configured in your editor before these tools become available.
The Ignite UI CLI MCP server enables AI assistants to discover Ignite UI components, access Blazor documentation, retrieve working code examples, and support related Ignite UI workflows. It exposes `list_components`, `get_doc`, `get_example`, `search_docs`, `search_api`, and `get_api_reference`. It must be configured in your editor before these tools become available.

## VS Code

Expand Down
2 changes: 1 addition & 1 deletion skills/igniteui-blazor-components/references/setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ builder.Services.AddIgniteUIBlazor(
);
```

Module names follow the pattern `Igb{ComponentName}Module`. If unsure of the module name, call `get_doc` for that component - every doc shows the exact `typeof(...)` registration call. Use `search_api` and `get_api_reference` for component API details.
Module names follow the pattern `Igb{ComponentName}Module`. If unsure of the module name, call `get_example` (or `get_doc`) for that component - every doc shows the exact `typeof(...)` registration call. Use `search_api` and `get_api_reference` for component API details.

---

Expand Down
6 changes: 3 additions & 3 deletions skills/igniteui-blazor-generate-from-image-design/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Before writing any implementation code, you must complete these steps in order:
2. Read [references/component-mapping.md](references/component-mapping.md).
3. This skill is Blazor-only. Check NuGet package (`IgniteUI.Blazor.Lite`, `IgniteUI.Blazor.GridLite` for general purpose components and light-weight grid, or `IgniteUI.Blazor` / `IgniteUI.Blazor.Trial` for specialized feature-rich grids and charts) only when theming or component availability depends on it.
4. To apply a theme, use the theming workflow from this skill and the dedicated `igniteui-blazor-theming` skill; use the `igniteui-theming` MCP tools instead of styling from memory.
5. Call `get_doc` for every chosen component family before using it.
5. Call `get_example` (or `get_doc` when explanation context matters) for every chosen component family before using it.
6. **Read [references/gotchas.md](references/gotchas.md) now — after docs, before writing any code.** Read the file in full. Some entries are component-specific; others apply broadly to any chart, any themed component, or any scoped CSS. Apply every entry that is relevant to what you are building. This is a blocking step: do not start implementation until you have read the whole file and checked it against your component list.
7. Only then start coding.

Expand All @@ -25,7 +25,7 @@ Before writing any implementation code, you must complete these steps in order:
1. **Analyze the design image** - Read the image, identify every UI section, component, layout structure.
2. **Confirm NuGet package if needed** - this skill is Blazor-only; use `IgniteUI.Blazor.Lite`, `IgniteUI.Blazor.GridLite` for general purpose components and the light-weight grid, and `IgniteUI.Blazor` (trial version available publicly as `IgniteUI.Blazor.Trial`) for specialized feature-rich grids and charts.
3. **Discover components** - Call `list_components` with targeted filters and `framework: "blazor"` to find matching components for each UI pattern.
4. **Look up component docs** - Call `get_doc` for every chosen component family before coding.
4. **Look up component docs** - Call `get_example` (or `get_doc` when explanation context matters) for every chosen component family before coding.
5. **Generate theme** - (a) Extract colors and call `create_palette` or `create_custom_palette` with `platform: "blazor"` and `output: "css"` — do **not** use `create_theme` for Blazor, it produces Sass requiring compilation. Optionally call `create_elevations` and `create_typography` for elevation and font overrides. (b) After a palette exists, prefer using design tokens or scoped semantic CSS variables over raw literals. (c) For every Ignite UI component, call `get_component_design_tokens`, map extracted image tokens to token roles, then call `create_component_theme` with the tokens differing from the global theme for the specific component.
6. **Implement** - Build the screenshot-first layout, data, and view components.
7. **Refine** - Use the `set_size`, `set_spacing`, `set_roundness` tools to refine the view's visual fidelity against the image, then iterate on implementation and theming until the view matches the design closely.
Expand Down Expand Up @@ -96,7 +96,7 @@ For component-to-Ignite-UI mapping, see [references/component-mapping.md](refere

## Step 4: Look Up Component API

For every chosen component category, call `get_doc` with the doc name from `list_components` results (e.g., `name: "card"`, `framework: "blazor"`). Use the doc `name` field from the MCP results, not the result title shown in the list. This is mandatory before coding and gives exact usage patterns, parameters, and Razor markup structure.
For every chosen component category, call `get_example` with the doc name from `list_components` results (e.g., `component: "card"`, `framework: "blazor"`). Use the doc `name` field from the MCP results, not the result title shown in the list. This is mandatory before coding and gives exact usage patterns, parameters, and Razor markup structure. Prefer `get_example` for working code; fall back to `get_doc` when you need explanation context (event lifecycle, option tradeoffs, feature interactions).

Call `search_docs` for feature-based questions (e.g., "how to configure [component] for [specific behavior or styling need]").

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ Component decision matrix (by visual pattern, domain-neutral):
| Financial chart | `IgbFinancialChart` | `ChartType`, OHLC member paths, `DataSource` |
| Complex multi-series | `IgbDataChart` | Multiple `IgbSeries` + `IgbAxis` children |
| Hierarchical part-to-whole (weighted tree) | `IgbTreemap` | `DataSource`, `LabelMemberPath`, `ValueMemberPath` |
| Auto-generated dashboard widget from data | `IgbDashboardTile` | Verify supported chart modes and binding shape with `get_doc` before use |
| Auto-generated dashboard widget from data | `IgbDashboardTile` | Verify supported chart modes and binding shape with `get_example` (or `get_doc`) before use |

Decision rules:

Expand Down Expand Up @@ -288,4 +288,4 @@ builder.Services.AddIgniteUIBlazor(

---

Treat this file as a component selection reference, not as authoritative API guidance for a specific version. Confirm exact parameters and behavior from `get_doc` results and the current workspace's reference files (`igniteui-blazor-components` skill).
Treat this file as a component selection reference, not as authoritative API guidance for a specific version. Confirm exact parameters and behavior from `get_example` results (or `get_doc` for behavioral context) and the current workspace's reference files (`igniteui-blazor-components` skill).
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Ignite UI for Blazor components render as web components (`igc-chip`, `igc-grid`
| Mechanism | Purpose | Priority |
|---|---|---|
| Design tokens `--ig-*` | Override colors, borders, shadows via CSS vars | **Primary** - use whenever a token exists |
| `::part()` | Target a named shadow DOM part directly | **Secondary** - only when no token covers it; confirm part names via `get_doc` |
| `::part()` | Target a named shadow DOM part directly | **Secondary** - only when no token covers it; confirm part names via `get_doc`, then use `get_example` for working code |
| `::deep` | Pierce Blazor CSS isolation in `.razor.css` files | **File helper** - add it in `.razor.css`; never needed in global CSS |

`::deep` and `::part()` solve different problems and are often combined: `::deep igc-chip::part(base) { ... }`.
Expand Down
4 changes: 2 additions & 2 deletions skills/igniteui-blazor-grids/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ Map the user's request to one or more rows in the Task → Reference File table
**STEP 3 - Read every identified reference file in full (PARALLEL).**
Call `read_file` (or equivalent) on **all** reference files identified in Step 2 **in a single parallel batch** - do NOT read them one at a time sequentially. You must do this even if you believe you already know the answer. Do not skip, skim, or partially read a reference file.

**STEP 4 - Extract doc slugs, then call `get_doc` and API tools for the relevant grid and each feature.**
Use the Ignite UI MCP `get_doc` tool with `framework: "blazor"` and the exact doc slug listed in the reference files you just read. It returns the relevant grid docs, examples, and feature guidance. Do NOT skip this step.
**STEP 4 - Extract doc slugs, then call `get_example` (and API tools) for the relevant grid and each feature.**
Use the Ignite UI MCP `get_example` tool with `framework: "blazor"` and `component` set to the doc slug — it returns working code for the grid type and feature. Prefer `get_example` for code output. Fall back to `get_doc` when you need explanation context (event lifecycle, option tradeoffs, feature interactions) rather than just working code. Do NOT skip this step.

If a reference file does not list a slug for the requested grid feature, call `search_docs(framework: "blazor", query: "<grid feature>")` to find the correct doc. If no Blazor doc exists, say that the feature is not covered rather than guessing.

Expand Down
2 changes: 1 addition & 1 deletion skills/igniteui-blazor-grids/references/features.md
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ Enable with `HasSummary="true"` on a column. The built-in summaries depend on th

Custom summaries in Blazor are implemented via JavaScript using `ColumnInitScript`. Define a JavaScript class with an `operate(data, allData, fieldName)` method that returns an array of `{ key, label, summaryResult }` objects, then assign it during column initialization.

> For full custom summary class syntax, call `get_doc(framework: "blazor", name: "grid-summaries")` for the JavaScript pattern and template usage.
> For full custom summary class syntax, call `get_example(framework: "blazor", component: "grid-summaries")` (or `get_doc` for behavioral details) for the JavaScript pattern and template usage.

### Summary position

Expand Down
Loading
Loading