feat(skills): add React-specific LLM agent skills

[Copilot]

The WC skills in igniteui-webcomponents produce framework-agnostic guidance with Igc* names, defineComponents() calls, and <igc-*> HTML tags — all wrong for React consumers. This PR adds self-contained, React-specific skills to igniteui-react.

Structure

skills/
├── README.md
├── igniteui-react-choose-components/
│   └── SKILL.md
├── igniteui-react-use-components/
│   ├── SKILL.md
│   ├── INSTALLATION.md
│   ├── JSX-PATTERNS.md
│   ├── EVENT-HANDLING.md
│   ├── REFS-FORMS.md
│   ├── CHARTS-GRIDS.md
│   ├── REVEAL-SDK.md
│   └── TROUBLESHOOTING.md
├── igniteui-react-customize-theme/
│   ├── SKILL.md
│   ├── CSS-THEMING.md
│   ├── SASS-THEMING.md
│   ├── MCP-SERVER.md
│   ├── REVEAL-THEME.md
│   └── TROUBLESHOOTING.md
└── igniteui-react-optimize-bundle-size/
    └── SKILL.md

Progressive Disclosure Pattern

Skills follow the progressive disclosure pattern for optimal AI agent performance:

• SKILL.md files are kept under 500 lines and serve as overview/table of contents
• Detailed content is split into focused sub-files that agents reference as needed
• use-components and customize-theme skills use this pattern extensively

Skills

• choose-components — Component catalogue mapping UI patterns → Igr* components, organized by category (inputs, layouts, grids, charts, etc.) with sub-package info and docs links. Distinguishes between IgrTabs + IgrTabPanel for content panels vs IgrTabs alone for navigation with React Router. Includes Reveal SDK (RvRevealView) for embedded BI dashboards. Charts table includes required *Module.register() calls. Grid Lite documented as IgcGridLite from igniteui-grid-lite with .register() requirement
• use-components — New, no WC counterpart. Overview SKILL.md with detailed sub-files for: installation & theme CSS setup (including Next.js), JSX patterns (props/slots/children), IgrTabs content-panels vs navigation-only usage with React Router, CustomEvent handling, useRef for imperative API, controlled forms with useState, React Hook Form integration via Controller, TypeScript usage, Reveal SDK integration with RvRevealView setup and theme syncing, chart/gauge/map module registration and container sizing requirements, Grid Lite setup with IgcGridLite.register() and container sizing
• customize-theme — Overview SKILL.md with detailed sub-files for: CSS custom properties in React context (global CSS, CSS modules, inline styles with React.CSSProperties cast), Sass via @use 'igniteui-theming', ::part() selectors, light/dark switching, grid theme CSS, Next.js setup, MCP server setup, Reveal SDK theme synchronization with Ignite UI CSS tokens
• optimize-bundle-size — Granular package imports, named imports for tree-shaking, React.lazy + Suspense code-splitting, route-level lazy loading, bundle analysis tooling

Key distinctions from WC skills

• All Igr* prefix, never Igc* (except Grid Lite which is a web component using IgcGridLite from igniteui-grid-lite)
• No defineComponents() — React wrappers auto-register (except charts/gauges/maps which require *Module.register(), and Grid Lite which requires IgcGridLite.register())
• No <igc-*> tags in usage examples — pure JSX
• CSS selectors use igc-* tag names (correct — targets the DOM element), JSX uses Igr* wrappers
• Covers igniteui-react, igniteui-react-grids, igniteui-react-charts, igniteui-react-maps, igniteui-react-gauges, igniteui-grid-lite
• Theme CSS imports marked as CRITICAL — both base theme (igniteui-webcomponents/themes/...) and grid theme (igniteui-webcomponents-grids/grids/themes/...) are required and explicitly documented
• Dedicated Next.js setup sections in use-components and customize-theme skills, showing 'use client' component files and root layout import patterns
• IgrTabs navigation pattern — explicit guidance in both choose-components and use-components that when using IgrTabs for route-based navigation, IgrTabPanel must NOT be included (only IgrTab + router <Outlet />), preventing empty panels from filling the view

Chart / Gauge / Map Module Registration

Unlike core UI components that auto-register, chart, gauge, and map components from igniteui-react-charts, igniteui-react-gauges, and igniteui-react-maps require explicit module registration:

• choose-components charts table includes a "Module Registration" column showing the required *Module.register() call for each component (e.g., IgrCategoryChartModule.register())
• use-components includes a dedicated "Charts, Gauges, Maps & Grid Lite — Module Registration and Container Sizing" section (in CHARTS-GRIDS.md) with module registration table, required container sizing CSS (min-width, min-height, flex-grow), and complete chart and Grid Lite examples using CSS modules
• Common issue documented for invisible charts caused by missing module registration or unsized containers

Grid Lite

Grid Lite (IgcGridLite) is a web component from igniteui-grid-lite — not a React wrapper. It uses the Igc prefix and requires explicit registration and a sized container:

• choose-components lists IgcGridLite from igniteui-grid-lite in the Available Packages table and component catalogue with .register() requirement noted
• use-components includes a complete Grid Lite example with IgcGridLite.register(), CSS modules container sizing, and common issues for incorrect imports and missing registration
• optimize-bundle-size lists igniteui-grid-lite as a separate MIT package

Reveal SDK Integration

All three content skills include guidance for the Reveal SDK companion product:

• choose-components lists RvRevealView from reveal-sdk-wrappers-react in the component catalogue under "Embedded Analytics / BI Dashboards"
• use-components covers installation (reveal-sdk-wrappers-react + reveal-sdk-wrappers), declare const $: any for TypeScript, RevealViewOptions configuration, backend URL setup, and a complete setRevealTheme() function that syncs Reveal's theme with Ignite UI CSS custom properties (in REVEAL-SDK.md)
• customize-theme documents the Reveal theme sync pattern with a token mapping reference table (--ig-font-family → fonts, --ig-surface-500 → dark mode detection and visualization backgrounds, --ig-gray-100 → dashboard background) and guidance on re-syncing after light/dark theme switches (in REVEAL-THEME.md)

README

Includes editor setup snippets for GitHub Copilot (.github/copilot-instructions.md), Cursor (.cursorrules), Claude Code (CLAUDE.md), and manual VS Code/JetBrains attachment.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Ignite UI for React - Dedicated Skills</issue_title>
<issue_description>## Plan: Ignite UI for React — Dedicated Skills

Background & Rationale

The WC skills were written for a framework-agnostic library. The React library (igniteui-react) is a layer of React wrappers over those web components, with different package names, component prefixes (Igr* vs Igc*), prop/event conventions, and React-specific usage patterns. Sharing the WC skills means developers get framework-agnostic or even wrong guidance. The React skills should be self-contained, committed into igniteui-react, and discoverable by Copilot/Cursor/Claude Code.

---

Directory Structure to Create

skills/
├── README.md
├── igniteui-react-choose-components/
│   └── SKILL.md
├── igniteui-react-use-components/
│   └── SKILL.md
├── igniteui-react-customize-theme/
│   └── SKILL.md
└── igniteui-react-optimize-bundle-size/
    └── SKILL.md

---

Skills to Author

1. igniteui-react-choose-components

Maps from WC: igniteui-wc-choose-components — adapted, not shared.

The agent should produce a skill that:

• Lists all available React components with their Igr* names (e.g. IgrButton, IgrGrid, IgrCalendar) and maps them to the UI pattern they serve
• Points to the React-specific documentation at https://infragistics.com/reactsite/components/ and the React Storybook/samples at https://github.com/IgniteUI/igniteui-react-examples
• Covers which sub-package each component lives in (igniteui-react for core UI components, igniteui-react-grids for grids, igniteui-react-charts for charts, etc.)
• Explains how to search docs when unsure, using React component naming conventions

Key difference from WC skill: no references to igc-* tags or custom element registration. No defineComponents() calls.

---

2. igniteui-react-use-components (New — no direct WC counterpart)

This is the most React-specific skill and has no real equivalent in the WC set (the WC "integrate-with-framework" skill touched on React as one of four frameworks). This new skill should cover:

• Installation & setup: Installing igniteui-react (or sub-packages), adding IgrStyles or the theming stylesheet to index.tsx/App.tsx, and any peer dependency notes
• JSX usage patterns: Component props vs HTML attributes (value={...} not value="..."), boolean props, children vs slots
• Event handling: React's synthetic event system vs the WC custom events — how onXxx props work on the React wrappers and how to handle them with TypeScript types
• Refs: Using useRef to access the underlying web component imperative API when needed
• Controlled vs uncontrolled components: How to wire up form components (IgrInput, IgrCheckbox, IgrSelect) with useState or React Hook Form
• TypeScript: Using the provided Igr* prop type interfaces

---

3. igniteui-react-customize-theme

Maps from WC: igniteui-wc-customize-component-theme — adapted.

• CSS custom properties work identically to WC, but the skill should explain how to apply them in a React context (in index.css, a CSS module, or via inline style on a wrapper div)
• CSS ::part() selectors — same underlying shadow DOM, but may need context on how to structure this in a React app
• configureTheme() — calling the theming function in React's lifecycle (e.g. in a useEffect at app root, or in main.tsx before ReactDOM.createRoot)
• Component-level theme isolation — using CSS custom properties scoped to a container class
• Remove all WC-specific content like LitElement or igc-theme-* attribute examples

---

4. igniteui-react-optimize-bundle-size

Maps from WC: igniteui-wc-optimize-bundle-size — substantially rewritten.

• Granular package imports: igniteui-react (core UI), igniteui-react-grids, igniteui-react-charts, igniteui-react-maps, igniteui-react-gauges — install only what you need
• Named imports only: Import specific components rather than barrel/wildcard imports to enable tree-shaking
• Lazy loading with React.lazy + Suspense: Code-split heavy components like grids and charts behind route-level lazy imports
• Avoid defineAllComponents() (the React layer doesn't use this, but the underlying WC might be invoked — clarify that the React wrappers handle registration automatically per-component)
• Bundle analysis: webpack-bundle-analyzer or Vite's rollup-plugin-visualizer to identify which sub-packages are included and measure impact

---

skills/README.md

The agent should write a README modelled on the WC one, with a table of all four skills and their use-when descriptions, plus setup instructions for:

• GitHub Copilot (via .github/copilot-instructions.md)
• Cursor (.cursorrules)
• Claude Code/Desktop (CLAUDE.md project instructions)
• VS Code / JetBrains m...

• Fixes Ignite UI for React - Dedicated Skills #129

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[zdrawku]

@copilot while testing the skills, I found that the AI agent adds IgrTabs as navigational component to the view correctly. However, it added and tab-body which is not necessary and fill the entire view.

Steps to reproduce

Add skills to a react application in the .github/skills folder. Ask Claude Sonnet 4.6 to do this:
In my application I have navigation in master view to each child component. I would like to have some more sofistcated component for this navigation, for example tabs. I also need to have visual indication when navigation completes to know on which tab I am now. Implement this for me.

Result

IgrTabs component is generated with its tab-body which is not needed when tabs is used for navigation.

Expected result

Only tabs should be visible on the main layout and routing outlet should fill the rest of the page

Update the skills in a way to achieve the expected result

[Copilot]

@copilot while testing the skills, I found that the AI agent adds IgrTabs as navigational component to the view correctly. However, it added and tab-body which is not necessary and fil...

Updated both choose-components and use-components skills in 31a3ad0:

choose-components:

• Layouts table now specifies IgrTabs + IgrTabPanel for "Tabbed content panels (with inline content)"
• Navigation table now includes IgrTabs (no IgrTabPanel) for "Tab-based navigation (with router)"
• Step 2 preference table distinguishes "Content tabs" vs "Tab-based navigation"
• New "Master-Detail with Tab Navigation" scenario with a ⚠️ warning about the two usage patterns

use-components:

• New "IgrTabs — Content Panels vs Navigation" section with both patterns and a complete React Router example
• Pattern 2 is marked ⚠️ CRITICAL — agents are explicitly told not to include IgrTabPanel when tabs are used for navigation
• New Common Issue: "IgrTabs used for navigation fills the entire view with an empty panel"
• New Best Practice Stacked Column Series - Sorting Fragments  #8: "Tabs for navigation — do NOT include IgrTabPanel"

[zdrawku]

@copilot while testing the skills I noticed that the AI agent was not able to correctly add Reveal to a view in my application and set a theme properly, update the skills to be able to handle that, below is an example on properly adding a Reveal dashboard component and setting a theme example, extend the skills.

import { RvRevealView } from 'reveal-sdk-wrappers-react';
import { RevealViewOptions } from 'reveal-sdk-wrappers';
import styles from './master-view.module.css';
import createClassTransformer from '../style-utils';
import '/src/app/base-view-styles.css';

export default function MasterView() {
	const classes = createClassTransformer(styles);
	const options: RevealViewOptions = {
		visualizations: {
			menu: {
				copy: false,
				duplicate: false
			}
		}
	};
	$.ig.RevealSdkSettings.setBaseUrl('https://samples.revealbi.io/upmedia-backend/reveal-api/');
	setRevealTheme();

	function setRevealTheme() {
		const style = window.getComputedStyle(document.body);
		const theme = new $.ig.RevealTheme();
		theme.regularFont = style.getPropertyValue('--ig-font-family')?.trim() || 'sans-serif';
		theme.mediumFont = theme.regularFont;
		theme.boldFont = theme.regularFont;

		const color = style.getPropertyValue('--ig-surface-500').trim() || '#fff';
		const [r, g, b] = [1, 3, 5].map(i => parseInt(color.substring(i, i + 2), 16));
		const brightness = (r * 299 + g * 587 + b * 114) / 1000;

		theme.isDark = brightness < 128;
		theme.fontColor = theme.isDark ? 'white' : 'black';
		theme.dashboardBackgroundColor = style.getPropertyValue('--ig-gray-100').trim();
		theme.visualizationBackgroundColor = style.getPropertyValue('--ig-surface-500').trim();

		$.ig.RevealSdkSettings.theme = theme;
	}

	return (
		<>
			<div className={classes("row-layout master-view-container")}>
				<div className={classes("group")}>
					<RvRevealView options={options} dashboard="Sales"></RvRevealView>
				</div>
			</div>
		</>
	);
}

[Copilot]

@copilot while testing the skills I noticed that the AI agent was not able to correctly add Reveal to a view in my application and set a theme properly, update the skills to be able to...

Extended all three relevant skills in b6558a2:

choose-components:

• Added reveal-sdk-wrappers-react to the Available Packages table
• New "Embedded Analytics / BI Dashboards (Reveal SDK)" section in the component catalogue with RvRevealView

use-components:

• New "Step 7 — Reveal SDK Integration" section covering installation (reveal-sdk-wrappers-react + reveal-sdk-wrappers), basic RvRevealView usage with RevealViewOptions, base URL setup, and declare const $: any for TypeScript
• Complete setRevealTheme() function that syncs Reveal's theme with Ignite UI CSS custom properties (--ig-font-family, --ig-surface-500, --ig-gray-100) including automatic light/dark mode detection

customize-theme:

• New "Syncing Reveal SDK Theme with Ignite UI" section with the theme sync function, a token mapping reference table (regularFont ↔ --ig-font-family, isDark ↔ computed from --ig-surface-500, etc.), and guidance on re-calling setRevealTheme() after theme switches

[zdrawku]

@copilot while testing I found that upon adding a Chart, the className is not added properly and it returns a compilation error, below is an example of a app structure with code snippet that compiles, update the skills to respect that:

import { IgrCategoryChart, IgrCategoryChartModule } from 'igniteui-react-charts';
import { useGetSales } from '../hooks/financial-hooks';
import styles from './master-view.module.css';
import createClassTransformer from '../style-utils';
import '/src/app/base-view-styles.css';

IgrCategoryChartModule.register();

export default function MasterView() {
	const classes = createClassTransformer(styles);
	const { financialSales } = useGetSales();

	return (
		<>
			<div className={classes("row-layout master-view-container")}>
				<div className={classes("group")}>
					<IgrCategoryChart dataSource={financialSales} xAxisLabelAngle={60} initialGroups="MonthName" initialSummaries="SUM(COGS), SUM(Discounts), SUM(GrossSales), SUM(ManufacturingPrice), SUM(Profit), SUM(SalePrice), SUM(Sales)" groupSorts="MonthName asc" computedPlotAreaMarginMode="Series"></IgrCategoryChart>
				</div>
			</div>
		</>
	);
}

.row-layout {
	display: flex;
}
.master-view-container {
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;
	height: 100%;
}
.group {
	min-width: 400px;
	min-height: 300px;
	flex-grow: 1;
	flex-basis: 0;
	> * { height: 100%; width: 100%; }
}

[Copilot]

@copilot while testing I found that upon adding a Chart, the className is not added properly and it returns a compilation error, below is an example of a app structure with code snippe...

Updated both choose-components and use-components skills in a129ee3:

use-components:

• New "Charts, Gauges & Maps — Module Registration and Container Sizing" section with the *Module.register() pattern, module registration table, container sizing CSS requirements (min-width, min-height, flex-grow), and a complete chart example using CSS modules
• Updated the "No defineComponents() needed" note to clarify that charts/gauges/maps are an exception requiring explicit .register()
• New Common Issue: "Chart / gauge / map does not render or is invisible"
• Best Practices Update README.md #3 and igniteui-react-grids: shadow remains after dropdown closes #4 added for module registration and sized containers

choose-components:

• Charts & Data Visualization table now includes a "Module Registration" column (e.g., IgrCategoryChartModule.register())
• ⚠️ note added explaining both requirements

[zdrawku]

@copilot while testing I found the Grid Lite is not added correctly to my application, below I provide a code snippet of a properly added Lite Grid that complies, update the skills based on it:

import { IgcGridLite } from 'igniteui-grid-lite';
import { useGetCustomers } from '../hooks/northwind-hooks';
import styles from './master-view.module.css';
import createClassTransformer from '../style-utils';
import '/src/app/base-view-styles.css';

IgcGridLite.register();

export default function MasterView() {
	const classes = createClassTransformer(styles);
	const { northwindCustomers } = useGetCustomers();

	return (
		<>
			<div className={classes("row-layout master-view-container")}>
				<igc-grid-lite data={northwindCustomers} className={classes("grid-lite")}>
					<igc-grid-lite-column field="customerID" dataType="string" header="customerID" filterable={true} sortable={true} resizable={true}></igc-grid-lite-column>
					<igc-grid-lite-column field="companyName" dataType="string" header="companyName" filterable={true} sortable={true} resizable={true}></igc-grid-lite-column>
					<igc-grid-lite-column field="contactName" dataType="string" header="contactName" filterable={true} sortable={true} resizable={true}></igc-grid-lite-column>
					<igc-grid-lite-column field="contactTitle" dataType="string" header="contactTitle" filterable={true} sortable={true} resizable={true}></igc-grid-lite-column>
					<igc-grid-lite-column field="address.street" dataType="string" header="address street" filterable={true} sortable={true} resizable={true}></igc-grid-lite-column>
					<igc-grid-lite-column field="address.city" dataType="string" header="address city" filterable={true} sortable={true} resizable={true}></igc-grid-lite-column>
					<igc-grid-lite-column field="address.region" dataType="string" header="address region" filterable={true} sortable={true} resizable={true}></igc-grid-lite-column>
					<igc-grid-lite-column field="address.postalCode" dataType="string" header="address postalCode" filterable={true} sortable={true} resizable={true}></igc-grid-lite-column>
					<igc-grid-lite-column field="address.country" dataType="string" header="address country" filterable={true} sortable={true} resizable={true}></igc-grid-lite-column>
					<igc-grid-lite-column field="address.phone" dataType="string" header="address phone" filterable={true} sortable={true} resizable={true}></igc-grid-lite-column>
				</igc-grid-lite>
			</div>
		</>
	);
}

.row-layout {
	display: flex;
}
.master-view-container {
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;
	height: 100%;
}
.grid-lite {
	min-width: 400px;
	min-height: 220px;
	flex-grow: 1;
	flex-basis: 0;
}

[Copilot]

@copilot while testing I found the Grid Lite is not added correctly to my application, below I provide a code snippet of a properly added Lite Grid that complies, update the skills bas...

Updated all three skill files in 6f9c5bc:

choose-components:

• Available Packages table now lists igniteui-grid-lite as a separate MIT package with IgcGridLite.register() requirement
• Note clarifies Grid Lite is a web component (Igc prefix, not Igr)
• Lists & Data Display table shows IgcGridLite from igniteui-grid-lite
• Preference table and Step 3 package list corrected
• Data Table scenario uses IgcGridLite

use-components:

• Installation section includes npm install igniteui-grid-lite
• Module registration section renamed to "Charts, Gauges, Maps & Grid Lite" with IgcGridLite in the registration table
• Complete Grid Lite example with IgcGridLite.register(), CSS modules, and container sizing
• New Common Issue: "Grid Lite does not render or compilation error"
• Updated Common Issue: IgcGridLite vs IgrDataGrid confusion
• Best Practices Showing which columns have a filter applied in their headers #5: "Grid Lite uses Igc prefix"

optimize-bundle-size:

• Package table corrected to igniteui-grid-lite with .register() note

[zdrawku]

@copilot igniteui-react-use-components skill is more than 1000 lines of code, this is not okay, follow stricty the Progressive disclosure patterns - SKILL.md serves as an overview that points Agents to detailed materials as needed, like a table of contents in an onboarding guide. For an explanation of how progressive disclosure works, see How Skills work in the overview.

Practical guidance on what do do:
Keep SKILL.md body under 500 lines for optimal performance
Split content into separate files when approaching this limit
Organize instructions, code, and resources effectively
Review the other skills and apply the same progressive disclosure patterns

[Copilot]

@copilot igniteui-react-use-components skill is more than 1000 lines of code, this is not okay, follow stricty the Progressive disclosure patterns - SKILL.md serves as an overview that...

Applied progressive disclosure pattern in d1f163a:

use-components (was 1078 lines → now 149 lines):

• SKILL.md is now an overview with content guide table
• Split into: INSTALLATION.md, JSX-PATTERNS.md, EVENT-HANDLING.md, REFS-FORMS.md, CHARTS-GRIDS.md, REVEAL-SDK.md, TROUBLESHOOTING.md

customize-theme (was 674 lines → now 183 lines):

• SKILL.md is now an overview with content guide table
• Split into: CSS-THEMING.md, SASS-THEMING.md, MCP-SERVER.md, REVEAL-THEME.md, TROUBLESHOOTING.md

All SKILL.md files are now under 500 lines and serve as table of contents pointing agents to detailed materials.