igniteui-cli 15.2.2 → 15.3.1-beta.1

package/templates/webcomponents/igc-ts/projects/_base_with_home/files/src/app/home/home.ts

@@ -1,40 +1,134 @@
 import { html, css, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import { github } from '@igniteui/material-icons-extended';
+import {
+  defineComponents,
+  IgcIconComponent,
+  registerIconFromText,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcIconComponent);
+registerIconFromText(github.name, github.value, 'imx-icons');
 
 @customElement('app-home')
 export class HomeComponent extends LitElement {
   static styles = css`
+    :host {
+      display: flex;
+      flex-flow: column nowrap;
+      align-items: center;
+      width: 100%;
+      padding: 24px;
+      text-align: center;
+      box-sizing: border-box;
+    }
+
+    h1 {
+      color: #09f;
+      font-size: 80px;
+      font-weight: 300;
+      line-height: 1.2;
+      margin: 0 0 16px;
+    }
+
+    h4 {
+      font-size: 28px;
+      font-weight: 400;
+      line-height: 1.4;
+      margin: 0 0 32px;
+      max-width: 1120px;
+    }
+
     p {
+      font-size: 16px;
       margin: 0px 0px 8px 0px;
     }
+
+    p:nth-last-child(2) {
+      padding-top: 16px;
+    }
+
+    .content__container--wide {
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: center;
+      gap: 24px;
+    }
+
+    .content__github-item {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+    }
+
+    .content__github-icon {
+      display: inline-flex;
+      width: 24px;
+      height: 24px;
+      margin-right: 8px;
+      flex: 0 0 24px;
+      color: #000;
+    }
+
     img {
-      margin-bottom: 48px;
-      max-height: 480px;
+      display: block;
+      width: 500px;
+      height: 350px;
+      margin-bottom: 32px;
       max-width: 100%;
+      object-fit: contain;
+    }
+
+    a {
+      font-size: 16px;
+    }
+
+    @media (max-width: 768px) {
+      h1 {
+        font-size: 40px;
+      }
+
+      h4 {
+        font-size: 20px;
+      }
+
+      img {
+        width: 100%;
+        height: 240px;
+      }
     }
   `;
 
   render() {
     return html`
       <h1>Welcome to Ignite UI for Web Components!</h1>
-      <h4>A complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.</h4>
-      <img src="./src/assets/astronaut-components.svg" alt="indigoDesign">
+      <h4>A complete library of 50+ UI components for building modern web applications with reusable Web Components.</h4>
+      <img src="./src/assets/astronaut-components.svg" alt="Ignite UI for Web Components">
       <p class="ig-typography__subtitle-1">Discover more at</p>
       <p>
-        <a href="https://www.infragistics.com/products/ignite-ui-web-components" target="_blank">
+        <a href="https://www.infragistics.com/products/ignite-ui-web-components" target="_blank" rel="noopener noreferrer">
           www.infragistics.com/products/ignite-ui-web-components
         </a>
       </p>
       <p>
-        <a href="https://www.infragistics.com/products/indigo-design" target="_blank">
+        <a href="https://www.infragistics.com/products/indigo-design" target="_blank" rel="noopener noreferrer">
           www.infragistics.com/products/indigo-design
         </a>
       </p>
       <p class="ig-typography__subtitle-1">We are also on GitHub</p>
       <p class="content__container--wide">
-        <a href="https://github.com/IgniteUI/igniteui-cli" target="_blank">
-          <span class="content__link-image"></span>Ignite UI CLI
-        </a>
+        <span class="content__github-item">
+          <igc-icon class="content__github-icon" name="github" collection="imx-icons" aria-hidden="true"></igc-icon>
+          <a href="https://github.com/IgniteUI/igniteui-webcomponents" target="_blank" rel="noopener noreferrer" class="content__link--github">
+            Ignite UI Web Components
+          </a>
+        </span>
+        <span class="content__github-item">
+          <igc-icon class="content__github-icon" name="github" collection="imx-icons" aria-hidden="true"></igc-icon>
+          <a href="https://github.com/IgniteUI/igniteui-cli" target="_blank" rel="noopener noreferrer" class="content__link--github">
+            Ignite UI CLI
+          </a>
+        </span>
       </p>
     `;
   }

package/templates/webcomponents/igc-ts/projects/ai-config/files/skills/igniteui-wc-choose-components/SKILL.md

@@ -64,161 +64,145 @@ This skill helps AI agents and developers identify the best Ignite UI components
 
 ## Available Packages
 
-Ignite UI for Web Components is distributed across several packages depending on your needs:
-
-| Package | License | Install | Best For |
+| Component family | License | Trial install | Licensed install |
 |---|---|---|---|
-| [`igniteui-webcomponents`](https://www.npmjs.com/package/igniteui-webcomponents) | MIT | `npm install igniteui-webcomponents` | General UI components (inputs, layouts, notifications, scheduling) |
-| [`igniteui-webcomponents-grids`](https://www.npmjs.com/package/igniteui-webcomponents-grids) | Commercial | `npm install igniteui-webcomponents-grids` (trial) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) with many built-in functionalities  |
-| [`@infragistics/igniteui-webcomponents-grids`](https://packages.infragistics.com/feeds/js-licensed/@infragistics/igniteui-webcomponents-grids) | Commercial | `npm install @infragistics/igniteui-webcomponents-grids` (licensed) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) with many built-in functionalities  |
-| [`igniteui-grid-lite`](https://www.npmjs.com/package/igniteui-grid-lite) | MIT | `npm install igniteui-grid-lite` | Lightweight data grid for simpler tabular data |
-| [`igniteui-dockmanager`](https://www.npmjs.com/package/igniteui-dockmanager) | Commercial | `npm install igniteui-dockmanager` (trial) | Windowing / docking layouts (IDE-style panels) |
-| [`@infragistics/igniteui-dockmanager`](https://packages.infragistics.com/feeds/js-licensed/@infragistics/igniteui-dockmanager) | Commercial | `npm install @infragistics/igniteui-dockmanager` (licensed) | Windowing / docking layouts (IDE-style panels) |
-| [`igniteui-webcomponents-charts`](https://www.npmjs.com/package/igniteui-webcomponents-charts) | Commercial | `npm install igniteui-webcomponents-core igniteui-webcomponents-charts` (trial) | Charts and data visualizations (65+ chart types) |
-| [`@infragistics/igniteui-webcomponents-charts`](https://packages.infragistics.com/feeds/js-licensed/@infragistics/igniteui-webcomponents-charts) | Commercial | `npm install @infragistics/igniteui-webcomponents-core @infragistics/igniteui-webcomponents-charts` (licensed) | Charts and data visualizations (65+ chart types) |
-
----
-
-## Package Routing
-
-| Component family | Package |
-|---|---|
-| General UI components | `igniteui-webcomponents` |
-| Advanced grids | `igniteui-webcomponents-grids` (trial) `@infragistics/igniteui-webcomponents-grids` (licensed) |
-| Grid Lite | `igniteui-grid-lite` |
-| Dock Manager | `igniteui-dockmanager` (trial) `@infragistics/igniteui-dockmanager` (licensed) |
-| Charts | `igniteui-webcomponents-charts` (trial) `@infragistics/igniteui-webcomponents-charts` (licensed) |
+| General UI components | MIT | `npm install igniteui-webcomponents` | (same) |
+| Advanced grids | Commercial | `npm install igniteui-webcomponents-grids` | `npm install @infragistics/igniteui-webcomponents-grids` |
+| Grid Lite | MIT | `npm install igniteui-grid-lite` | (same) |
+| Dock Manager | Commercial | `npm install igniteui-dockmanager` | `npm install @infragistics/igniteui-dockmanager` |
+| Charts | Commercial | `npm install igniteui-webcomponents-core igniteui-webcomponents-charts` | `npm install @infragistics/igniteui-webcomponents-core @infragistics/igniteui-webcomponents-charts` |
 
 If the request only says "grid", choose by features:
 
-- Advanced features such as editing, paging, summaries, grouping, hierarchical data, or pivot behavior -> `igniteui-webcomponents-grids`
-- Lightweight table -> `igniteui-grid-lite`
+- Advanced features (editing, paging, summaries, grouping, hierarchical data, pivot) → `igniteui-webcomponents-grids`
+- Lightweight table → `igniteui-grid-lite`
 
 ## Component Catalogue by UI Pattern
 
-Use the table below to map a UI need to the right component, then follow the documentation link.
+> **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.
+>
+> ```
+> list_components({ framework: "webcomponents", filter: "<keyword>" })
+> 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`.
 
 ### Inputs & Forms
 
 All inputs are form-associated and integrate natively with `<form>`.
 
-| UI Need | Component | Tag | Docs |
-|---|---|---|---|
-| Text field / text input | Input | `<igc-input>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input) |
-| Multi-line text | Textarea | `<igc-textarea>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/text-area) |
-| Checkbox | Checkbox | `<igc-checkbox>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/checkbox) |
-| On/off toggle | Switch | `<igc-switch>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/switch) |
-| Single choice from a list | Radio / Radio Group | `<igc-radio>` / `<igc-radio-group>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/radio) |
-| Star / score rating | Rating | `<igc-rating>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/rating) |
-| Formatted / masked text input | Mask Input | `<igc-mask-input>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/mask-input) |
-| Date and time input | Date Time Input | `<igc-date-time-input>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/date-time-input) |
-| File upload | File Input | `<igc-file-input>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/file-input) |
-| Simple dropdown / select | Select | `<igc-select>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/select) |
-| Searchable dropdown, single or multi-select | Combo | `<igc-combo>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/combo/overview) |
-| Grouped toggle buttons | Button Group | `<igc-button-group>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/button-group) |
-| Range / numeric slider | Slider | `<igc-slider>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/slider) |
-| Range slider (two handles) | Range Slider | `<igc-range-slider>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/slider) |
+| UI Need | Component | Tag |
+|---|---|---|
+| Text field / text input | Input | `<igc-input>` |
+| Multi-line text | Textarea | `<igc-textarea>` |
+| Checkbox | Checkbox | `<igc-checkbox>` |
+| On/off toggle | Switch | `<igc-switch>` |
+| Single choice from a list | Radio / Radio Group | `<igc-radio>` / `<igc-radio-group>` |
+| Star / score rating | Rating | `<igc-rating>` |
+| Formatted / masked text input | Mask Input | `<igc-mask-input>` |
+| Date and time input | Date Time Input | `<igc-date-time-input>` |
+| File upload | File Input | `<igc-file-input>` |
+| Simple dropdown / select | Select | `<igc-select>` |
+| Searchable dropdown, single or multi-select | Combo | `<igc-combo>` |
+| Grouped toggle buttons | Button Group | `<igc-button-group>` |
+| Range / numeric slider | Slider | `<igc-slider>` |
+| Range slider (two handles) | Range Slider | `<igc-range-slider>` |
 
 ### Buttons & Actions
 
-| UI Need | Component | Tag | Docs |
-|---|---|---|---|
-| Standard clickable button | Button | `<igc-button>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/button) |
-| Icon-only button | Icon Button | `<igc-icon-button>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/icon-button) |
-| Click ripple effect | Ripple | `<igc-ripple>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/ripple) |
-| Removable tag / filter chip | Chip | `<igc-chip>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/chip) |
+| UI Need | Component | Tag |
+|---|---|---|
+| Standard clickable button | Button | `<igc-button>` |
+| Icon-only button | Icon Button | `<igc-icon-button>` |
+| Click ripple effect | Ripple | `<igc-ripple>` |
+| Removable tag / filter chip | Chip | `<igc-chip>` |
 
 ### Scheduling & Date Pickers
 
-| UI Need | Component | Tag | Docs |
-|---|---|---|---|
-| Full calendar view | Calendar | `<igc-calendar>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/calendar) |
-| Date picker (popup calendar) | Date Picker | `<igc-date-picker>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/date-picker) |
-| Date range selection | Date Range Picker | `<igc-date-range-picker>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/date-range-picker) |
+| UI Need | Component | Tag |
+|---|---|---|
+| Full calendar view | Calendar | `<igc-calendar>` |
+| Date picker (popup calendar) | Date Picker | `<igc-date-picker>` |
+| Date range selection | Date Range Picker | `<igc-date-range-picker>` |
 
 ### Notifications & Feedback
 
-| UI Need | Component | Tag | Docs |
-|---|---|---|---|
-| Brief auto-dismiss notification | Toast | `<igc-toast>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/toast) |
-| Actionable dismissible notification bar | Snackbar | `<igc-snackbar>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/snackbar) |
-| Persistent status banner (e.g. warning, error) | Banner | `<igc-banner>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/banner) |
-| Modal confirmation or content dialog | Dialog | `<igc-dialog>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/dialog) |
-| Tooltip on hover | Tooltip | `<igc-tooltip>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/tooltip) |
-| Small count / status indicator | Badge | `<igc-badge>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/badge) |
+| UI Need | Component | Tag |
+|---|---|---|
+| Brief auto-dismiss notification | Toast | `<igc-toast>` |
+| Actionable dismissible notification bar | Snackbar | `<igc-snackbar>` |
+| Persistent status banner (e.g. warning, error) | Banner | `<igc-banner>` |
+| Modal confirmation or content dialog | Dialog | `<igc-dialog>` |
+| Tooltip on hover | Tooltip | `<igc-tooltip>` |
+| Small count / status indicator | Badge | `<igc-badge>` |
 
 ### Progress Indicators
 
-| UI Need | Component | Tag | Docs |
-|---|---|---|---|
-| Horizontal progress bar | Linear Progress | `<igc-linear-progress>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/linear-progress) |
-| Circular / spinner progress | Circular Progress | `<igc-circular-progress>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/circular-progress) |
+| UI Need | Component | Tag |
+|---|---|---|
+| Horizontal progress bar | Linear Progress | `<igc-linear-progress>` |
+| Circular / spinner progress | Circular Progress | `<igc-circular-progress>` |
 
 ### Layouts & Containers
 
-| UI Need | Component | Tag | Docs |
-|---|---|---|---|
-| Generic content card | Card | `<igc-card>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/card) |
-| User avatar / profile image | Avatar | `<igc-avatar>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/avatar) |
-| Icon display | Icon | `<igc-icon>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/icon) |
-| Horizontal or vertical divider line | Divider | `<igc-divider>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/divider) |
-| Collapsible section | Expansion Panel | `<igc-expansion-panel>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/expansion-panel) |
-| Multiple collapsible sections (accordion) | Accordion | `<igc-accordion>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/accordion) |
-| Tabbed content panels | Tabs | `<igc-tabs>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tabs) |
-| Image / content slideshow | Carousel | `<igc-carousel>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/carousel) |
-| Multi-step wizard / onboarding flow | Stepper | `<igc-stepper>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/stepper) |
-| Resizable, draggable dashboard tiles | Tile Manager | `<igc-tile-manager>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tile-manager) |
-| IDE-style docking / floating panels | Dock Manager | `<igc-dockmanager>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/dock-manager) |
+| UI Need | Component | Tag |
+|---|---|---|
+| Generic content card | Card | `<igc-card>` |
+| User avatar / profile image | Avatar | `<igc-avatar>` |
+| Icon display | Icon | `<igc-icon>` |
+| Horizontal or vertical divider line | Divider | `<igc-divider>` |
+| Collapsible section | Expansion Panel | `<igc-expansion-panel>` |
+| Multiple collapsible sections (accordion) | Accordion | `<igc-accordion>` |
+| Tabbed content panels | Tabs | `<igc-tabs>` |
+| Image / content slideshow | Carousel | `<igc-carousel>` |
+| Multi-step wizard / onboarding flow | Stepper | `<igc-stepper>` |
+| Resizable, draggable dashboard tiles | Tile Manager | `<igc-tile-manager>` |
+| IDE-style docking / floating panels | Dock Manager | `<igc-dockmanager>` |
 
 ### Navigation
 
-| UI Need | Component | Tag | Docs |
-|---|---|---|---|
-| Top application bar / toolbar | Navbar | `<igc-navbar>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/menus/navbar) |
-| Side navigation drawer | Navigation Drawer | `<igc-nav-drawer>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/menus/navigation-drawer) |
-| Context menu / actions dropdown | Drop Down | `<igc-dropdown>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/dropdown) |
+| UI Need | Component | Tag |
+|---|---|---|
+| Top application bar / toolbar | Navbar | `<igc-navbar>` |
+| Side navigation drawer | Navigation Drawer | `<igc-nav-drawer>` |
+| Context menu / actions dropdown | Drop Down | `<igc-dropdown>` |
 
 ### Lists & Data Display
 
-| UI Need | Component | Tag | Docs |
-|---|---|---|---|
-| Simple scrollable list | List | `<igc-list>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/list) |
-| Hierarchical / tree data | Tree | `<igc-tree>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/tree) |
-| Tabular data (MIT, lightweight) | Grid Lite | `<igc-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grid-lite/overview) |
-| Full-featured tabular data grid | Data Grid | `<igc-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/grid/overview) |
-| Nested / master-detail grid | Hierarchical Grid | `<igc-hierarchical-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/hierarchical-grid/overview) |
-| Parent-child relational tree grid | Tree Grid | `<igc-tree-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/tree-grid/overview) |
-| Cross-tabulation / BI pivot table | Pivot Grid | `<igc-pivot-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/pivot-grid/overview) |
+| UI Need | Component | Tag |
+|---|---|---|
+| Simple scrollable list | List | `<igc-list>` |
+| Hierarchical / tree data | Tree | `<igc-tree>` |
+| Tabular data (MIT, lightweight) | Grid Lite | `<igc-grid>` |
+| Full-featured tabular data grid | Data Grid | `<igc-grid>` |
+| Nested / master-detail grid | Hierarchical Grid | `<igc-hierarchical-grid>` |
+| Parent-child relational tree grid | Tree Grid | `<igc-tree-grid>` |
+| Cross-tabulation / BI pivot table | Pivot Grid | `<igc-pivot-grid>` |
 
 ### Charting & Visualization
 
 > 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.
 
-| UI Need | Component | Tag | Docs |
-|---|---|---|---|
-| Column chart (vertical bars, category comparison) | Category Chart | `<igc-category-chart>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/types/column-chart) |
-| Line chart (continuous data over time) | Category Chart | `<igc-category-chart>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/types/line-chart) |
-| Area chart (filled line, change over time) | Category Chart | `<igc-category-chart>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/types/area-chart) |
-| Spline chart (smooth curved lines) | Category Chart | `<igc-category-chart>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/types/spline-chart) |
-| Step chart (stepped line or area) | Category Chart | `<igc-category-chart>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/types/step-chart) |
-| Pie chart (part-to-whole, small data sets) | Pie Chart | `<igc-pie-chart>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/types/pie-chart) |
-| Doughnut chart (part-to-whole with center label) | Doughnut Chart | `<igc-doughnut-chart>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/types/donut-chart) |
-| Financial / stock chart (OHLC, candlestick, price series) | Financial Chart | `<igc-financial-chart>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/types/stock-chart) |
-| Bar chart (horizontal bars, category comparison) | Data Chart | `<igc-data-chart>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/types/bar-chart) |
-| Scatter chart (X/Y data correlation) | Data Chart | `<igc-data-chart>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/types/scatter-chart) |
-| Bubble chart (3-value scatter with size dimension) | Data Chart | `<igc-data-chart>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/types/bubble-chart) |
-| Polar chart (angle/radius coordinate system) | Data Chart | `<igc-data-chart>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/types/polar-chart) |
-| Composite / combo chart (mixed series types) | Data Chart | `<igc-data-chart>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/types/composite-chart) |
-| Shape chart (polygons / polylines on a Cartesian plane) | Data Chart | `<igc-data-chart>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/types/shape-chart) |
-| Sparkline (word-sized inline mini-chart) | Sparkline | `<igc-sparkline>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/types/sparkline-chart) |
-| Treemap (hierarchical data as proportional nested nodes) | Treemap | `<igc-treemap>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/types/treemap-chart) |
-
+| UI Need | Component | Tag |
+|---|---|---|
+| Column / Line / Area / Spline / Step charts | Category Chart | `<igc-category-chart>` |
+| Pie chart | Pie Chart | `<igc-pie-chart>` |
+| Doughnut chart | Doughnut Chart | `<igc-doughnut-chart>` |
+| Financial / stock chart (OHLC, candlestick) | Financial Chart | `<igc-financial-chart>` |
+| Bar / Scatter / Bubble / Polar / Composite charts | Data Chart | `<igc-data-chart>` |
+| Sparkline (inline mini-chart) | Sparkline | `<igc-sparkline>` |
+| Treemap | Treemap | `<igc-treemap>` |
 
 ### Conversational / AI
 
-| UI Need | Component | Tag | Docs |
-|---|---|---|---|
-| Chat / AI assistant message thread | Chat | `<igc-chat>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/interactivity/chat) |
+| UI Need | Component | Tag |
+|---|---|---|
+| Chat / AI assistant message thread | Chat | `<igc-chat>` |
 
 ---
 
@@ -262,15 +246,26 @@ Confirm which package provides the component:
 - **Docking layout** → `igniteui-dockmanager` *(commercial)*
 - **Charts & visualizations** (Category Chart, Data Chart, Financial Chart, Pie Chart, Sparkline, Treemap, etc.) → `igniteui-webcomponents-charts` *(commercial)*
 
-### Step 4 — Link to official resources
+### Step 4 — Look up component documentation
+
+These tools serve different data sources — call the right one to avoid guessing:
 
-Always direct the user to the official documentation linked in the tables above. Key entry points:
+- **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`:
+  ```
+  get_doc({ framework: "webcomponents", name: "<doc-name>" })
+  ```
 
-- **Component overview**: [Ignite UI Web Components Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started)
-- **Live Storybook demos**: [https://igniteui.github.io/igniteui-webcomponents](https://igniteui.github.io/igniteui-webcomponents)
-- **npm package**: [https://www.npmjs.com/package/igniteui-webcomponents](https://www.npmjs.com/package/igniteui-webcomponents)
-- **GitHub repository**: [https://github.com/IgniteUI/igniteui-webcomponents](https://github.com/IgniteUI/igniteui-webcomponents)
-- **Changelog / releases**: [https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md)
+- **Full property/method/event API** → `get_api_reference` serves **class-level reflection data** (every `@property`, method signature, event name with types). It does NOT overlap with `get_doc` — the topic page rarely lists all properties. Use `search_api` first when you don't know the exact class name (e.g. `IgcCarouselComponent`):
+  ```
+  search_api({ platform: "webcomponents", query: "<component keyword>" })
+  get_api_reference({ platform: "webcomponents", component: "<ClassName>" })
+  ```
+
+For feature-based questions (e.g., "how does combo filtering work"), use `search_docs` instead:
+
+```
+search_docs({ framework: "webcomponents", query: "<feature keyword>" })
+```
 
 ### Step 5 — Provide a starter code snippet
 
@@ -282,46 +277,20 @@ import {
   IgcNavbarComponent,
   IgcNavDrawerComponent,
   IgcCardComponent,
-  IgcIconComponent,
   IgcButtonComponent,
-  registerIconFromText,
 } from 'igniteui-webcomponents';
 
-defineComponents(
-  IgcNavbarComponent,
-  IgcNavDrawerComponent,
-  IgcCardComponent,
-  IgcIconComponent,
-  IgcButtonComponent
-);
-
-registerIconFromText('menu', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>', 'material');
-registerIconFromText('home', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>', 'material');
-registerIconFromText('build', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>', 'material');
+defineComponents(IgcNavbarComponent, IgcNavDrawerComponent, IgcCardComponent, IgcButtonComponent);
 ```
 
 ```html
-<igc-navbar>
-  <igc-icon name="menu" collection="material" slot="start"></igc-icon>
-  <h1>My Dashboard</h1>
-</igc-navbar>
-
+<igc-navbar><h1>My Dashboard</h1></igc-navbar>
 <igc-nav-drawer>
-  <igc-nav-drawer-item>
-    <igc-icon name="home" collection="material" slot="icon"></igc-icon>
-    <span slot="content">Home</span>
-  </igc-nav-drawer-item>
-  <igc-nav-drawer-item>
-    <igc-icon name="build" collection="material" slot="icon"></igc-icon>
-    <span slot="content">Settings</span>
-  </igc-nav-drawer-item>
+  <igc-nav-drawer-item><span slot="content">Home</span></igc-nav-drawer-item>
 </igc-nav-drawer>
-
 <igc-card>
-  <igc-card-header>
-    <h3 slot="title">Summary</h3>
-  </igc-card-header>
-  <igc-card-content>Dashboard content here</igc-card-content>
+  <igc-card-header><h3 slot="title">Summary</h3></igc-card-header>
+  <igc-card-content>Content goes here</igc-card-content>
 </igc-card>
 ```
 
@@ -334,7 +303,6 @@ registerIconFromText('build', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="
 - `<igc-checkbox>` — "Remember me"
 - `<igc-button>` — submit
 - `<igc-snackbar>` — error/success feedback
-- **Docs**: [Input](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input) · [Button](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/button) · [Snackbar](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/snackbar)
 
 ### User Profile / Settings Page
 - `<igc-avatar>` — profile picture
@@ -343,7 +311,6 @@ registerIconFromText('build', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="
 - `<igc-switch>` — feature toggles
 - `<igc-select>` — preference dropdowns
 - `<igc-button>` — save/cancel actions
-- **Docs**: [Avatar](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/avatar) · [Tabs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tabs) · [Switch](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/switch)
 
 ### Data Table / Admin List View
 - `<igc-input>` — search bar
@@ -352,7 +319,6 @@ registerIconFromText('build', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="
 - `<igc-button>` / `<igc-icon-button>` — actions
 - `<igc-dialog>` — confirm delete modal
 - `<igc-badge>` — status indicators
-- **Docs**: [Grid Lite](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grid-lite/overview) · [Data Grid](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/grid/overview) · [Dialog](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/dialog)
 
 ### Booking / Reservation Form
 - `<igc-date-range-picker>` — check-in / check-out
@@ -361,7 +327,6 @@ registerIconFromText('build', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="
 - `<igc-stepper>` — multi-step booking flow
 - `<igc-button>` — next / confirm
 - `<igc-toast>` — booking confirmation
-- **Docs**: [Date Range Picker](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/date-range-picker) · [Stepper](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/stepper)
 
 ### Analytics / Reporting Dashboard
 - `<igc-navbar>` — top bar
@@ -370,7 +335,6 @@ registerIconFromText('build', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="
 - `<igc-tabs>` or `<igc-tile-manager>` — section layout
 - Data Grid or Pivot Grid — detailed data tables
 - `<igc-linear-progress>` / `<igc-circular-progress>` — loading states
-- **Docs**: [Tile Manager](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tile-manager) · [Pivot Grid](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/pivot-grid/overview)
 
 ### Notification / Activity Feed
 - `<igc-list>` — activity items
@@ -378,7 +342,6 @@ registerIconFromText('build', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="
 - `<igc-badge>` — unread count
 - `<igc-snackbar>` — real-time alerts
 - `<igc-chip>` — filter tags (All, Mentions, Replies)
-- **Docs**: [List](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/list) · [Badge](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/badge) · [Chip](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/chip)
 
 ### AI / Chatbot Interface
 - `<igc-chat>` — full chat UI with message threading
@@ -386,7 +349,6 @@ registerIconFromText('build', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="
 - `<igc-icon-button>` — send button
 - `<igc-avatar>` — bot and user avatars
 - `<igc-circular-progress>` — "thinking" indicator
-- **Docs**: [Chat](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/interactivity/chat) · [Avatar](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/avatar)
 
 ---
 
@@ -394,7 +356,7 @@ registerIconFromText('build', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="
 
 ### "I can't find a component for X"
 
-1. Check the [full component list](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started) in the official docs
+1. Call `list_components({ framework: "webcomponents" })` or use `search_docs` with a feature keyword to find the best match
 2. Consider composing two simpler components (e.g., `<igc-card>` + `<igc-list>` for a list card)
 
 ### "Which grid should I use?"