refactor: update documentation to include get_example for working cod…

skills/igniteui-wc-choose-components/SKILL.md

@@ -79,16 +79,17 @@ If the request only says "grid", choose by features:
 
 ## Component Catalogue by UI Pattern
 
-> **Use MCP to discover the live component catalogue.** Call `list_components({ framework: "webcomponents" })` — it returns all 300+ available docs with doc names, summaries, and premium status. Then call `get_doc` with the exact doc `name` field to get usage patterns, HTML examples, and slots; call `get_api_reference` with the component class name (e.g. `IgcCarouselComponent`) for the full property/method/event API.
+> **Use MCP to discover the live component catalogue.** Call `list_components({ framework: "webcomponents" })` — it returns all 300+ available docs with doc names, summaries, and premium status. Then call `get_example` for working code (props, event handlers, structure) or `get_doc` for explanation context (event lifecycle, option tradeoffs, feature interactions); call `get_api_reference` with the component class name (e.g. `IgcCarouselComponent`) for the full property/method/event API.
 >
 > ```
 > list_components({ framework: "webcomponents", filter: "<keyword>" })
+> get_example({ framework: "webcomponents", name: "<doc-name-from-list>", language: "ts" })
 > get_doc({ framework: "webcomponents", name: "<doc-name-from-list>" })
 > ```
 >
 > Use `filter` to narrow results: `"input"`, `"grid"`, `"chart"`, `"nav"`, `"date"`, `"combo"`, etc.
 
-The tables below are a **quick routing reference** for the most common UI patterns. Component tags and package assignments are stable; for usage examples call `get_doc`, for full property/method/event API call `get_api_reference`.
+The tables below are a **quick routing reference** for the most common UI patterns. Component tags and package assignments are stable; for working code examples call `get_example`, for explanation context call `get_doc`, for full property/method/event API call `get_api_reference`.
 
 ### Inputs & Forms
 
@@ -186,7 +187,7 @@ All inputs are form-associated and integrate natively with `<form>`.
 
 > Charts are provided by the **`igniteui-webcomponents-charts`** package (commercial). Use `IgcCategoryChartComponent` or `IgcFinancialChartComponent` for simpler domain-specific scenarios; use `IgcDataChartComponent` for full flexibility (mixed series, numeric/time axes, scatter, polar, etc.).
 >
-> Call `list_components({ framework: "webcomponents", filter: "chart" })` for the full chart doc list, then `get_doc` on the specific chart type before coding.
+> Call `list_components({ framework: "webcomponents", filter: "chart" })` for the full chart doc list, then `get_example` for working code or `get_doc` for explanation context on the specific chart type before coding.
 
 | UI Need | Component | Tag |
 |---|---|---|
@@ -250,7 +251,12 @@ Confirm which package provides the component:
 
 These tools serve different data sources — call the right one to avoid guessing:
 
-- **Usage patterns, HTML examples, slots** → `get_doc` serves the component's **topic-page** (prose guide, code samples, slot names, CSS examples). Use the kebab-case doc `name` returned by `list_components`:
+- **Working code (props, event handlers, structure)** → `get_example` returns concise, runnable examples. Pass `language` to cut response size:
+  ```
+  get_example({ framework: "webcomponents", name: "<doc-name>", language: "ts" })
+  ```
+
+- **Usage explanation, slots, feature context** → `get_doc` serves the component's **topic-page** (prose guide, code samples, slot names, CSS examples). Use when explanation context matters (event lifecycle, option tradeoffs, feature interactions):
   ```
   get_doc({ framework: "webcomponents", name: "<doc-name>" })
   ```

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

@@ -14,15 +14,15 @@ Before writing any implementation code, you must complete these steps in order:
 2. Read [references/component-mapping.md](references/component-mapping.md) and [references/gotchas.md](references/gotchas.md).
 3. This skill is Web Components-first. Check package layout or licensing only when package choice, component registration, or theming depend on it.
 4. To apply a theme, use the theming workflow from this skill and the dedicated `igniteui-wc-customize-component-theme` 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 working code) or `get_doc` (for explanation context) 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, layout structure.
 2. **Confirm package layout if needed** - Web Components packages are split by component family; check package layout or licensing only when package choice, component registration, 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 working code or `get_doc` for explanation context for every chosen component family before coding.
 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` when Sass is configured, or import the closest pre-built theme CSS. (b) After a theme exists, prefer using design tokens or scoped semantic CSS variables over raw literals. (c) For every Ignite UI component family that exposes design tokens, 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.
@@ -86,7 +86,8 @@ For component-to-Ignite-UI mapping, see [references/component-mapping.md](refere
 
 For every chosen component category, use both tools before coding:
 
-- **Usage patterns, HTML examples, slots, registration** → `get_doc({ framework: "webcomponents", name: "<doc-name>" })` — use the `name` field from `list_components`, not the display title
+- **Working code (props, event handlers, structure)** → `get_example({ framework: "webcomponents", name: "<doc-name>", language: "ts" })` — prefer this for concise runnable code; pass `language` to cut response size
+- **Usage explanation, slots, registration context** → `get_doc({ framework: "webcomponents", name: "<doc-name>" })` — use the `name` field from `list_components`, not the display title; prefer when explanation context matters (event lifecycle, option tradeoffs, feature interactions)
 - **Full property/method/event API** → `get_api_reference({ platform: "webcomponents", component: "<ClassName>" })` — use `search_api` first to find the exact class name if needed
 
 Call `search_docs` for feature-based questions (e.g., "how to configure [component] for [specific behavior or styling need]").

skills/igniteui-wc-generate-from-image-design/references/component-mapping.md

@@ -11,7 +11,8 @@
 
 > **MCP lookup pattern (applies to all sections):**
 > - Find doc names → `list_components({ framework: "webcomponents", filter: "<keyword>" })`
-> - Usage examples and slots → `get_doc({ framework: "webcomponents", name: "<doc-name>" })`
+> - Working code (props, handlers, structure) → `get_example({ framework: "webcomponents", name: "<doc-name>", language: "ts" })`
+> - Usage explanation and slots → `get_doc({ framework: "webcomponents", name: "<doc-name>" })`
 > - Find exact class names → `search_api({ platform: "webcomponents", query: "<keyword>" })`
 > - Full property/method/event API → `get_api_reference({ platform: "webcomponents", component: "<ClassName>" })`
 
@@ -126,6 +127,6 @@ Install only the packages required by the components you actually selected.
 
 ## Import Patterns
 
-Treat this file as a component selection reference, not as authoritative import guidance for a specific repo. Confirm exact imports and registration from `detect_platform`, the current workspace, framework setup, and `get_doc` results.
+Treat this file as a component selection reference, not as authoritative import guidance for a specific repo. Confirm exact imports and registration from `detect_platform`, the current workspace, framework setup, and `get_example`/`get_doc` results.
 
 For direct Web Components usage, import the component classes from the selected package and register only the needed elements with `defineComponents(...)`. If the host app uses React, Angular, Vue, or another wrapper pattern around Web Components, follow [`igniteui-wc-integrate-with-framework`](../../igniteui-wc-integrate-with-framework/SKILL.md) for the final setup details.

skills/igniteui-wc-generate-from-image-design/references/gotchas.md

@@ -30,12 +30,13 @@ Do not assume everything comes from `igniteui-webcomponents`. Advanced grids, ch
 
 > **Always use the MCP lookup pattern before coding any chart.** Chart APIs are extensive and change between versions.
 > - Find doc names → `list_components({ framework: "webcomponents", filter: "chart" })`
-> - Usage examples and slots → `get_doc({ framework: "webcomponents", name: "<doc-name>" })`
+> - Working code (props, handlers, structure) → `get_example({ framework: "webcomponents", name: "<doc-name>", language: "ts" })`
+> - Usage explanation and slots → `get_doc({ framework: "webcomponents", name: "<doc-name>" })`
 > - Find exact class names → `search_api({ platform: "webcomponents", query: "<keyword>" })`
 > - Full property/method/event API → `get_api_reference({ platform: "webcomponents", component: "<ClassName>" })`
 
 ### Markers shown by default
-Category charts can show markers by default. If the screenshot does not show markers, set `markerTypes` to the matching no-marker option documented for the component. Confirm the exact value shape from `get_doc`.
+Category charts can show markers by default. If the screenshot does not show markers, set `markerTypes` to the matching no-marker option documented for the component. Confirm the exact value shape from `get_example` or `get_doc`.
 
 ### `plotAreaBackground` and `areaFillOpacity` are inherited — not visible in `get_api_reference`
 Both properties exist but are defined on parent classes, so `get_api_reference({ platform: "webcomponents", component: "IgcCategoryChartComponent" })` will not list them. Use `search_api` to find them:

skills/igniteui-wc-migrate-grid-lite-to-premium/SKILL.md

@@ -1,4 +1,4 @@
----
+---
 name: igniteui-wc-migrate-grid-lite-to-premium
 description: Step-by-step migration guide from igniteui-grid-lite (IgcGridLite) to the premium igniteui-webcomponents-grids (IgcGridComponent), covering every import, class name, HTML tag, property, event, template, sorting, filtering, and theming API change.
 user-invocable: true
@@ -17,7 +17,7 @@ This skill automates the migration from **Grid Lite** (`igniteui-grid-lite`, MIT
 Before producing migration code:
 
 1. **Identify the current Grid Lite usage** - read the user's existing TypeScript and HTML files to understand their column configuration, cell templates, data binding, and any `dataPipelineConfiguration` usage.
-2. **Use the MCP server** - call `mcp_igniteui-cli_get_api_reference` or `mcp_igniteui-cli_get_doc` (framework: `webcomponents`) to verify current API details when in doubt.
+2. **Use the MCP server** - call `mcp_igniteui-cli_get_example` for working code examples, `mcp_igniteui-cli_get_api_reference` for API details, or `mcp_igniteui-cli_get_doc` (framework: `webcomponents`) for explanation context when in doubt.
 3. **Only then produce output** - base all code on verified references, not memory.
 
 ---