Skip to content
26 changes: 23 additions & 3 deletions skills/igniteui-react-components/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -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?"
Expand Down Expand Up @@ -58,9 +76,11 @@ This skill is organized into focused reference files. Load the appropriate file

---

## 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
Expand Down Expand Up @@ -143,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
Expand Down