docs: update documentation to prefer get_example for working code s…

skills/grid-lite-to-igr-grid-migration/SKILL.md

@@ -1,4 +1,4 @@
----
+---
 name: grid-lite-to-igr-grid-migration
 description: Step-by-step migration guide from Grid Lite (IgrGridLite) to the premium Ignite UI for React Data Grid (IgrGrid), covering every import, registration, component name, property, event, template, sorting, filtering, and toolbar API change.
 user-invocable: true
@@ -13,7 +13,7 @@ user-invocable: true
 Before producing migration code:
 
 1. **Read the user's existing component files** to understand current Grid Lite usage (columns, templates, data binding, `dataPipelineConfiguration`).
-2. **Use the MCP server** — call `get_doc` or `search_docs` with `framework: "react"` to confirm API details when in doubt.
+2. **Use the MCP server** — for working code (props, event handlers, column config), call `get_example` first; call `get_doc` or `search_docs` with `framework: "react"` for full API details or when `get_example` isn't sufficient.
 3. **Only then produce output** — base all code on verified references, not memory.
 
 ---

skills/igniteui-react-components/reference/CHARTS-GRIDS.md

@@ -1,7 +1,7 @@
 # Charts, Gauges, Maps & Grid Lite
 
 ## Overview
-This reference gives high-level guidance on charts and grids, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific chart, or grid component, or feature you're interested in.
+This reference gives high-level guidance on charts and grids, their key features, and common API members. For working code examples (props, event handlers, component structure), prefer `get_example({ framework: "react", component: "<name>", language: "tsx" })` to reduce response size. For full documentation (prop tables, API details, feature explanations), call `get_doc` and `get_api_reference` from `igniteui-cli`.
 
 ## Module Registration
 
@@ -53,7 +53,7 @@ IgrCategoryChartModule.register();
 
 ## Complete Chart Example
 
-> Call `get_doc('react', 'column-chart')` for full `IgrCategoryChart` and `IgrDataChart` usage, prop tables, and code examples. Call `get_doc('react', 'chart-features')` for axes, annotations, animations, markers, and tooltips.
+> For working code (props, event handlers, series configuration), prefer `get_example` — it returns a runnable snippet faster than full docs. Fall back to `get_doc('react', 'column-chart')` when you need prop tables or feature explanations. Call `get_doc('react', 'chart-features')` for axes, annotations, animations, markers, and tooltips.
 
 The minimum pattern — register the module at file scope, then wrap the component in a sized container:
 
@@ -130,7 +130,7 @@ IgrDataChartAnnotationModule.register();
 
 > **Bar charts are horizontal** — categories go on the Y-axis and numeric values on the X-axis. This is the opposite of column charts.
 
-> For the full `IgrDataChart` API (all series types, axis options, layers), call `get_doc('react', 'bar-chart')` or `get_doc('react', 'column-chart')`.
+> For a working multi-series bar chart snippet, call `get_example` first. For the full `IgrDataChart` API (all series types, axis options, layers), call `get_doc('react', 'bar-chart')` or `get_doc('react', 'column-chart')`.
 
 ### Complete Bar Chart Component (Multiple Series)
 

skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md

@@ -49,7 +49,7 @@ Confirm which package provides the component:
 
 ### Step 4 — Look up component documentation
 
-Call `get_doc('react', '<name>')` with the doc name from `list_components` results to get full usage documentation, import paths, prop tables, event signatures, and code examples. Use `search_docs('<query>', 'react')` for feature-based questions (e.g., `"date picker range selection"`).
+For **working code** (props, event handlers, component structure), call `get_example` first — it returns a runnable snippet and is faster than full docs. Only call `get_doc('react', '<name>')` when you need import paths, prop tables, event signatures, or feature explanations that go beyond a code example. Use `search_docs('<query>', 'react')` for feature-based questions (e.g., `"date picker range selection"`).
 
 ### Step 5 — Provide a starter code snippet
 
@@ -156,6 +156,7 @@ function Dashboard() {
 Use MCP tools for up-to-date component discovery and API lookup:
 
 - `list_components('react')` — browse the full component catalogue, optionally narrowed with a filter keyword
-- `get_doc('react', '<name>')` — full documentation, prop tables, and code examples for a component
+- `get_example({ framework: "react", component: "<name>", language: "tsx" })` — **preferred for working code** (props, event handlers, structure); pass `language` to cut response size
+- `get_doc('react', '<name>')` — full documentation, prop tables, and API details; use when `get_example` isn't sufficient
 - `search_docs('<query>', 'react')` — full-text search for features or behaviors (e.g., `"date picker range selection"`)
 - `search_api('<query>', 'react')` — look up specific classes, properties, or methods

skills/igniteui-react-generate-from-image-design/SKILL.md

@@ -14,15 +14,15 @@ Before writing any implementation code, you must complete these steps in order:
 2. Read [reference/component-mapping.md](reference/component-mapping.md) and [reference/gotchas.md](reference/gotchas.md).
 3. This skill is React-only. Check package routing, theme CSS imports, 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-react-customize-theme` skill; use the `igniteui-theming` MCP tools instead of styling from memory. This skill is React-only, so hardcode `platform: "react"` in theme-generation calls.
-5. Call `get_doc` for every chosen component family before using it.
+5. Call `get_example` (preferred for working code) or `get_doc` for every chosen component family before using it.
 6. Only then start coding.
 
 ## Workflow
 
 1. **Analyze the design image** - Read the image, identify every UI section, component, and layout structure.
 2. **Confirm package routing or theme setup if needed** - this skill is React-only; check package routing, theme CSS imports, 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** - For working code (props, event handlers, structure), call `get_example` first. Fall back to `get_doc` when you need prop tables or feature explanations beyond a code snippet.
 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 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`, and `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.
@@ -80,7 +80,7 @@ For component-to-Ignite-UI mapping, see [reference/component-mapping.md](referen
 
 ## Step 4: Look Up Component API
 
-For every chosen component category, call `get_doc('react', '<name>')` using the doc `name` field from `list_components` results (e.g., `get_doc('react', 'card')`), not the result title shown in the list. This is mandatory before coding and gives exact React usage patterns, prop names, slot structure, event signatures, and any required module registration.
+For every chosen component category, first call `get_example({ framework: "react", component: "<name>", language: "tsx" })` using the doc `name` field from `list_components` results as the `component` parameter (e.g., `get_example({ framework: "react", component: "card", language: "tsx" })`). This returns a runnable snippet with exact props, slot structure, and event signatures faster than full docs. Only call `get_doc('react', '<name>')` when you need prop tables, feature explanations, or details not covered by the example. This is mandatory before coding and gives exact React usage patterns, prop names, slot structure, event signatures, and any required module registration.
 
 Call `search_docs` for feature-based questions (e.g., "how to configure [component] for [specific behavior or styling need]").
 

skills/igniteui-react-generate-from-image-design/reference/component-mapping.md

@@ -11,7 +11,7 @@
 - [Package Requirements](#package-requirements)
 - [Import Patterns](#import-patterns)
 
-> **For component API details** (props, events, slots, examples), call `get_doc` with `'react'` and the doc name from `list_components` results. Use `search_api` for specific property lookup.
+> **For working code** (props, event handlers, structure), call `get_example` first using the doc `name` field from `list_components` results as the `component` parameter. For full API details (prop tables, event signatures, feature explanations), fall back to `get_doc` with `'react'` and the same doc name. Use `search_api` for specific property lookup.
 
 ## Dashboard & Layout Components
 
@@ -129,4 +129,4 @@ Install only the packages required by the components you actually selected. Reso
 
 ## Import Patterns
 
-Treat this file as a component selection reference, not as authoritative import guidance for a specific repo. Confirm exact imports from the current workspace, the existing React skills, and `get_doc` results. For styling selectors, target the rendered `igc-*` tag names instead of the React `Igr*` component names.
+Treat this file as a component selection reference, not as authoritative import guidance for a specific repo. Confirm exact imports from the current workspace, the existing React skills, and `get_example`/`get_doc` results. For styling selectors, target the rendered `igc-*` tag names instead of the React `Igr*` component names.