fix(skills): correct API inaccuracies across skills

skills/igniteui-react-components/reference/CHARTS-GRIDS.md

@@ -374,7 +374,7 @@ const currencyTemplate = (ctx: IgrCellContext<Order>) => (
 );
 
 const dateTemplate = (ctx: IgrCellContext<Order>) => (
-  <span>${(ctx.value as Date).toLocaleDateString()}</span>
+  <span>{(ctx.value as Date).toLocaleDateString()}</span>
 );
 
 const statusTemplate = (ctx: IgrCellContext<Order>) => {

skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md

@@ -57,7 +57,7 @@ Use the tables below to map a UI need to the right React component. All componen
 | 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 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
@@ -109,7 +109,7 @@ Use the tables below to map a UI need to the right React component. All componen
 | 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 | `IgrDataGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/grid/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) |
@@ -156,8 +156,8 @@ Use the **Component Catalogue** tables above to find matching components. When i
 | Simple static list | `IgrList` | Data Grid |
 | Basic dropdown | `IgrSelect` | `IgrCombo` |
 | Searchable or multi-select dropdown | `IgrCombo` | `IgrSelect` |
-| Tabular data with basic display | `IgrGridLite` (grid-lite) | `IgrDataGrid` (commercial) |
-| Tabular data, advanced features needed | `IgrDataGrid` | `IgrGridLite` (grid-lite) |
+| Tabular data with basic display | `IgrGridLite` (grid-lite) | `IgrGrid` (commercial) |
+| Tabular data, advanced features needed | `IgrGrid` | `IgrGridLite` (grid-lite) |
 | Single dismissible message | `IgrToast` | `IgrSnackbar` |
 | Message requiring user action | `IgrSnackbar` | `IgrToast` |
 | Collapsible single section | `IgrExpansionPanel` | `IgrAccordion` |
@@ -249,7 +249,7 @@ function Dashboard() {
 
 - `IgrInput` — search bar
 - `IgrCombo` — filter dropdowns
-- `IgrGridLite` (grid-lite) or `IgrDataGrid` — tabular data
+- `IgrGridLite` (grid-lite) or `IgrGrid` — tabular data
 - `IgrButton` / `IgrIconButton` — actions
 - `IgrDialog` — confirm delete modal
 - `IgrBadge` — status indicators
@@ -269,7 +269,7 @@ function Dashboard() {
 - `IgrNavDrawer` — side navigation
 - `IgrCard` — KPI summary cards
 - `IgrTabs` or `IgrTileManager` — section layout
-- `IgrDataGrid` or `IgrPivotGrid` — detailed data tables
+- `IgrGrid` or `IgrPivotGrid` — detailed data tables
 - `IgrCategoryChart` — charts (from `igniteui-react-charts`)
 - `IgrLinearProgress` / `IgrCircularProgress` — loading indicators
 

skills/igniteui-react-components/reference/EVENT-HANDLING.md

@@ -50,7 +50,7 @@ function MyForm() {
 | `IgrDialog` | `onClosed` | Dialog has closed |
 | `IgrTabs` | `onChange` | Active tab changes |
 | `IgrCalendar` | `onChange` | Selected date changes |
-| `IgrDatepicker` | `onChange` | Selected date changes |
+| `IgrDatePicker` | `onChange` | Selected date changes |
 
 ## TypeScript Event Types
 

skills/igniteui-react-components/reference/JSX-PATTERNS.md

@@ -51,6 +51,7 @@ Ignite UI components use the web component **slot** mechanism under the hood. In
 Some components like the Data Grid support **render props** for custom cell rendering:
 
 ```tsx
+import { IgrBadge } from 'igniteui-react';
 import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
 
 function UserGrid({ users }: { users: User[] }) {
@@ -152,10 +153,9 @@ function MainLayout() {
   const location = useLocation();
 
   const handleTabChange = (e: CustomEvent) => {
-    const selectedIndex = (e.target as any).selectedIndex;
-    if (selectedIndex !== undefined && tabs[selectedIndex]) {
-      navigate(tabs[selectedIndex].path);
-    }
+    const selectedLabel = (e.detail as any).label as string;
+    const tab = tabs.find(t => t.label === selectedLabel);
+    if (tab) navigate(tab.path);
   };
 
   return (

skills/igniteui-react-components/reference/REFS-FORMS.md

@@ -57,7 +57,7 @@ import { IgrInput, IgrSelect, IgrSelectItem, IgrButton } from 'igniteui-react';
 function SimpleForm() {
   const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     // e.preventDefault(); // optionally prevent default submit for custom handling
-    const formData = new FormData(e.target);
+    const formData = new FormData(e.currentTarget);
     console.log(formData.get('name'));       // input value
     console.log(formData.get('role'));       // selected option value
   };
@@ -84,7 +84,7 @@ Wire up Ignite UI form components with React state for controlled behavior:
 
 ```tsx
 import { useState } from 'react';
-import { IgrInput, IgrCheckbox, IgrSelect, IgrSelectItem } from 'igniteui-react';
+import { IgrInput, IgrCheckbox, IgrSelect, IgrSelectItem, IgrCheckboxChangeEventArgsDetail } from 'igniteui-react';
 
 function ProfileForm() {
   const [name, setName] = useState('');
@@ -101,7 +101,7 @@ function ProfileForm() {
 
       <IgrCheckbox
         checked={newsletter}
-        onChange={(e: CustomEvent<IgcCheckboxChangeEventArgs>) =>
+        onChange={(e: CustomEvent<IgrCheckboxChangeEventArgsDetail>) =>
           setNewsletter(e.detail.checked)
         }
       >
@@ -111,7 +111,7 @@ function ProfileForm() {
       <IgrSelect
         label="Role"
         value={role}
-        onChange={(e: CustomEvent<IgcSelectItemComponent>) =>
+        onChange={(e: CustomEvent<IgrSelectItem>) =>
           setRole(e.detail.value)
         }
       >
@@ -130,7 +130,7 @@ Ignite UI components are form-associated web components. You can integrate them
 
 ```tsx
 import { useForm, Controller } from 'react-hook-form';
-import { IgrInput, IgrCheckbox, IgrButton } from 'igniteui-react';
+import { IgrInput, IgrCheckbox, IgrButton, IgrCheckboxChangeEventArgsDetail } from 'igniteui-react';
 
 interface FormData {
   email: string;
@@ -172,7 +172,7 @@ function SignUpForm() {
         render={({ field }) => (
           <IgrCheckbox
             checked={field.value || false}
-            onChange={(e: CustomEvent<IgcCheckboxChangeEventArgs>) =>
+            onChange={(e: CustomEvent<IgrCheckboxChangeEventArgsDetail>) =>
               field.onChange(e.detail.checked)
             }
           >

skills/igniteui-react-generate-from-image-design/reference/component-mapping.md

@@ -39,10 +39,10 @@ Component decision matrix (by visual pattern, domain-neutral):
 | 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 |
+| 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 |
+| 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
@@ -68,7 +68,7 @@ Decision rule:
 | UI Pattern | Ignite UI Component | Key Properties |
 |---|---|---|
 | Item list | `IgrList` | slot-based row content, selection, and dense list styling |
-| User avatar | `IgrAvatar` | `initials`, `shape`, `size` |
+| 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` |
@@ -91,7 +91,7 @@ Decision rule:
 | 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 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` |