IgniteUI · Marina-L-Stoyanova · Apr 22, 2026
diff --git a/.../cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/README.md b/.../cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/README.md
@@ -0,0 +1,89 @@
+# LLM Agent Skills for Ignite UI for React
+
+This directory contains skills for GitHub Copilot and other LLM agents to help developers use **Ignite UI for React** effectively in their applications.
+
+## What are Skills?
+
+Skills are structured instructions that help AI agents understand and execute common tasks consistently. Each skill is a self-contained guide that provides step-by-step instructions, code examples, and best practices — all specific to React and the `igniteui-react` family of packages.
+
+## Available Skills
+
+| Skill | Description | Use When |
+| --- | --- | --- |
+| [igniteui-react-components](./igniteui-react-components/SKILL.md) | Identify the right React components (`Igr*`) for a UI pattern, then install, import, and use them — JSX patterns, events, refs, forms | Choosing components or setting up and using them in React |
+| [igniteui-react-customize-theme](./igniteui-react-customize-theme/SKILL.md) | Customize styling using CSS custom properties, Sass, and the theming system in a React context | Applying custom brand colors/styles |
+| [igniteui-react-optimize-bundle-size](./igniteui-react-optimize-bundle-size/SKILL.md) | Reduce bundle size with granular imports, tree-shaking, and lazy loading | Optimizing production performance |
+
+## How to Use
+
+When working with an AI agent like GitHub Copilot, reference skills by name or ask questions naturally:
+
+### Natural Questions
+
+- "How do I add a data grid to my React app?"
+- "What Ignite UI component should I use for a date picker?"
+- "Help me customize the button colors to match my brand"
+- "My bundle size is too large, how can I reduce it?"
+- "How do I handle events on IgrCombo?"
+
+### Direct Skill Reference
+
+- "Follow the igniteui-react-components skill for setting up my project"
+- "Use the igniteui-react-customize-theme skill to help me style components"
+- "Apply the igniteui-react-optimize-bundle-size skill to reduce my bundle"
+
+## Skill Structure
+
+Each skill contains:
+
+- **Example Usage**: Common questions or scenarios
+- **When to Use**: Situations where the skill applies
+- **Related Skills**: Other relevant skills to explore
+- **Step-by-Step Instructions**: Detailed guidance with code examples
+- **Common Issues & Solutions**: Troubleshooting guidance
+- **Best Practices**: Recommended approaches
+- **Additional Resources**: Further reading and documentation
+
+## Editor / Agent Setup
+
+Most modern AI assistants (GitHub Copilot, Cursor, Windsurf, Claude Code, etc.) should auto-discover these skills from a specified location in the workspace or global profile.
+
+For example, you can copy them into the agent-specific skills folder for your editor:
+
+### GitHub Copilot
+
+Copy the skill files into your project's `.agents/skills/` directory:
+
+```
+.agents/
+  skills/
+    igniteui-react-components/
+      SKILL.md
+      reference/
+    igniteui-react-customize-theme/
+      SKILL.md
+      reference/
+    igniteui-react-optimize-bundle-size/
+      SKILL.md
+```
+
+### Claude Code
+
+Copy the skill files into your project's `.claude/skills/` directory:
+
+```
+.claude/
+  skills/
+    igniteui-react-components/
+      SKILL.md
+      reference/
+    igniteui-react-customize-theme/
+      SKILL.md
+      reference/
+    igniteui-react-optimize-bundle-size/
+      SKILL.md
+```
+
+### Other Agents (Cursor, Windsurf, etc.)
+
+Consult your agent's documentation for the correct skills directory path and copy the skill files there. The skill structure is agent-agnostic — any assistant that supports skill files can use them directly.
diff --git a/...ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/SKILL.md b/...ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/SKILL.md
@@ -8,6 +8,24 @@ user-invocable: true
 
 This skill covers everything from identifying the right component for a UI requirement to installing, setting up, and using Ignite UI for React components — including JSX patterns, event handling, refs, controlled/uncontrolled form components, and TypeScript.
 
+## Before You Answer
+
+- Do not guess package names or import paths from memory.
+- First identify the component family, then read the relevant reference files from the Content Guide below.
+- Check `package.json` and keep public or licensed package names consistent.
+- If the required package is not present in `package.json`, add or install the correct Ignite UI dependency first. Absence from `package.json` does not mean the package is invalid.
+
+### Package Routing
+
+| Component family | Install packages | Import from |
+|---|---|---|
+| Core UI components | `igniteui-react` | `igniteui-react` |
+| Advanced grids | `igniteui-react-grids` (trial) `@infragistics/igniteui-react-grids` (licensed) | `igniteui-react-grids` |
+| Grid Lite | `igniteui-react`, `igniteui-grid-lite` | `igniteui-react`, `igniteui-grid-lite` |
+| 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?"
@@ -54,14 +72,15 @@ This skill is organized into focused reference files. Load the appropriate file
 | Event Handling | [EVENT-HANDLING.md](./reference/EVENT-HANDLING.md) | Event props, CustomEvent types, common events |
 | Refs & Forms | [REFS-FORMS.md](./reference/REFS-FORMS.md) | useRef, controlled/uncontrolled forms, React Hook Form |
 | Charts, Gauges, Maps & Grid Lite | [CHARTS-GRIDS.md](./reference/CHARTS-GRIDS.md) | Module registration, container sizing |
-| Reveal SDK | [REVEAL-SDK.md](./reference/REVEAL-SDK.md) | Embedded BI dashboards, theme sync |
 | Troubleshooting | [TROUBLESHOOTING.md](./reference/TROUBLESHOOTING.md) | Common issues and solutions |
 
 ---
 
-## Quick Start
+## Quick Start (Core UI Example)
+
+This example uses the core UI package `igniteui-react`. For grids, Grid Lite, charts, gauges, and maps, use the package routing table above first.
 
-### 1. Install
+### 1. Install Core UI Package
 
 ```bash
 npm install igniteui-react
@@ -144,7 +163,7 @@ Use [COMPONENT-CATALOGUE.md](./reference/COMPONENT-CATALOGUE.md) to map any UI n
 
 ## Best Practices
 
-1. **Start with the MIT package** (`igniteui-react`) — it covers most common UI needs
+1. **Use the package routing table first**
 2. **Import theme CSS first** — components need it to render correctly
 3. **Register chart/gauge/map modules** — call `.register()` at module level
 4. **Wrap charts/gauges/maps in sized containers** — they need explicit dimensions

diff --git a/.../files/__dot__claude/skills/igniteui-react-components/reference/CHARTS-GRIDS.md b/.../files/__dot__claude/skills/igniteui-react-components/reference/CHARTS-GRIDS.md
@@ -20,6 +20,7 @@ IgrCategoryChartModule.register();
 | Component | Module Import | Registration |
 |---|---|---|
 | `IgrCategoryChart` | `IgrCategoryChartModule` | `IgrCategoryChartModule.register()` |
+| `IgrDataChart` | `IgrDataChartCoreModule` + category/annotation modules (see [Complete Data Chart Example](#complete-data-chart-example)) | Multiple `.register()` calls required |
 | `IgrPieChart` | `IgrPieChartModule` | `IgrPieChartModule.register()` |
 | `IgrFinancialChart` | `IgrFinancialChartModule` | `IgrFinancialChartModule.register()` |
 | `IgrRadialGauge` | `IgrRadialGaugeModule` | `IgrRadialGaugeModule.register()` |
@@ -90,6 +91,222 @@ export default function DashboardView() {
 }
 ```
 
+## 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.
+
+### Module Registration for Bar Charts
+
+```tsx
+import {
+  IgrLegendModule,
+  IgrDataChartCoreModule,
+  IgrDataChartCategoryCoreModule,
+  IgrDataChartCategoryModule,
+  IgrDataChartInteractivityModule,
+  IgrDataChartVerticalCategoryModule,
+  IgrDataChartAnnotationModule,
+} from 'igniteui-react-charts';
+
+// Register all required modules once at module level (outside any component)
+IgrLegendModule.register();
+IgrDataChartCoreModule.register();
+IgrDataChartCategoryCoreModule.register();
+IgrDataChartCategoryModule.register();
+IgrDataChartInteractivityModule.register();
+IgrDataChartVerticalCategoryModule.register();
+IgrDataChartAnnotationModule.register();
+```
+
+| Module | Purpose |
+|---|---|
+| `IgrDataChartCoreModule` | Core chart infrastructure |
+| `IgrDataChartCategoryCoreModule` | Base for category series |
+| `IgrDataChartCategoryModule` | Column, Line, Area, Spline etc. |
+| `IgrDataChartVerticalCategoryModule` | **Bar series** (horizontal bars) |
+| `IgrDataChartInteractivityModule` | Mouse hover, selection |
+| `IgrDataChartAnnotationModule` | Tooltip layers, callout layers |
+| `IgrLegendModule` | `IgrLegend` component |
+
+### Axis Choice for Bar Charts
+
+| Chart Orientation | Category Axis | Value Axis |
+|---|---|---|
+| Bar (horizontal) | `IgrCategoryYAxis` | `IgrNumericXAxis` |
+| Column (vertical) | `IgrCategoryXAxis` | `IgrNumericYAxis` |
+
+> **Bar charts are horizontal** — categories go on the Y-axis and numeric values on the X-axis. This is the opposite of column charts.
+
+### Complete Bar Chart Component (Multiple Series)
+
+```tsx
+import { useRef } from 'react';
+import {
+  IgrLegendModule,
+  IgrDataChartCoreModule,
+  IgrDataChartCategoryCoreModule,
+  IgrDataChartCategoryModule,
+  IgrDataChartInteractivityModule,
+  IgrDataChartVerticalCategoryModule,
+  IgrDataChartAnnotationModule,
+  IgrLegend,
+  IgrDataChart,
+  IgrCategoryYAxis,
+  IgrNumericXAxis,
+  IgrCategoryHighlightLayer,
+  IgrBarSeries,
+  IgrDataToolTipLayer,
+} from 'igniteui-react-charts';
+import styles from './bar-chart-view.module.css';
+
+// Register all required modules once at module level
+IgrLegendModule.register();
+IgrDataChartCoreModule.register();
+IgrDataChartCategoryCoreModule.register();
+IgrDataChartCategoryModule.register();
+IgrDataChartInteractivityModule.register();
+IgrDataChartVerticalCategoryModule.register();
+IgrDataChartAnnotationModule.register();
+
+interface MovieFranchise {
+  franchise: string;
+  totalRevenue: number;   // total box office in billions USD
+  highestGrossing: number; // highest single film in billions USD
+}
+
+const movieData: MovieFranchise[] = [
+  { franchise: 'Marvel Universe', totalRevenue: 22.55, highestGrossing: 2.80 },
+  { franchise: 'Star Wars',       totalRevenue: 10.32, highestGrossing: 2.07 },
+  { franchise: 'Harry Potter',    totalRevenue:  9.19, highestGrossing: 1.34 },
+  { franchise: 'Avengers',        totalRevenue:  7.76, highestGrossing: 2.80 },
+  { franchise: 'Spider Man',      totalRevenue:  7.22, highestGrossing: 1.28 },
+  { franchise: 'James Bond',      totalRevenue:  7.12, highestGrossing: 1.11 },
+];
+
+export default function BarChartView() {
+  const legendRef = useRef<IgrLegend>(null);
+
+  return (
+    <div className={styles['chart-wrapper']}>
+      <h3 className={styles['legend-title']}>Highest Grossing Movie Franchises</h3>
+
+      {/* Legend must be rendered before the chart so the ref is populated */}
+      <IgrLegend ref={legendRef} orientation="Horizontal" />
+
+      <div className={styles['chart-container']}>
+        <IgrDataChart legend={legendRef.current ?? undefined}>
+          {/*
+           * IgrCategoryYAxis  — category axis for horizontal bar charts.
+           * - label:          field name that supplies the axis labels.
+           * - dataSource:     the data array (required on the axis for bar charts).
+           * - isInverted:     renders top-to-bottom instead of bottom-to-top.
+           * - gap / overlap:  control bar spacing (gap) and multi-series overlap.
+           */}
+          <IgrCategoryYAxis
+            name="yAxis"
+            label="franchise"
+            dataSource={movieData}
+            isInverted={true}
+            gap={0.5}
+            overlap={-0.1}
+            useEnhancedIntervalManagement={true}
+            enhancedIntervalPreferMoreCategoryLabels={true}
+          />
+
+          {/* IgrNumericXAxis — value axis; start at 0 per bar chart best practices */}
+          <IgrNumericXAxis
+            name="xAxis"
+            title="Billions of U.S. Dollars"
+          />
+
+          {/* Highlight the hovered category row across all series */}
+          <IgrCategoryHighlightLayer name="categoryHighlight" />
+
+          {/* First series — total franchise revenue */}
+          <IgrBarSeries
+            name="totalRevenueSeries"
+            xAxisName="xAxis"
+            yAxisName="yAxis"
+            title="Total Revenue of Franchise"
+            valueMemberPath="totalRevenue"
+            dataSource={movieData}
+            showDefaultTooltip={true}
+            isTransitionInEnabled={true}
+            isHighlightingEnabled={true}
+          />
+
+          {/* Second series — highest grossing single film */}
+          <IgrBarSeries
+            name="highestGrossingSeries"
+            xAxisName="xAxis"
+            yAxisName="yAxis"
+            title="Highest Grossing Movie in Series"
+            valueMemberPath="highestGrossing"
+            dataSource={movieData}
+            showDefaultTooltip={true}
+            isTransitionInEnabled={true}
+            isHighlightingEnabled={true}
+          />
+
+          {/* Rich tooltip layer — shows all series values on hover */}
+          <IgrDataToolTipLayer name="tooltips" />
+        </IgrDataChart>
+      </div>
+    </div>
+  );
+}
+```
+
+```css
+/* bar-chart-view.module.css */
+.chart-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-width: 500px;
+}
+
+.legend-title {
+  font-size: 1rem;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 0.5rem;
+}
+
+.chart-container {
+  min-height: 400px;
+  flex-grow: 1;
+  flex-basis: 0;
+}
+
+/* Make the chart fill its container */
+.chart-container > * {
+  height: 100%;
+  width: 100%;
+}
+```
+
+### 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.

diff --git a/...__dot__claude/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md b/...__dot__claude/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md
@@ -12,7 +12,6 @@ Ignite UI for React is distributed across several packages depending on your nee
 | [`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 |
-| [`reveal-sdk-wrappers-react`](https://www.npmjs.com/package/reveal-sdk-wrappers-react) | Commercial | `npm install reveal-sdk-wrappers-react` | Embedded BI dashboards (Reveal SDK) |
 
 > **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.
 
@@ -131,14 +130,6 @@ Use the tables below to map a UI need to the right React component. All componen
 |---|---|---|---|
 | Chat / AI assistant message thread | `IgrChat` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/interactivity/chat) |
 
-### Embedded Analytics / BI Dashboards (Reveal SDK)
-
-| UI Need | Component | Import | Docs |
-|---|---|---|---|
-| Embedded BI dashboard viewer | `RvRevealView` | `reveal-sdk-wrappers-react` | [Docs](https://help.revealbi.io/web/getting-started-react/) |
-
-> **Note:** Reveal SDK is a companion product for embedding interactive dashboards and data visualizations. It uses separate packages (`reveal-sdk-wrappers-react`, `reveal-sdk-wrappers`) and requires a backend Reveal server URL. See [REVEAL-SDK.md](./REVEAL-SDK.md) for setup instructions and [../igniteui-react-customize-theme/SKILL.md](../igniteui-react-customize-theme/SKILL.md) for syncing Reveal's theme with Ignite UI theming tokens.
-
 ---
 
 ## Step-by-Step: Choosing Components for a UI