fix(skills): correct references in skills (#17294) (#17298)

* fix(skills): correct references in skills

* chore(*): address PR comments

* fix(skills): reducing the charts skill significantly

* fix(skills): add sparkline type in chart ref

* fix(skills): removing online docs reference in favour of MCP and adding autocomplete

---------

Co-authored-by: Ivaylo Barakov <ibarakov@icloud.com>

Author: kdinev

skills/igniteui-angular-components/SKILL.md

@@ -52,7 +52,7 @@ Base your code and explanation exclusively on what you read. If the reference fi
 | Task | Reference file to read |
 |---|---|
 | App setup, `app.config.ts` providers, `provideAnimations()`, entry-point imports, convenience directive arrays | [`references/setup.md`](./references/setup.md) |
-| Input Group, Combo, Simple Combo, Select, Date Picker, Date Range Picker, Time Picker, Calendar, Checkbox, Radio, Switch, Slider, reactive/template-driven forms | [`references/form-controls.md`](./references/form-controls.md) |
+| Input Group, Combo, Simple Combo, Select, Date Picker, Date Range Picker, Time Picker, Calendar, Checkbox, Radio, Switch, Slider, Autocomplete, reactive/template-driven forms | [`references/form-controls.md`](./references/form-controls.md) |
 | Tabs, Bottom Navigation, Stepper, Accordion, Expansion Panel, Splitter, Navigation Drawer | [`references/layout.md`](./references/layout.md) |
 | List, Tree, Card, Chips, Avatar, Badge, Icon, Carousel, Paginator, Progress Indicators, Chat | [`references/data-display.md`](./references/data-display.md) |
 | Dialog, Snackbar, Toast, Banner | [`references/feedback.md`](./references/feedback.md) |

skills/igniteui-angular-components/references/charts.md

@@ -21,8 +21,6 @@ This reference gives high-level guidance on when to use each data display compon
 
 ## List
 
-> **Docs:** [List Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/list)
-
 ```typescript
 import { IGX_LIST_DIRECTIVES } from 'igniteui-angular/list';
 import { IgxAvatarComponent } from 'igniteui-angular/avatar';
@@ -35,9 +33,8 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
   @for (contact of contacts; track contact.id) {
     <igx-list-item>
       <igx-avatar igxListThumbnail [src]="contact.avatar" shape="circle"></igx-avatar>
-      <span igxListLine>{{ contact.name }}</span>
+      <span igxListLineTitle>{{ contact.name }}</span>
       <span igxListLineSubTitle>{{ contact.phone }}</span>
-      <span igxListLineTitle>{{ contact.email }}</span>
       <igx-icon igxListAction (click)="call(contact)">phone</igx-icon>
     </igx-list-item>
   }
@@ -48,14 +45,12 @@ Auxiliary directives for list items: `igxListThumbnail`, `igxListAction`, `igxLi
 
 ## Tree
 
-> **Docs:** [Tree Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tree)
-
 ```typescript
 import { IGX_TREE_DIRECTIVES } from 'igniteui-angular/tree';
 ```
 
 ```html
-<igx-tree [selection]="'BiCascade'" (nodeSelection)="onNodeSelect($event)">
+<igx-tree selection="BiState" (nodeSelection)="onNodeSelect($event)">
   @for (node of treeData; track node.id) {
     <igx-tree-node [data]="node" [expanded]="node.expanded">
       <igx-icon>folder</igx-icon>
@@ -71,14 +66,12 @@ import { IGX_TREE_DIRECTIVES } from 'igniteui-angular/tree';
 </igx-tree>
 ```
 
-Selection modes: `'None'`, `'BiCascade'`, `'Cascade'`.
+Selection modes: `'None'`, `'BiState'`, `'Cascading'`.
 
 ## Card
 
-> **Docs:** [Card Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/card)
-
 ```typescript
-import { IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective, IgxCardActionsComponent, IgxCardMediaDirective, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardHeaderThumbnailDirective } from 'igniteui-angular/card';
+import { IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective, IgxCardActionsComponent, IgxCardMediaDirective, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardThumbnailDirective } from 'igniteui-angular/card';
 import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives';
 import { IgxRippleDirective } from 'igniteui-angular/directives';
@@ -91,7 +84,8 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
     <img [src]="article.coverImage" />
   </igx-card-media>
   <igx-card-header>
-    <igx-avatar igxCardHeaderThumbnail [src]="author.photo" shape="circle"></igx-avatar>
+    <!-- igx-avatar inside igx-card-header is auto-detected as thumbnail -->
+    <igx-avatar [src]="author.photo" shape="circle"></igx-avatar>
     <h3 igxCardHeaderTitle>{{ article.title }}</h3>
     <h5 igxCardHeaderSubtitle>{{ author.name }}</h5>
   </igx-card-header>
@@ -109,8 +103,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
 
 ## Chips
 
-> **Docs:** [Chip Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/chip)
-
 ```typescript
 import { IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips';
 ```
@@ -127,8 +119,6 @@ import { IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'
 
 ## Avatar & Badge
 
-> **Docs:** [Avatar](https://www.infragistics.com/products/ignite-ui-angular/angular/components/avatar) · [Badge](https://www.infragistics.com/products/ignite-ui-angular/angular/components/badge)
-
 ```typescript
 import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 import { IgxBadgeComponent } from 'igniteui-angular/badge';
@@ -171,8 +161,6 @@ Badge types: `'primary'`, `'info'`, `'success'`, `'warning'`, `'error'`.
 
 ## Icon
 
-> **Docs:** [Icon Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/icon)
-
 ```typescript
 import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon';
 ```
@@ -202,8 +190,6 @@ export class AppComponent {
 
 ## Carousel
 
-> **Docs:** [Carousel Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/carousel)
-
 ```typescript
 import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel';
 ```
@@ -223,8 +209,6 @@ import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carous
 
 ## Paginator
 
-> **Docs:** [Paginator Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/paginator)
-
 ```typescript
 import { IgxPaginatorComponent } from 'igniteui-angular/paginator';
 ```
@@ -243,8 +227,6 @@ import { IgxPaginatorComponent } from 'igniteui-angular/paginator';
 
 ## Progress Indicators
 
-> **Docs:** [Linear Progress](https://www.infragistics.com/products/ignite-ui-angular/angular/components/linear-progress) · [Circular Progress](https://www.infragistics.com/products/ignite-ui-angular/angular/components/circular-progress)
-
 ```typescript
 import { IgxLinearProgressBarComponent } from 'igniteui-angular/progressbar';
 import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar';
@@ -268,12 +250,10 @@ import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar';
 <igx-circular-bar [indeterminate]="true"></igx-circular-bar>
 ```
 
-Types for linear bar: `'default'`, `'info'`, `'success'`, `'warning'`, `'danger'`.
+Types for linear bar: `'default'`, `'info'`, `'success'`, `'warning'`, `'error'`.
 
 ## Chat (AI Chat Component)
 
-> **Docs:** [Chat Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/chat)
-
 ```typescript
 import { IgxChatComponent } from 'igniteui-angular/chat';
 ```

skills/igniteui-angular-components/references/data-display.md

@@ -16,8 +16,6 @@ This reference gives high-level guidance on when to use each directive, their ke
 
 ## Button & Icon Button
 
-> **Docs:** [Button Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/button)
-
 ```typescript
 import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives';
 import { IgxIconComponent } from 'igniteui-angular/icon';
@@ -46,8 +44,6 @@ Button variants for `igxIconButton`: `'flat'`, `'outlined'`, `'contained'`.
 
 ## Button Group
 
-> **Docs:** [Button Group Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/buttongroup)
-
 ```typescript
 // Option A — convenience collection (includes IgxButtonGroupComponent + IgxButtonDirective)
 import { IGX_BUTTON_GROUP_DIRECTIVES } from 'igniteui-angular/button-group';
@@ -129,7 +125,7 @@ onDeselected(event: IButtonGroupEventArgs) {
 | `(selected)` | `IButtonGroupEventArgs` | A button is selected. |
 | `(deselected)` | `IButtonGroupEventArgs` | A button is deselected. |
 
-`IButtonGroupEventArgs`: `{ owner: IgxButtonGroupComponent; button: IgxButtonDirective; index: number }`, where `IgxButtonDirective` is imported from `igniteui-angular/directives` (see **Button & Icon Button** section above).
+`IButtonGroupEventArgs`: `{ owner: IgxButtonGroupComponent; button: IgxButtonDirective; index: number }`, where `IgxButtonGroupComponent` is from `igniteui-angular/button-group` and `IgxButtonDirective` is from `igniteui-angular/directives` (see **Button & Icon Button** section above).
 
 **Key inputs on each `<button igxButton>` child:**
 
@@ -161,8 +157,6 @@ getSelected()    { return this.buttonGroup().selectedButtons; }
 
 ## Ripple Effect
 
-> **Docs:** [Ripple Directive](https://www.infragistics.com/products/ignite-ui-angular/angular/components/ripple)
-
 ```typescript
 import { IgxRippleDirective } from 'igniteui-angular/directives';
 ```
@@ -181,34 +175,30 @@ Inputs: `[igxRipple]` (ripple color), `[igxRippleCentered]` (always start from c
 
 ## Tooltip
 
-> **Docs:** [Tooltip Directive](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tooltip)
-
 ```typescript
 import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives';
 ```
 
 ```html
-<button igxButton [igxTooltipTarget]="myTooltip" [igxTooltipTargetShowDelay]="500">
+<button igxButton [igxTooltipTarget]="myTooltip" [showDelay]="500">
   Hover or focus me
 </button>
 <div igxTooltip #myTooltip="tooltip">Helpful tooltip text</div>
 ```
 
-Inputs on `[igxTooltipTarget]`: `[igxTooltipTargetShowDelay]` (ms), `[igxTooltipTargetHideDelay]` (ms), `[tooltipDisabled]`.
+Inputs on `[igxTooltipTarget]`: `[showDelay]` (ms), `[hideDelay]` (ms), `[tooltipDisabled]`.
 
-Programmatic control:
+Programmatic control via the target directive:
 
 ```typescript
-tooltip = viewChild.required<IgxTooltipDirective>('myTooltip');
+tooltipTarget = viewChild.required(IgxTooltipTargetDirective);
 
-showTooltip() { this.tooltip().open(); }
-hideTooltip() { this.tooltip().close(); }
+show() { this.tooltipTarget().showTooltip(); }
+hide() { this.tooltipTarget().hideTooltip(); }
 ```
 
 ## Drag and Drop
 
-> **Docs:** [Drag and Drop](https://www.infragistics.com/products/ignite-ui-angular/angular/components/drag-drop)
-
 ```typescript
 import { IgxDragDirective, IgxDropDirective, IDragMoveEventArgs, IDropDroppedEventArgs } from 'igniteui-angular/directives';
 ```
@@ -217,13 +207,13 @@ import { IgxDragDirective, IgxDropDirective, IDragMoveEventArgs, IDropDroppedEve
 
 ```html
 <!-- Draggable source -->
-<div igxDrag [dragData]="item" (dragMove)="onDragMove($event)" (dragEnd)="onDragEnd($event)">
+<div [igxDrag]="item" (dragMove)="onDragMove($event)" (dragEnd)="onDragEnd($event)">
   <igx-icon>drag_indicator</igx-icon>
   {{ item.name }}
 </div>
 
 <!-- Drop target -->
-<div igxDrop (dropped)="onDrop($event)" (dragEnter)="onDragEnter($event)" (dragLeave)="onDragLeave($event)">
+<div igxDrop (dropped)="onDrop($event)" (enter)="onDragEnter($event)" (leave)="onDragLeave($event)">
   Drop here
 </div>
 ```
@@ -253,16 +243,16 @@ onDrop(event: IDropDroppedEventArgs) {
 ```html
 <igx-list>
   @for (item of items; track item.id) {
-    <igx-list-item igxDrag [dragData]="item" igxDrop (dropped)="reorder($event, item)">
+    <igx-list-item [igxDrag]="item" igxDrop (dropped)="reorder($event, item)">
       <igx-icon igxListAction>drag_handle</igx-icon>
       <span igxListLine>{{ item.name }}</span>
     </igx-list-item>
   }
 </igx-list>
 ```
 
-Key drag events: `(dragStart)`, `(dragMove)`, `(dragEnd)`, `(dragClick)`, `(transitioned)`.
-Key drop events: `(dragEnter)`, `(dragLeave)`, `(dragOver)`, `(dropped)`.
+Key drag events: `(dragStart)`, `(dragMove)`, `(dragEnd)`, `(dragClick)`, `(ghostCreate)`, `(ghostDestroy)`, `(transitioned)`.
+Key drop events: `(enter)`, `(leave)`, `(over)`, `(dropped)`.
 
 > **NOTE:** For touch-based drag, add `importProvidersFrom(HammerModule)` to `app.config.ts` providers.
 

skills/igniteui-angular-components/references/directives.md

@@ -18,8 +18,6 @@ This reference gives high-level guidance on when to use each feedback and overla
 
 ## Dialog
 
-> **Docs:** [Dialog Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dialog)
-
 ```typescript
 import { IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective } from 'igniteui-angular/dialog';
 import { IgxButtonDirective } from 'igniteui-angular/directives';
@@ -31,7 +29,6 @@ import { IgxButtonDirective } from 'igniteui-angular/directives';
   [isModal]="true"
   [closeOnEscape]="true"
   [closeOnOutsideSelect]="false"
-  title="Confirm Delete"
   (closed)="onDialogClosed()">
   <igx-dialog-title>Confirm Delete</igx-dialog-title>
   <p>Are you sure you want to delete this item? This action cannot be undone.</p>
@@ -57,10 +54,8 @@ Events: `(opening)`, `(opened)`, `(closing)`, `(closed)`, `(leftButtonSelect)`,
 
 ## Snackbar
 
-> **Docs:** [Snackbar Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/snackbar)
-
 ```typescript
-import { IgxSnackbarComponent, IgxSnackbarActionDirective } from 'igniteui-angular/snackbar';
+import { IgxSnackbarComponent } from 'igniteui-angular/snackbar';
 import { IgxButtonDirective } from 'igniteui-angular/directives';
 ```
 
@@ -69,9 +64,10 @@ import { IgxButtonDirective } from 'igniteui-angular/directives';
   #snackbar
   [displayTime]="3000"
   [autoHide]="true"
+  actionText="UNDO"
+  (clicked)="undo()"
   (animationDone)="onSnackbarDone()">
   Item saved successfully
-  <button igxButton="flat" igxSnackbarAction (click)="undo()">UNDO</button>
 </igx-snackbar>
 ```
 
@@ -88,8 +84,6 @@ save() {
 
 ## Toast
 
-> **Docs:** [Toast Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/toast)
-
 ```typescript
 import { IgxToastComponent } from 'igniteui-angular/toast';
 ```
@@ -104,8 +98,6 @@ Toast vs Snackbar: Toast is non-interactive (no action button), always auto-hide
 
 ## Banner
 
-> **Docs:** [Banner Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner)
-
 ```typescript
 import { IgxBannerComponent, IgxBannerActionsDirective } from 'igniteui-angular/banner';
 import { IgxIconComponent } from 'igniteui-angular/icon';
@@ -114,12 +106,12 @@ import { IgxButtonDirective } from 'igniteui-angular/directives';
 
 ```html
 <igx-banner #banner (closed)="onBannerClosed()">
-  <igx-icon igxBannerIcon>wifi_off</igx-icon>
+  <igx-icon>wifi_off</igx-icon>
   You are offline. Some features may not be available.
-  <div igxBannerActions>
-    <button igxButton="flat" (click)="banner.dismiss()">Dismiss</button>
+  <igx-banner-actions>
+    <button igxButton="flat" (click)="banner.close()">Dismiss</button>
     <button igxButton="flat" (click)="retry()">Retry</button>
-  </div>
+  </igx-banner-actions>
 </igx-banner>
 ```