igniteui-cli 15.2.2-alpha.3 → 15.3.0

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

package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-generate-from-image-design/reference/component-mapping.md

@@ -11,17 +11,19 @@
 - [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:
 
@@ -29,33 +31,17 @@ Decision rule:
 - 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
 

package/templates/react/igr-ts/projects/empty/index.js

@@ -30,8 +30,8 @@ class EmptyIgrTsProject extends _base_with_home_1.BaseWithHomeIgrTsProject {
     constructor() {
         super(...arguments);
         this.id = "empty";
-        this.name = "Empty project";
-        this.description = "Empty project structure with home page and routing";
+        this.name = "Empty Project";
+        this.description = "Starter project with routing and a home page";
         this.dependencies = [];
         this.framework = "react";
         this.projectType = "igr-ts";

package/templates/react/igr-ts/projects/side-nav/files/src/app/app-routes.tsx

@@ -0,0 +1,5 @@
+import Home from './home/home';
+
+export const routes = [
+  { path: '/', element: <Home />, text: 'Home', icon: 'home' }
+];

package/templates/react/igr-ts/projects/side-nav/files/src/app/app.css

@@ -0,0 +1,82 @@
+.app {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+  overflow: hidden;
+}
+
+.app__navbar {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  height: 56px;
+  padding: 0 16px;
+  background: #239ef0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
+  box-sizing: border-box;
+}
+
+.app__title {
+  margin: 0 0 0 16px;
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1;
+  color: #000;
+}
+
+.app__menu-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  color: #000;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.app__menu-button igc-icon {
+  font-size: 24px;
+}
+
+.app__body {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.app__drawer {
+  flex: 0 0 auto;
+  height: 100%;
+  --menu-full-width: 280px;
+}
+
+igc-nav-drawer-item::part(base) {
+  min-height: 48px;
+  color: #2d2d2d;
+}
+
+igc-nav-drawer-item[active]::part(base) {
+  background: #e0f2ff;
+  color: #0075d2;
+}
+
+igc-nav-drawer-item[active] igc-icon {
+  color: #0075d2;
+}
+
+igc-nav-drawer-item:not([active]) igc-icon {
+  color: #2d2d2d;
+}
+
+.app__content {
+  flex: 1 1 auto;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: stretch;
+  min-width: 0;
+  overflow: auto;
+}