igniteui-cli 15.2.2 → 15.3.0

package/templates/react/igr-ts/projects/_base_with_home/files/src/app/home/style.module.css

@@ -1,36 +1,95 @@
-:local(.logo) {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
+:local(.content) {
+  width: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  padding: 24px;
+  box-sizing: border-box;
+  text-align: center;
+  font-family: "Titillium Web", "Segoe UI", Arial, sans-serif;
+  color: #000;
 }
 
 :local(.header) {
-  padding-top: 5em;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: #333;
+  color: #09f;
+  font-size: 80px;
+  font-weight: 300;
+  line-height: 1.2;
+  margin: 0 0 16px;
+}
+
+:local(.subject) {
+  font-size: 28px;
+  font-weight: 400;
+  line-height: 1.4;
+  margin: 0 0 32px;
+  max-width: 1120px;
+}
+
+:local(.logo) {
+  display: block;
+  margin-bottom: 32px;
+  width: 500px;
+  height: 350px;
+  max-width: 100%;
+  object-fit: contain;
 }
 
 :local(.link) {
-  color: #61dafb;
+  font-size: 16px;
+}
+
+:local(.subtitle) {
+  font-size: 16px;
+  margin: 16px 0 8px;
+}
+
+:local(.content) p:nth-last-child(2) {
+  padding-top: 16px;
 }
 
-:local(.app__name) {
-  padding-top: 1em;
+:local(.githubLinks) {
   display: flex;
-  flex-direction: column;
+  flex-flow: row wrap;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+  gap: 24px;
+  margin: 0;
+}
+
+:local(.githubItem) {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+}
+
+:local(.githubLink) {
+  font-size: 16px;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
+:local(.githubIcon) {
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+  flex: 0 0 24px;
+  display: block;
+}
+
+:local(.content) p {
+  margin: 0 0 8px;
+}
+
+@media (max-width: 768px) {
+  :local(.header) {
+    font-size: 40px;
   }
-  to {
-    transform: rotate(360deg);
+
+  :local(.subject) {
+    font-size: 20px;
+  }
+
+  :local(.logo) {
+    width: 100%;
+    height: 240px;
   }
 }

package/templates/react/igr-ts/projects/ai-config/files/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/)

package/templates/react/igr-ts/projects/ai-config/files/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.

package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md

@@ -3,136 +3,6 @@
 ## Overview
 This reference gives high-level guidance on Ignite UI for React components, their key features, and common use cases. For a full list of components, call `list_components` from `igniteui-cli` with the specific chart, or grid component, or feature you're interested in.
 
-## Available Packages
-
-Ignite UI for React is distributed across several packages depending on your needs:
-
-| Package | License | Install | Best For |
-|---|---|---|---|
-| [`igniteui-react`](https://www.npmjs.com/package/igniteui-react) | MIT | `npm install igniteui-react` | General UI components (inputs, layouts, notifications, scheduling) |
-| [`igniteui-grid-lite`](https://www.npmjs.com/package/igniteui-grid-lite) | MIT | `npm install igniteui-react igniteui-grid-lite` | Lightweight grid (Grid Lite) — requires both packages, import from `igniteui-react/grid-lite` |
-| [`igniteui-react-grids`](https://www.npmjs.com/package/igniteui-react-grids) | Commercial | `npm install igniteui-react-grids` (trial) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) |
-| [`igniteui-react-charts`](https://www.npmjs.com/package/igniteui-react-charts) | Commercial | `npm install igniteui-react-charts` (trial) | Charts (Category, Financial, Pie, Scatter, etc.) |
-| [`igniteui-react-maps`](https://www.npmjs.com/package/igniteui-react-maps) | Commercial | `npm install igniteui-react-maps` (trial) | Geographic maps |
-| [`igniteui-react-gauges`](https://www.npmjs.com/package/igniteui-react-gauges) | Commercial | `npm install igniteui-react-gauges` (trial) | Radial and linear gauges |
-
-> **Note:** The lightweight 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) that works like any other React component — no `.register()` needed. See [CHARTS-GRIDS.md](./CHARTS-GRIDS.md) for setup details.
-
----
-
-## Component Catalogue by UI Pattern
-
-Use the tables below to map a UI need to the right React component. All components use the **`Igr`** prefix.
-
-### Inputs & Forms
-
-| UI Need | Component | Import | Docs |
-|---|---|---|---|
-| Text field / text input | `IgrInput` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/input) |
-| Multi-line text | `IgrTextarea` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/text-area) |
-| Checkbox | `IgrCheckbox` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/checkbox) |
-| On/off toggle | `IgrSwitch` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/switch) |
-| Single choice from a list | `IgrRadio` / `IgrRadioGroup` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/radio) |
-| Star / score rating | `IgrRating` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/rating) |
-| Formatted / masked text input | `IgrMaskInput` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/mask-input) |
-| Date and time input | `IgrDateTimeInput` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/date-time-input) |
-| File upload | `IgrFileInput` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/file-input) |
-| Simple dropdown / select | `IgrSelect` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/select) |
-| Searchable dropdown, single or multi-select | `IgrCombo` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/combo/overview) |
-| Grouped toggle buttons | `IgrButtonGroup` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/button-group) |
-| Range / numeric slider | `IgrSlider` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/slider) |
-| Range slider (two handles) | `IgrRangeSlider` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/slider) |
-
-### Buttons & Actions
-
-| UI Need | Component | Import | Docs |
-|---|---|---|---|
-| Standard clickable button | `IgrButton` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/button) |
-| Icon-only button | `IgrIconButton` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/icon-button) |
-| Click ripple effect | `IgrRipple` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/ripple) |
-| Removable tag / filter chip | `IgrChip` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/chip) |
-
-### Scheduling & Date Pickers
-
-| UI Need | Component | Import | Docs |
-|---|---|---|---|
-| Full calendar view | `IgrCalendar` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/scheduling/calendar) |
-| Date picker (popup calendar) | `IgrDatePicker` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/scheduling/date-picker) |
-| Date range selection | `IgrDateRangePicker` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/scheduling/date-range-picker) |
-
-### Notifications & Feedback
-
-| UI Need | Component | Import | Docs |
-|---|---|---|---|
-| Brief auto-dismiss notification | `IgrToast` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/notifications/toast) |
-| Actionable dismissible notification bar | `IgrSnackbar` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/notifications/snackbar) |
-| Persistent status banner | `IgrBanner` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/notifications/banner) |
-| Modal confirmation or content dialog | `IgrDialog` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/notifications/dialog) |
-| Tooltip on hover | `IgrTooltip` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/tooltip) |
-| Small count / status indicator | `IgrBadge` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/badge) |
-
-### Progress Indicators
-
-| UI Need | Component | Import | Docs |
-|---|---|---|---|
-| Horizontal progress bar | `IgrLinearProgress` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/linear-progress) |
-| Circular / spinner progress | `IgrCircularProgress` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/circular-progress) |
-
-### Layouts & Containers
-
-| UI Need | Component | Import | Docs |
-|---|---|---|---|
-| Generic content card | `IgrCard` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/card) |
-| User avatar / profile image | `IgrAvatar` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/avatar) |
-| Icon display | `IgrIcon` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/icon) |
-| Horizontal or vertical divider | `IgrDivider` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/divider) |
-| Collapsible section | `IgrExpansionPanel` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/expansion-panel) |
-| Multiple collapsible sections | `IgrAccordion` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/accordion) |
-| Tabbed content panels (with inline content) | `IgrTabs` (content in `IgrTab`) | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/tabs) |
-| Image / content slideshow | `IgrCarousel` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/carousel) |
-| Multi-step wizard / onboarding flow | `IgrStepper` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/stepper) |
-| Resizable, draggable dashboard tiles | `IgrTileManager` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/tile-manager) |
-
-### Navigation
-
-| UI Need | Component | Import | Docs |
-|---|---|---|---|
-| Top application bar / toolbar | `IgrNavbar` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/menus/navbar) |
-| Side navigation drawer | `IgrNavDrawer` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/menus/navigation-drawer) |
-| Tab-based navigation (with router) | `IgrTabs` (label-only, no content) | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/tabs) |
-| Context menu / actions dropdown | `IgrDropdown` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/dropdown) |
-
-### Lists & Data Display
-
-| UI Need | Component | Import | Docs |
-|---|---|---|---|
-| Simple scrollable list | `IgrList` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/list) |
-| Hierarchical / tree data | `IgrTree` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/tree) |
-| Tabular data (MIT, lightweight) | `IgrGridLite` | `igniteui-react/grid-lite` (requires both `igniteui-react` and `igniteui-grid-lite` packages) | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grid-lite/overview) |
-| Full-featured tabular data grid | `IgrGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/grid/overview) |
-| Nested / master-detail grid | `IgrHierarchicalGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/hierarchical-grid/overview) |
-| Parent-child relational tree grid | `IgrTreeGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/tree-grid/overview) |
-| Cross-tabulation / BI pivot table | `IgrPivotGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/pivot-grid/overview) |
-
-### Charts & Data Visualization
-
-> **⚠️ IMPORTANT:** Chart, gauge, and map components require **explicit module registration** and a **sized container**. Import the `*Module` class and call `.register()` at module level, and wrap the component in a container with explicit `min-width`/`min-height` or `flex-grow`. See [CHARTS-GRIDS.md](./CHARTS-GRIDS.md) for details.
-
-| UI Need | Component | Module Registration | Import | Docs |
-|---|---|---|---|---|
-| Category / bar / line chart | `IgrCategoryChart` | `IgrCategoryChartModule.register()` | `igniteui-react-charts` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/charts/chart-overview) |
-| Pie / doughnut chart | `IgrPieChart` | `IgrPieChartModule.register()` | `igniteui-react-charts` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/charts/chart-overview) |
-| Financial / stock chart | `IgrFinancialChart` | `IgrFinancialChartModule.register()` | `igniteui-react-charts` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/charts/chart-overview) |
-| Radial gauge | `IgrRadialGauge` | `IgrRadialGaugeModule.register()` | `igniteui-react-gauges` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/gauges/radial-gauge) |
-| Linear gauge | `IgrLinearGauge` | `IgrLinearGaugeModule.register()` | `igniteui-react-gauges` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/gauges/linear-gauge) |
-| Geographic map | `IgrGeographicMap` | `IgrGeographicMapModule.register()` | `igniteui-react-maps` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/maps/geographic-map) |
-
-### Conversational / AI
-
-| UI Need | Component | Import | Docs |
-|---|---|---|---|
-| Chat / AI assistant message thread | `IgrChat` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/interactivity/chat) |
-
 ---
 
 ## Step-by-Step: Choosing Components for a UI
@@ -149,7 +19,7 @@ Break the described UI into atomic patterns. Examples:
 
 ### Step 2 — Map patterns to components
 
-Use the **Component Catalogue** tables above to find matching components. When in doubt:
+Call `list_components('react')` to discover available components, optionally filtered by keyword (e.g., `filter: 'date'` for date-related components). When in doubt:
 
 | If the user needs… | Prefer… | Over… |
 |---|---|---|
@@ -177,14 +47,9 @@ Confirm which package provides the component:
 - **Maps** → `igniteui-react-maps` *(commercial)*
 - **Gauges** → `igniteui-react-gauges` *(commercial)*
 
-### Step 4 — Link to official resources
-
-Always direct the user to the official documentation linked in the tables above. Key entry points:
+### Step 4 — Look up component documentation
 
-- **Getting started**: [Ignite UI for React Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started)
-- **React examples**: [https://github.com/IgniteUI/igniteui-react-examples](https://github.com/IgniteUI/igniteui-react-examples)
-- **npm package**: [https://www.npmjs.com/package/igniteui-react](https://www.npmjs.com/package/igniteui-react)
-- **GitHub repository**: [https://github.com/IgniteUI/igniteui-react](https://github.com/IgniteUI/igniteui-react)
+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"`).
 
 ### Step 5 — Provide a starter code snippet
 
@@ -288,8 +153,9 @@ function Dashboard() {
 
 ## Searching the Documentation
 
-If you are unsure about a component or need more information:
+Use MCP tools for up-to-date component discovery and API lookup:
 
-1. **Browse the docs** at `https://www.infragistics.com/products/ignite-ui-react/react/components/` — the left sidebar groups components by category
-2. **Use the naming convention**: React components use the `Igr` prefix followed by PascalCase name (e.g., `IgrDateRangePicker`, `IgrNavDrawer`). The docs URL typically uses kebab-case: `components/scheduling/date-range-picker`
-3. **Check the examples repo** at [igniteui-react-examples](https://github.com/IgniteUI/igniteui-react-examples) for working sample applications
+- `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
+- `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

package/templates/react/igr-ts/projects/ai-config/files/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 |

package/templates/react/igr-ts/projects/ai-config/files/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)

package/templates/react/igr-ts/projects/ai-config/files/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 {

package/templates/react/igr-ts/projects/ai-config/files/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.

package/templates/react/igr-ts/projects/ai-config/files/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]").