fix(skill): update skills - adding get_example for component example look up

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
 

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';

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`):
 

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.
 

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.
 

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,16 +374,15 @@ 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
 
 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: "<doc-name>" })`,
-  all in a single parallel batch — never sequentially.
+- For families **with** a doc: call `get_example({ framework: "angular", component: "<doc-name>" })` (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

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: "<name-field-value>" })` — 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.
 

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.
 
 ---
 

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).
 

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.
 
 ---