diff --git a/skills/igniteui-angular-components/SKILL.md b/skills/igniteui-angular-components/SKILL.md index 7551cdffc88..5a31993caed 100644 --- a/skills/igniteui-angular-components/SKILL.md +++ b/skills/igniteui-angular-components/SKILL.md @@ -15,7 +15,7 @@ user-invocable: true ## Ignite UI CLI MCP Server (recommended, not required) -The `igniteui-cli` MCP server provides `list_components`, `get_doc`, `search_docs`, `search_api`, and `get_api_reference`. Its **full component docs cover a subset of components** (the catalog grows over releases — call `list_components` once to see what exists; e.g. Combo, Simple Combo, Chat, Tooltip, and grid toolbar/export docs). Where a `get_doc` doc exists, prefer it over the reference files below. `search_api`/`get_api_reference` cover API members (inputs, outputs, methods) for all components — use them for member-level lookups. For everything else, the reference files below are the primary guidance. +The `igniteui-cli` MCP server provides `list_components`, `get_doc`, `get_example`, `search_docs`, `search_api`, and `get_api_reference`. Its **full component docs cover a subset of components** (the catalog grows over releases — call `list_components` once to see what exists; e.g. Combo, Simple Combo, Chat, Tooltip, and grid toolbar/export docs). Where a doc exists, prefer `get_example` for working code (props, event handlers, structure) — pass `language` to cut response size further. Fall back to `get_doc` when explanation context matters (event lifecycle, option tradeoffs, feature interactions). `search_api`/`get_api_reference` cover API members (inputs, outputs, methods) for all components — use them for member-level lookups. For everything else, the reference files below are the primary guidance. If the tools are not available, do not block the task — use the reference files. Suggest that the user run `npx -y igniteui-cli ai-config` from the project root (it configures both the `igniteui-cli` and `igniteui-theming` MCP servers and copies the agent skill files) and reload the editor. MCP servers cannot be started mid-session; the configuration takes effect on the next session. Editor-specific details are in [`references/mcp-setup.md`](./references/mcp-setup.md). @@ -25,7 +25,7 @@ If the tools are not available, do not block the task — use the reference file 1. **Identify every component or feature involved.** Map the user's request to one or more rows in the Task → Reference File table below. A single request often spans multiple categories (e.g., a form inside a Dialog requires both `form-controls.md` and `feedback.md`). 2. **Read every identified reference file in full**, in a single parallel batch of file reads — even if you believe you already know the answer. -3. **Then produce output**, based only on what you read. If something is not covered by the reference files, look it up with `get_doc`/`search_docs` when the MCP tools are available; otherwise state explicitly that the detail is unverified instead of guessing. +3. **Then produce output**, based only on what you read. If something is not covered by the reference files, look it up with `get_example`/`search_docs` when the MCP tools are available — or `get_doc` when explanation context matters — otherwise state explicitly that the detail is unverified instead of guessing. ### Task → Reference File diff --git a/skills/igniteui-angular-components/references/data-display.md b/skills/igniteui-angular-components/references/data-display.md index 5f0e5102787..6b2d6ae04ee 100644 --- a/skills/igniteui-angular-components/references/data-display.md +++ b/skills/igniteui-angular-components/references/data-display.md @@ -251,7 +251,7 @@ Types for linear bar: `'default'`, `'info'`, `'success'`, `'warning'`, `'error'` ## Chat (AI Chat Component) -> **Full doc in the MCP:** `get_doc({ framework: "angular", name: "chat" })` covers messages, attachments, quick replies, typing indicators, templates, and styling. Prefer it over writing chat code from memory. +> **Full doc in the MCP:** `get_doc({ framework: "angular", name: "chat" })` covers messages, attachments, quick replies, typing indicators, templates, and styling. Use `get_example({ framework: "angular", component: "chat" })` for working code samples. Prefer both over writing chat code from memory. ```typescript import { IgxChatComponent, IgxChatMessageContextDirective, type IgxChatOptions } from 'igniteui-angular/chat'; diff --git a/skills/igniteui-angular-components/references/directives.md b/skills/igniteui-angular-components/references/directives.md index 3bfa9905d70..0364a757ef5 100644 --- a/skills/igniteui-angular-components/references/directives.md +++ b/skills/igniteui-angular-components/references/directives.md @@ -87,7 +87,7 @@ Inputs: `[igxRipple]` (ripple color), `[igxRippleCentered]` (always start from c ## Tooltip -> **Full doc in the MCP:** `get_doc({ framework: "angular", name: "tooltip" })` covers triggers, overlay behavior, sticky/arrowed tooltips, styling, and accessibility. +> **Full doc in the MCP:** `get_doc({ framework: "angular", name: "tooltip" })` covers triggers, overlay behavior, sticky/arrowed tooltips, styling, and accessibility. Use `get_example({ framework: "angular", component: "tooltip" })` for working code samples. The at-a-glance pairing — `igxTooltipTarget` on the host references the `igxTooltip` element (both from `igniteui-angular/directives`): diff --git a/skills/igniteui-angular-components/references/form-controls.md b/skills/igniteui-angular-components/references/form-controls.md index e873b4e885c..8ff94ae813d 100644 --- a/skills/igniteui-angular-components/references/form-controls.md +++ b/skills/igniteui-angular-components/references/form-controls.md @@ -40,7 +40,7 @@ Types: `line` (default), `border`, `box`, `search`. ## Combo (Multi-Select Dropdown) -> **Full doc in the MCP:** `get_doc({ framework: "angular", name: "combo" })` covers data binding, selection APIs, forms support, keyboard behavior, and known issues. Prefer it over this snippet when available. +> **Full doc in the MCP:** `get_doc({ framework: "angular", name: "combo" })` covers data binding, selection APIs, forms support, keyboard behavior, and known issues. Use `get_example({ framework: "angular", component: "combo" })` for working code samples. Prefer both over this snippet when available. ```typescript import { IgxComboComponent } from 'igniteui-angular/combo'; @@ -52,7 +52,7 @@ import { IgxComboComponent } from 'igniteui-angular/combo'; ## Simple Combo (Single-Select) -> **Full doc in the MCP:** `get_doc({ framework: "angular", name: "simple-combo" })`. +> **Full doc in the MCP:** `get_doc({ framework: "angular", name: "simple-combo" })`. Use `get_example({ framework: "angular", component: "simple-combo" })` for working code samples. `IgxSimpleComboComponent` from `igniteui-angular/simple-combo` (its own entry point, not `/combo`). Same API as `igx-combo` but restricted to single selection. diff --git a/skills/igniteui-angular-components/references/mcp-setup.md b/skills/igniteui-angular-components/references/mcp-setup.md index d85551537e5..4667f6c2f04 100644 --- a/skills/igniteui-angular-components/references/mcp-setup.md +++ b/skills/igniteui-angular-components/references/mcp-setup.md @@ -2,7 +2,7 @@ > **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.** -The Ignite UI CLI MCP server exposes `list_components`, `get_doc`, `search_docs`, and `search_api` so AI assistants can discover Ignite UI components and read version-accurate documentation. It must be configured in the editor/agent before these tools become available, and the editor or agent session must be restarted afterwards — MCP servers cannot be hot-loaded into a running session. +The Ignite UI CLI MCP server exposes `list_components`, `get_doc`, `get_example`, `search_docs`, and `search_api` so AI assistants can discover Ignite UI components and read version-accurate documentation. It must be configured in the editor/agent before these tools become available, and the editor or agent session must be restarted afterwards — MCP servers cannot be hot-loaded into a running session. > Depending on the client, MCP tool names may appear with a server prefix (e.g. `mcp__igniteui-cli__list_components` in Claude Code). This skill refers to tools by their bare names. diff --git a/skills/igniteui-angular-figma-to-app/SKILL.md b/skills/igniteui-angular-figma-to-app/SKILL.md index e7c07e8b35a..083eb1f0e18 100644 --- a/skills/igniteui-angular-figma-to-app/SKILL.md +++ b/skills/igniteui-angular-figma-to-app/SKILL.md @@ -35,9 +35,7 @@ This skill orchestrates four MCP servers: **Figma** (design data), **Ignite UI C Complete all phases in order — do not skip phases or generate component code from memory. Every component selector, input name, and import path must come from -`get_doc` results or, where no doc exists in the catalog, from the -`igniteui-angular-components` / `igniteui-angular-grids` skill reference files — -never guessed. +`get_example` (or `get_doc` when explanation context matters) results or, where no doc exists in the catalog, from the `igniteui-angular-components` / `igniteui-angular-grids` skill reference files — never guessed. Read [references/figma-component-map.md](references/figma-component-map.md) before Phase 2. Read [references/design-token-bridge.md](references/design-token-bridge.md) before Phase 3. @@ -376,7 +374,7 @@ Find the row for each Figma layer name from your Phase 1 decomposition table. Each row gives you: - The Ignite UI Angular selector -- The `get_doc` key to call +- The `get_example` (and optionally `get_doc`) key to call - Key inputs and variants to configure ### 2b: Fetch Component Docs @@ -384,8 +382,7 @@ Each row gives you: Call `list_components({ framework: "angular" })` **once** to discover which component families have full docs — **the catalog covers only a subset of components**. Then: -- For families **with** a doc: call `get_doc({ framework: "angular", name: "" })`, - all in a single parallel batch — never sequentially. +- For families **with** a doc: call `get_example({ framework: "angular", component: "" })` (or `get_doc` when explanation context matters), all in a single parallel batch — never sequentially. - For families **without** a doc: read the matching reference files from the [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md) and [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) skills, and use @@ -561,7 +558,7 @@ See `references/design-token-bridge.md § Spacing, Sizing, and Roundness`. ### Implementation Rules -1. **Never generate component code without reading its `get_doc` result first** (Phase 2b) +1. **Never generate component code without calling `get_example` first** (or `get_doc` when explanation context matters) (Phase 2b) 2. **Section by section** — layout → navigation → primary content → secondary → data 3. Follow Angular standalone component conventions and AGENTS.md coding standards 4. Import components from their specific entry points, never from the root barrel diff --git a/skills/igniteui-angular-generate-from-image-design/SKILL.md b/skills/igniteui-angular-generate-from-image-design/SKILL.md index a10ad973855..a880f9d69f0 100644 --- a/skills/igniteui-angular-generate-from-image-design/SKILL.md +++ b/skills/igniteui-angular-generate-from-image-design/SKILL.md @@ -14,7 +14,7 @@ Complete these steps in order before writing any implementation code: 2. Read [references/component-mapping.md](references/component-mapping.md) and [references/gotchas.md](references/gotchas.md). 3. This skill is Angular-only. Check package layout or licensing only when imports, packages, or theming depend on it. 4. To apply a theme, use the theming workflow from this skill and the dedicated `igniteui-angular-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` for every chosen component family before using it — pass `language` to cut response size further. Fall back to `get_doc` when explanation context matters, not just code. 6. Only then start coding. > **If the MCP tools are unavailable**, do not block the task: fall back to the reference @@ -29,7 +29,7 @@ Complete these steps in order before writing any implementation code: 1. **Analyze the design image** - Read the image, identify every UI section, component, layout structure. 2. **Confirm package layout if needed** - this skill is Angular-only; check package layout or licensing only when imports, packages, or theming depend on it 3. **Discover components** - Call `list_components` with targeted filters 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` for every chosen component family before coding (fall back to `get_doc` when explanation context matters) 5. **Generate theme** - (a) To generate a theme, first extract colors and create a color palette using `create_palette` or `create_custom_palette` depending on the scenario. Then extract elevations and call `create_elevations`. Then extract typography and call `create_typography`. Then call `create_theme` with the palette, elevations, and typography. (b) After a theme 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. **Install DV packages** - if the design uses charts, maps, gauges, or sparklines, resolve and install the compatible DV packages (with approval) 7. **Implement** - Build the screenshot-first layout, data, and view components @@ -94,7 +94,7 @@ For component-to-Ignite-UI mapping, see [references/component-mapping.md](refere ## Step 4: Look Up Component API -For every chosen component category that appears in the `list_components` results, call `get_doc` with its doc `name` field (not the result title). **The doc catalog covers only a subset of components** — for categories without a doc, read the matching reference files from the [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md) / [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) skills and use `search_api` for member-level API lookups. Read one or the other before coding — it gives exact usage patterns, inputs, and template structure. +For every chosen component category that appears in the `list_components` results, call `get_example({ framework: "angular", component: "" })` — pass the doc `name` field from `list_components` as the `component` parameter (not the result title) — or `get_doc` when explanation context matters. **The doc catalog covers only a subset of components** — for categories without a doc, read the matching reference files from the [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md) / [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) skills and use `search_api` for member-level API lookups. Read one or the other before coding — it gives exact usage patterns, inputs, and template structure. Call `search_docs` for feature-based questions (e.g., "how to configure [component] for [specific behavior or styling need]") — it searches only the docs in the catalog. diff --git a/skills/igniteui-angular-grids/SKILL.md b/skills/igniteui-angular-grids/SKILL.md index 0734aaf1805..465a833ccfa 100644 --- a/skills/igniteui-angular-grids/SKILL.md +++ b/skills/igniteui-angular-grids/SKILL.md @@ -13,7 +13,7 @@ user-invocable: true 1. **Identify the grid type.** Use the Grid Selection Decision Guide below. If the grid type is not explicitly stated, infer it from context or ask. 2. **Identify every task category involved.** Map the user's request to one or more rows in the Task → Reference File table below. A single request often spans multiple categories (e.g., remote paging plus editing requires both `paging-remote.md` and `editing.md`). 3. **Read every identified reference file in full**, in a single parallel batch of file reads — even if you believe you already know the answer. -4. **Then produce output**, based only on what you read. If something is not covered by the reference files, look it up with `get_doc`/`search_docs`/`search_api` from the `igniteui-cli` MCP server when available; otherwise state explicitly that the detail is unverified instead of guessing. +4. **Then produce output**, based only on what you read. If something is not covered by the reference files, look it up with `get_example`/`search_docs`/`search_api` from the `igniteui-cli` MCP server when available — or `get_doc` when explanation context matters — otherwise state explicitly that the detail is unverified instead of guessing. ### Task → Reference File @@ -34,7 +34,7 @@ user-invocable: true --- ## Overview -This skill gives high-level guidance on grids and their features. The `igniteui-cli` MCP server (when available) has **full docs for grid toolbars and export** (`grid-toolbar`, `grid-export-excel`, `exporter-pdf`, and the tree/hierarchical/pivot variants — call `list_components` to see the current catalog) and an API-member index via `search_api`/`get_api_reference` for member-level lookups. For everything else, the reference files below are the primary guidance. +This skill gives high-level guidance on grids and their features. The `igniteui-cli` MCP server (when available) has **full docs for grid toolbars and export** (`grid-toolbar`, `grid-export-excel`, `exporter-pdf`, and the tree/hierarchical/pivot variants — call `list_components` to see the current catalog) and an API-member index via `search_api`/`get_api_reference` for member-level lookups. Prefer `get_example` for working code (props, event handlers, structure) and pass `language` to cut response size further; use `get_doc` only when explanation context matters (event lifecycle, option tradeoffs). For everything else, the reference files below are the primary guidance. --- diff --git a/skills/igniteui-angular-grids/references/features.md b/skills/igniteui-angular-grids/references/features.md index 3d512031f84..d8e9b9ed53a 100644 --- a/skills/igniteui-angular-grids/references/features.md +++ b/skills/igniteui-angular-grids/references/features.md @@ -103,7 +103,7 @@ customMerge = new PriceRangeMergeStrategy(); ## Toolbar -> **Full docs in the MCP** — `get_doc` with `grid-toolbar`, `treegrid-toolbar`, or `hierarchicalgrid-toolbar` covers title, built-in actions (hiding, pinning, advanced filtering, exporter), custom content, progress indication, and theming. Prefer those over memory. +> **Full docs in the MCP** — `get_doc` with `grid-toolbar`, `treegrid-toolbar`, or `hierarchicalgrid-toolbar` covers title, built-in actions (hiding, pinning, advanced filtering, exporter), custom content, progress indication, and theming. Use `get_example` with the same keys for working code samples. Prefer both over memory. Toolbar components (`IgxGridToolbarComponent` and the action components) import from `igniteui-angular/grids/core` and nest inside the grid element: @@ -124,7 +124,7 @@ Toolbar components (`IgxGridToolbarComponent` and the action components) import ## Export -> **Full docs in the MCP** — `get_doc` with `grid-export-excel`, `treegrid-export-excel`, `hierarchicalgrid-export-excel`, `pivotGrid-export-excel`, or `exporter-pdf` covers setup, full-data vs. visible exports, multi-column headers, customization events, and known limitations. Prefer those over memory. +> **Full docs in the MCP** — `get_doc` with `grid-export-excel`, `treegrid-export-excel`, `hierarchicalgrid-export-excel`, `pivotGrid-export-excel`, or `exporter-pdf` covers setup, full-data vs. visible exports, multi-column headers, customization events, and known limitations. Use `get_example` with the same keys for working code samples. Prefer both over memory. Quick reference — exporter services (`IgxExcelExporterService`, `IgxCsvExporterService`, and their `*ExporterOptions`) import from `igniteui-angular/grids/core`; `inject()` the service and call `export(grid, options)` (respects filtering/sorting) or `exportData(data, options)` (raw data). diff --git a/skills/igniteui-angular-grids/references/grid-migration.md b/skills/igniteui-angular-grids/references/grid-migration.md index ae77b8db166..ef8cd28d31e 100644 --- a/skills/igniteui-angular-grids/references/grid-migration.md +++ b/skills/igniteui-angular-grids/references/grid-migration.md @@ -12,7 +12,7 @@ Grid APIs change between releases — do not write migration code from memory. B 1. **Identify the current Grid Lite usage** - read the user's existing component files to understand their column configuration, templates, data binding, and any `dataPipelineConfiguration` usage. 2. **Consult the grids skill** - read the relevant reference files from [`igniteui-angular-grids`](../SKILL.md) for the target features the user needs after migration. -3. **Use the MCP server when in doubt** - call `get_doc` or `search_docs` from the `igniteui-cli` MCP server (if available) for Angular to verify current API details. +3. **Use the MCP server when in doubt** - call `get_doc`, `get_example`, or `search_docs` from the `igniteui-cli` MCP server (if available) for Angular to verify current API details and see working samples. 4. **Only then produce output** - base all code on verified references, not memory. ---