IgniteUI · onlyexeption · Jun 2, 2026 · Jun 2, 2026 · Jun 2, 2026 · Jun 2, 2026
diff --git a/skills/igniteui-react-components/SKILL.md b/skills/igniteui-react-components/SKILL.md
@@ -35,7 +35,6 @@ user-invocable: true
 | Charts | `igniteui-react-charts` (trial) `@infragistics/igniteui-react-charts` (licensed) | `igniteui-react-charts` |
 | Gauges | `igniteui-react-gauges` (trial) `@infragistics/igniteui-react-gauges` (licensed) | `igniteui-react-gauges` |
 | Maps | `igniteui-react-maps` (trial) `@infragistics/igniteui-react-maps` (licensed) | `igniteui-react-maps` |
-
 ## Example Usage
 
 - "What component should I use to display a list of items with actions?"
@@ -179,10 +178,3 @@ Use [COMPONENT-CATALOGUE.md](./reference/COMPONENT-CATALOGUE.md) to map any UI n
 6. **Handle events as `CustomEvent`** — not `React.SyntheticEvent`
 7. **Use refs sparingly** — prefer declarative props
 8. **Check slot names** in the docs
-
-## Additional Resources
-
-- [Ignite UI for React — Getting Started](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started)
-- [React Examples Repository](https://github.com/IgniteUI/igniteui-react-examples)
-- [npm: igniteui-react](https://www.npmjs.com/package/igniteui-react)
-- [@lit/react Documentation](https://lit.dev/docs/frameworks/react/)
diff --git a/skills/igniteui-react-components/reference/CHARTS-GRIDS.md b/skills/igniteui-react-components/reference/CHARTS-GRIDS.md
@@ -53,6 +53,10 @@ 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.
+
+The minimum pattern — register the module at file scope, then wrap the component in a sized container:
+
 ```tsx
 import { IgrCategoryChart, IgrCategoryChartModule } from 'igniteui-react-charts';
 import styles from './dashboard-view.module.css';
@@ -80,20 +84,6 @@ export default function DashboardView() {
 }
 ```
 
-```css
-/* dashboard-view.module.css */
-.chart-container {
-  min-width: 400px;
-  min-height: 300px;
-  flex-grow: 1;
-  flex-basis: 0;
-}
-.chart-container > * {
-  height: 100%;
-  width: 100%;
-}
-```
-
 ## Complete Data Chart Example
 
 > **⚠️ IMPORTANT:** `IgrDataChart` requires registering **multiple modules** depending on the series type used. For bar charts, register the modules shown below. If you miss any module, the chart or axis types will silently fail to render.
@@ -140,6 +130,8 @@ 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')`.
+
 ### Complete Bar Chart Component (Multiple Series)
 
 ```tsx
@@ -288,28 +280,6 @@ export default function BarChartView() {
 }
 ```
 
-### Key Props Reference for `IgrBarSeries`
-
-| Prop | Type | Description |
-|---|---|---|
-| `name` | `string` | Unique identifier — **required** when referencing the series from other elements |
-| `xAxisName` | `string` | Must match the `name` of an `IgrNumericXAxis` declared in the same chart |
-| `yAxisName` | `string` | Must match the `name` of an `IgrCategoryYAxis` declared in the same chart |
-| `valueMemberPath` | `string` | Field name in the data object that holds the bar length value |
-| `dataSource` | `any[]` | The data array — can differ per series for independent datasets |
-| `title` | `string` | Series label shown in the legend |
-| `isTransitionInEnabled` | `boolean` | Animates bars on initial render |
-| `isHighlightingEnabled` | `boolean` | Dims other series when one is hovered |
-| `showDefaultTooltip` | `boolean` | Shows a simple built-in tooltip (use `IgrDataToolTipLayer` for richer output) |
-
-### Available Bar Chart Variants
-
-| Variant | Component | Module |
-|---|---|---|
-| Bar (horizontal) | `IgrBarSeries` | `IgrDataChartVerticalCategoryModule` |
-| Stacked Bar | `IgrStackedBarSeries` + `IgrStackedFragmentSeries` | `IgrDataChartStackedModule` |
-| Stacked 100% Bar | `IgrStacked100BarSeries` + `IgrStackedFragmentSeries` | `IgrDataChartStackedModule` |
-
 ## Complete Grid Lite Example
 
 > **⚠️ IMPORTANT:** Grid Lite (`IgrGridLite` from `igniteui-react/grid-lite`) requires installing both `igniteui-react` and `igniteui-grid-lite` packages. It's a React wrapper component (uses `Igr` prefix) and works like any standard React component — no `.register()` needed.

diff --git a/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md b/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md
diff --git a/skills/igniteui-react-components/reference/EVENT-HANDLING.md b/skills/igniteui-react-components/reference/EVENT-HANDLING.md
@@ -35,6 +35,8 @@ function MyForm() {
 
 ## Common Event Props
 
+> For component-specific event signatures and detail types, call `get_api_reference('react', '<Component>', 'events')` — e.g. `get_api_reference('react', 'IgrCombo', 'events')`.
+
 | Component | Event Prop | Fires When |
 |---|---|---|
 | `IgrButton` | `onClick` | Button is clicked |

diff --git a/skills/igniteui-react-customize-theme/SKILL.md b/skills/igniteui-react-customize-theme/SKILL.md
@@ -106,14 +106,14 @@ import './index.css'; // Overrides second
 
 ## Theming Architecture
 
-The Ignite UI theming system is built on four pillars:
+The Ignite UI theming system is built on **palette**, **typography**, **elevations**, and per-component **schemas**. Use the MCP theming tools at the right stage:
 
-| Concept | Purpose |
-|---|---|
-| **Palette** | Color system with primary, secondary, surface, gray, info, success, warn, error families |
-| **Typography** | Font family, type scale (h1–h6, subtitle, body, button, caption, overline) |
-| **Elevations** | Box-shadow levels 0–24 for visual depth |
-| **Schema** | Per-component recipes mapping palette colors to component tokens |
+- **`create_palette`** — when the user provides brand colors; generates luminance-safe shades for all palette roles
+- **`create_theme`** — generates the complete global theme CSS; call after `create_palette`
+- **`create_typography`** — when the user wants to change fonts, type scale, or weights
+- **`create_elevations`** — when the user wants to adjust shadow depth
+- **`get_component_design_tokens`** - before writing any component-level CSS; retrieves the current token names for a specific component
+- **`set_size`**, **`set_spacing`**, or **`set_roundness`** - adjust component size, content spacing, and roundness.
 
 ### Design Systems
 
@@ -182,10 +182,3 @@ See [CSS-THEMING.md](./reference/CSS-THEMING.md) for approaches: class toggle, m
 4. **Palette shades**: 50 = lightest, 900 = darkest
 5. **Surface color must match variant** — light color for `light`, dark for `dark`
 6. **Never hardcode colors after palette generation**
-
-## Additional Resources
-
-- [Ignite UI for React — Themes Overview](https://www.infragistics.com/products/ignite-ui-react/react/components/themes/overview)
-- [igniteui-theming npm package](https://www.npmjs.com/package/igniteui-theming)
-- [CSS Custom Properties on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
-- [CSS ::part() on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)
diff --git a/skills/igniteui-react-customize-theme/reference/CSS-THEMING.md b/skills/igniteui-react-customize-theme/reference/CSS-THEMING.md
@@ -148,6 +148,8 @@ For truly dynamic one-off overrides:
 
 Override individual component appearance using CSS custom properties.
 
+> **AGENT INSTRUCTION**: Before writing component-level token overrides, call `get_component_design_tokens` with the component name (e.g., `"avatar"`, `"button"`, `"grid"`) to retrieve the current, correct token names. Token names vary by component and can change between versions. Use only tokens returned by that call — do not guess or reuse tokens from other components.
+
 ```css
 /* Target the Ignite UI web component tag name */
 igc-avatar {

diff --git a/skills/igniteui-react-customize-theme/reference/MCP-SERVER.md b/skills/igniteui-react-customize-theme/reference/MCP-SERVER.md
@@ -62,14 +62,6 @@ Edit the Claude Desktop config file:
 3. Set Command to `npx` and Arguments to `igniteui-theming igniteui-theming-mcp`
 4. Click OK and restart the AI Assistant
 
-## MCP Server Workflow
-
-1. **Detect platform**: Call `detect_platform` — it will detect `webcomponents` from `package.json`
-2. **Generate a theme**: Call `create_theme` with your desired colors and design system
-3. **Customize components**: Call `get_component_design_tokens` first, then `create_component_theme` with palette token values
-4. **Get color references**: Call `get_color` to get the correct CSS custom property for any palette shade
-5. **Adjust layout**: Call `set_size`, `set_spacing`, or `set_roundness`
-
 ## File Safety Rule
 
 > **IMPORTANT — File Safety Rule**: When generating theme code, **never overwrite existing style files directly**. Always propose changes as an update and let the user review before writing to disk.
diff --git a/skills/igniteui-react-generate-from-image-design/SKILL.md b/skills/igniteui-react-generate-from-image-design/SKILL.md
@@ -65,7 +65,7 @@ After the table, translate the image into CSS Grid rows and columns first. Prese
 
 This skill is React-only. Check package routing, theme CSS imports, or licensing only when imports, packages, or theming depend on it.
 
-Then call `list_components` with `framework: "react"` and relevant filters to find components matching each UI pattern. Common filters:
+Then call `list_components('react')` and relevant filters to find components matching each UI pattern. Common filters:
 
 - `chart`, `sparkline` - for data visualization
 - `list view`, `card`, `avatar`, `badge` - for data display
@@ -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` with the doc name from `list_components` results (e.g., `name: "card"`, `framework: "react"`). 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 React usage patterns, prop names, slot structure, event signatures, and any required module registration.
+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.
 
 Call `search_docs` for feature-based questions (e.g., "how to configure [component] for [specific behavior or styling need]").
 

diff --git a/skills/igniteui-react-generate-from-image-design/reference/component-mapping.md b/skills/igniteui-react-generate-from-image-design/reference/component-mapping.md
@@ -11,51 +11,37 @@
 - [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.
+
 ## Dashboard & Layout Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Top navigation bar | `IgrNavbar` | children plus named action/content slots |
-| Side navigation | `IgrNavDrawer` | `open`, drawer items, `icon` and `content` slots |
-| Content cards/panels | `IgrCard` | `IgrCardHeader`, `IgrCardContent`, `IgrCardActions` |
-| Tabbed content | `IgrTabs` + `IgrTab` | `label`, `slot="label"` |
-| Accordion sections | `IgrAccordion` | `IgrExpansionPanel` children |
-| Split layouts | `IgrSplitter` | resizable panes when splitter chrome is visible |
-| Tile dashboard | `IgrTileManager` | drag/resize tiles |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Top navigation bar | `IgrNavbar` |
+| Side navigation | `IgrNavDrawer` |
+| Content cards/panels | `IgrCard` |
+| Tabbed content | `IgrTabs` + `IgrTab` |
+| Accordion sections | `IgrAccordion` |
+| Split layouts | `IgrSplitter` |
+| Tile dashboard | `IgrTileManager` |
 
 Decision rule:
 
 - Use `IgrNavbar` for a top horizontal bar when its slot structure and behavior match the screenshot. Use custom children and CSS flex overrides to achieve multi-zone layouts inside it. Use a plain `<header>` when that is a closer structural fit.
 - Use `IgrNavDrawer` for a sidebar or side-navigation panel when drawer structure and behavior match the screenshot. Configure open and mini behavior according to whether the design shows fixed, collapsible, or icon-only navigation. Use a plain `<aside>` when a static custom sidebar matches the screenshot better.
 - Use `IgrTabs` for a horizontal tab strip when the screenshot clearly shows tabbed state switching. Use label-only tabs for routed navigation and inline tab content for local view switching.
 
-Component decision matrix (by visual pattern, domain-neutral):
-
-| Visual Pattern | Recommended Component | Notes |
-|---|---|---|
-| Repeated rows with icon/text/action | `IgrList` | Use when the row anatomy and interaction model match. Compose the row content with React children and the documented slots. Use native `<ul>/<li>` or custom containers when that is a closer visual fit |
-| Spreadsheet-like editable or sortable table | `IgrGridLite` or `IgrGrid` | Use only when content is truly tabular. Prefer `IgrGridLite` for lightweight MIT cases and `IgrGrid` when advanced grid features are required |
-| Hierarchical or tree-structured table | `IgrTreeGrid` or `IgrTree` | Use `IgrTreeGrid` for hierarchical tables and `IgrTree` for tree-style navigation or nested lists |
-| Content blocks / summary cards | `IgrCard` | Use when card chrome helps match the panel shape and structure. Use `IgrCardHeader`, `IgrCardContent`, and `IgrCardActions`, or plain `<div>` containers for flat or highly custom tiles |
-| Any text input field | `IgrInput` | Use when the input anatomy matches the screenshot, including search fields and inline editors. Apply CSS to match the screenshot's border/radius style |
-| Dropdown or select | `IgrSelect` | Use when the screenshot clearly shows select/dropdown behavior |
-| Form fields with labels and inputs | `IgrInput`, `IgrSelect`, `IgrCombo`, `IgrDatePicker`, `IgrDateTimeInput` | Cover text, select, combo, and date/time inputs |
-| Multi-step form / wizard | `IgrStepper` | Use when a sequence of steps is visually present |
-| Filter chips / tag inputs | `IgrChip` | Use when chip anatomy matches status badges, filter tags, or removable labels in the screenshot |
-| Calendar or date picker as a primary view element | `IgrCalendar`, `IgrDatePicker`, `IgrDateRangePicker` | Use when scheduling or date selection is the core UI |
-| Top icon/action bar | `IgrNavbar` with `IgrButton` / `IgrIconButton` | Use when a navbar structure matches the screenshot; use plain icon buttons or custom containers when that is a closer fit |
-
 ## Chart Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Area chart | `IgrCategoryChart` | `chartType`, `markerTypes`, `areaFillOpacity` |
-| Line chart | `IgrCategoryChart` | `chartType`, `markerTypes` |
-| Column chart | `IgrCategoryChart` | `chartType`, `markerTypes`, `includedProperties` |
-| Sparkline (mini chart) | `IgrSparkline` or `IgrDataChart` | `displayType`, `valueMemberPath`, sized container |
-| Pie/donut chart | `IgrPieChart` | `valueMemberPath`, `labelMemberPath` |
-| Financial chart | `IgrFinancialChart` | OHLC/candlestick data |
-| Complex multi-series | `IgrDataChart` | multiple series + axes plus module registration |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Area chart | `IgrCategoryChart` |
+| Line chart | `IgrCategoryChart` |
+| Column chart | `IgrCategoryChart` |
+| Sparkline (mini chart) | `IgrSparkline` or `IgrDataChart` |
+| Pie/donut chart | `IgrPieChart` |
+| Financial chart | `IgrFinancialChart` |
+| Complex multi-series | `IgrDataChart` |
 
 Decision rule:
 
@@ -65,17 +51,17 @@ Decision rule:
 
 ## Data Display Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Item list | `IgrList` | slot-based row content, selection, and dense list styling |
-| User avatar | `IgrAvatar` | `initials`, `shape`, `src` |
-| Status badge | `IgrBadge` | value/children plus token-based styling |
-| Icons | `IgrIcon` | icon name, collection, styling |
-| Progress bar | `IgrLinearProgress` | `value`, `max` |
-| Circular progress | `IgrCircularProgress` | `value`, `max` |
-| Flat data grid | `IgrGridLite` or `IgrGrid` | choose by feature level and package availability |
-| Hierarchical/tree data grid | `IgrTreeGrid` | parent-child data |
-| Filter/tag chips | `IgrChip` | selected state, removable UI, token-based styling |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Item list | `IgrList` |
+| User avatar | `IgrAvatar` |
+| Status badge | `IgrBadge` |
+| Icons | `IgrIcon` |
+| Progress bar | `IgrLinearProgress` |
+| Circular progress | `IgrCircularProgress` |
+| Flat data grid | `IgrGridLite` or `IgrGrid` |
+| Hierarchical/tree data grid | `IgrTreeGrid` |
+| Filter/tag chips | `IgrChip` |
 
 Decision rule:
 
@@ -86,44 +72,44 @@ Decision rule:
 
 ## Form & Input Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Text input | `IgrInput` | `label`, `placeholder`, `type` |
-| Dropdown select | `IgrSelect` | option children, label, value |
-| Searchable multi-select | `IgrCombo` | `data`, `displayKey`, `valueKey` |
-| Date picker | `IgrDatePicker` | value and label props |
-| Date/time input | `IgrDateTimeInput` | value, format options |
-| Toggle switch | `IgrSwitch` | checked state, change events |
-| Checkbox | `IgrCheckbox` | checked state, `indeterminate` |
-| Radio button group | `IgrRadioGroup` + `IgrRadio` | `name`, selected value |
-| Slider | `IgrSlider` | `min`, `max`, `value` |
-| Multi-step wizard | `IgrStepper` | orientation, step composition |
-| Chip filter bar | `IgrChip` collection in a flex wrapper | compose removable/filter chips manually |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Text input | `IgrInput` |
+| Dropdown select | `IgrSelect` |
+| Searchable multi-select | `IgrCombo` |
+| Date picker | `IgrDatePicker` |
+| Date/time input | `IgrDateTimeInput` |
+| Toggle switch | `IgrSwitch` |
+| Checkbox | `IgrCheckbox` |
+| Radio button group | `IgrRadioGroup` + `IgrRadio` |
+| Slider | `IgrSlider` |
+| Multi-step wizard | `IgrStepper` |
+| Chip filter bar | `IgrChip` collection in a flex wrapper |
 
 ## Calendar & Scheduling Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Calendar view | `IgrCalendar` | selection mode, `value`, change events |
-| Date range picker | `IgrDateRangePicker` | range value, change events |
-| Month/year picker | `IgrCalendar` | month/year view settings per docs |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Calendar view | `IgrCalendar` |
+| Date range picker | `IgrDateRangePicker` |
+| Month/year picker | `IgrCalendar` |
 
 ## Map Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| World map | `IgrGeographicMap` | `zoomable`, `backgroundContent` |
-| Map markers | `IgrGeographicSymbolSeries` | `latitudeMemberPath`, `longitudeMemberPath`, `markerType`, `markerBrush` |
-| Bubble overlay | `IgrGeographicProportionalSymbolSeries` | sized markers |
-| Shape regions | `IgrGeographicShapeSeries` | polygon rendering |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| World map | `IgrGeographicMap` |
+| Map markers | `IgrGeographicSymbolSeries` |
+| Bubble overlay | `IgrGeographicProportionalSymbolSeries` |
+| Shape regions | `IgrGeographicShapeSeries` |
 
 ## Gauge Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Linear gauge | `IgrLinearGauge` | `value`, `minimumValue`, `maximumValue`, `needleBrush` |
-| Radial gauge | `IgrRadialGauge` | `value`, `minimumValue`, `maximumValue` |
-| Bullet graph | `IgrBulletGraph` | performance vs target |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Linear gauge | `IgrLinearGauge` |
+| Radial gauge | `IgrRadialGauge` |
+| Bullet graph | `IgrBulletGraph` |
 
 ## Package Requirements