You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> Call `get_doc('react', 'column-chart')` for full `IgrCategoryChart` and `IgrDataChart` usage, prop tables, and code examples. Call `get_doc('react', 'chart-features')` for axes, annotations, animations, markers, and tooltips.
57
+
58
+
The minimum pattern — register the module at file scope, then wrap the component in a sized container:
@@ -80,20 +84,6 @@ export default function DashboardView() {
80
84
}
81
85
```
82
86
83
-
```css
84
-
/* dashboard-view.module.css */
85
-
.chart-container {
86
-
min-width: 400px;
87
-
min-height: 300px;
88
-
flex-grow: 1;
89
-
flex-basis: 0;
90
-
}
91
-
.chart-container>* {
92
-
height: 100%;
93
-
width: 100%;
94
-
}
95
-
```
96
-
97
87
## Complete Data Chart Example
98
88
99
89
> **⚠️ 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.
> **Bar charts are horizontal** — categories go on the Y-axis and numeric values on the X-axis. This is the opposite of column charts.
142
132
133
+
> For the full `IgrDataChart` API (all series types, axis options, layers), call `get_doc('react', 'bar-chart')` or `get_doc('react', 'column-chart')`.
134
+
143
135
### Complete Bar Chart Component (Multiple Series)
144
136
145
137
```tsx
@@ -288,28 +280,6 @@ export default function BarChartView() {
288
280
}
289
281
```
290
282
291
-
### Key Props Reference for `IgrBarSeries`
292
-
293
-
| Prop | Type | Description |
294
-
|---|---|---|
295
-
|`name`|`string`| Unique identifier — **required** when referencing the series from other elements |
296
-
|`xAxisName`|`string`| Must match the `name` of an `IgrNumericXAxis` declared in the same chart |
297
-
|`yAxisName`|`string`| Must match the `name` of an `IgrCategoryYAxis` declared in the same chart |
298
-
|`valueMemberPath`|`string`| Field name in the data object that holds the bar length value |
299
-
|`dataSource`|`any[]`| The data array — can differ per series for independent datasets |
300
-
|`title`|`string`| Series label shown in the legend |
301
-
|`isTransitionInEnabled`|`boolean`| Animates bars on initial render |
302
-
|`isHighlightingEnabled`|`boolean`| Dims other series when one is hovered |
303
-
|`showDefaultTooltip`|`boolean`| Shows a simple built-in tooltip (use `IgrDataToolTipLayer` for richer output) |
304
-
305
-
### Available Bar Chart Variants
306
-
307
-
| Variant | Component | Module |
308
-
|---|---|---|
309
-
| Bar (horizontal) |`IgrBarSeries`|`IgrDataChartVerticalCategoryModule`|
310
-
| Stacked Bar |`IgrStackedBarSeries` + `IgrStackedFragmentSeries`|`IgrDataChartStackedModule`|
311
-
| Stacked 100% Bar |`IgrStacked100BarSeries` + `IgrStackedFragmentSeries`|`IgrDataChartStackedModule`|
312
-
313
283
## Complete Grid Lite Example
314
284
315
285
> **⚠️ 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.
Copy file name to clipboardExpand all lines: skills/igniteui-react-customize-theme/SKILL.md
+7-14Lines changed: 7 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -106,14 +106,14 @@ import './index.css'; // Overrides second
106
106
107
107
## Theming Architecture
108
108
109
-
The Ignite UI theming system is built on four pillars:
109
+
The Ignite UI theming system is built on **palette**, **typography**, **elevations**, and per-component **schemas**. Use the MCP theming tools at the right stage:
110
110
111
-
| Concept | Purpose |
112
-
|---|---|
113
-
|**Palette**| Color system with primary, secondary, surface, gray, info, success, warn, error families |
114
-
|**Typography**| Font family, type scale (h1–h6, subtitle, body, button, caption, overline) |
115
-
|**Elevations**| Box-shadow levels 0–24 for visual depth |
116
-
|**Schema**| Per-component recipes mapping palette colors to component tokens |
111
+
-**`create_palette`** — when the user provides brand colors; generates luminance-safe shades for all palette roles
112
+
-**`create_theme`** — generates the complete global theme CSS; call after `create_palette`
113
+
-**`create_typography`**— when the user wants to change fonts, type scale, or weights
114
+
-**`create_elevations`**— when the user wants to adjust shadow depth
115
+
-**`get_component_design_tokens`**- before writing any component-level CSS; retrieves the current token names for a specific component
116
+
-**`set_size`**, **`set_spacing`**, or **`set_roundness`** - adjust component size, content spacing, and roundness.
117
117
118
118
### Design Systems
119
119
@@ -182,10 +182,3 @@ See [CSS-THEMING.md](./reference/CSS-THEMING.md) for approaches: class toggle, m
Copy file name to clipboardExpand all lines: skills/igniteui-react-customize-theme/reference/CSS-THEMING.md
+2Lines changed: 2 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -148,6 +148,8 @@ For truly dynamic one-off overrides:
148
148
149
149
Override individual component appearance using CSS custom properties.
150
150
151
+
> **AGENT INSTRUCTION**: Before writing component-level token overrides, call `get_component_design_tokens` with the component name (e.g., `"avatar"`, `"button"`, `"grid"`) to retrieve the current, correct token names. Token names vary by component and can change between versions. Use only tokens returned by that call — do not guess or reuse tokens from other components.
Copy file name to clipboardExpand all lines: skills/igniteui-react-customize-theme/reference/MCP-SERVER.md
-8Lines changed: 0 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -62,14 +62,6 @@ Edit the Claude Desktop config file:
62
62
3. Set Command to `npx` and Arguments to `igniteui-theming igniteui-theming-mcp`
63
63
4. Click OK and restart the AI Assistant
64
64
65
-
## MCP Server Workflow
66
-
67
-
1.**Detect platform**: Call `detect_platform` — it will detect `webcomponents` from `package.json`
68
-
2.**Generate a theme**: Call `create_theme` with your desired colors and design system
69
-
3.**Customize components**: Call `get_component_design_tokens` first, then `create_component_theme` with palette token values
70
-
4.**Get color references**: Call `get_color` to get the correct CSS custom property for any palette shade
71
-
5.**Adjust layout**: Call `set_size`, `set_spacing`, or `set_roundness`
72
-
73
65
## File Safety Rule
74
66
75
67
> **IMPORTANT — File Safety Rule**: When generating theme code, **never overwrite existing style files directly**. Always propose changes as an update and let the user review before writing to disk.
Copy file name to clipboardExpand all lines: skills/igniteui-react-generate-from-image-design/SKILL.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -65,7 +65,7 @@ After the table, translate the image into CSS Grid rows and columns first. Prese
65
65
66
66
This skill is React-only. Check package routing, theme CSS imports, or licensing only when imports, packages, or theming depend on it.
67
67
68
-
Then call `list_components` with `framework: "react"` and relevant filters to find components matching each UI pattern. Common filters:
68
+
Then call `list_components('react')` and relevant filters to find components matching each UI pattern. Common filters:
69
69
70
70
-`chart`, `sparkline` - for data visualization
71
71
-`list view`, `card`, `avatar`, `badge` - for data display
@@ -80,7 +80,7 @@ For component-to-Ignite-UI mapping, see [reference/component-mapping.md](referen
80
80
81
81
## Step 4: Look Up Component API
82
82
83
-
For every chosen component category, call `get_doc` with the doc namefrom `list_components` results (e.g., `name: "card"`, `framework: "react"`). Use the doc `name` field from the MCP results, not the result title shown in the list. This is mandatory before coding and gives exact React usage patterns, prop names, slot structure, event signatures, and any required module registration.
83
+
For every chosen component category, call `get_doc('react', '<name>')` using the doc `name` field from `list_components` results (e.g., `get_doc('react', 'card')`), not the result title shown in the list. This is mandatory before coding and gives exact React usage patterns, prop names, slot structure, event signatures, and any required module registration.
84
84
85
85
Call `search_docs` for feature-based questions (e.g., "how to configure [component] for [specific behavior or styling need]").
Copy file name to clipboardExpand all lines: skills/igniteui-react-generate-from-image-design/reference/component-mapping.md
+60-74Lines changed: 60 additions & 74 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,51 +11,37 @@
11
11
-[Package Requirements](#package-requirements)
12
12
-[Import Patterns](#import-patterns)
13
13
14
+
> **For component API details** (props, events, slots, examples), call `get_doc` with `'react'` and the doc name from `list_components` results. Use `search_api` for specific property lookup.
- Use `IgrNavbar` for a top horizontal bar when its slot structure and behavior match the screenshot. Use custom children and CSS flex overrides to achieve multi-zone layouts inside it. Use a plain `<header>` when that is a closer structural fit.
29
31
- Use `IgrNavDrawer` for a sidebar or side-navigation panel when drawer structure and behavior match the screenshot. Configure open and mini behavior according to whether the design shows fixed, collapsible, or icon-only navigation. Use a plain `<aside>` when a static custom sidebar matches the screenshot better.
30
32
- Use `IgrTabs` for a horizontal tab strip when the screenshot clearly shows tabbed state switching. Use label-only tabs for routed navigation and inline tab content for local view switching.
| Repeated rows with icon/text/action |`IgrList`| Use when the row anatomy and interaction model match. Compose the row content with React children and the documented slots. Use native `<ul>/<li>` or custom containers when that is a closer visual fit |
37
-
| Spreadsheet-like editable or sortable table |`IgrGridLite` or `IgrGrid`| Use only when content is truly tabular. Prefer `IgrGridLite` for lightweight MIT cases and `IgrGrid` when advanced grid features are required |
38
-
| Hierarchical or tree-structured table |`IgrTreeGrid` or `IgrTree`| Use `IgrTreeGrid` for hierarchical tables and `IgrTree` for tree-style navigation or nested lists |
39
-
| 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 |
40
-
| 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 |
41
-
| Dropdown or select |`IgrSelect`| Use when the screenshot clearly shows select/dropdown behavior |
42
-
| Form fields with labels and inputs |`IgrInput`, `IgrSelect`, `IgrCombo`, `IgrDatePicker`, `IgrDateTimeInput`| Cover text, select, combo, and date/time inputs |
43
-
| Multi-step form / wizard |`IgrStepper`| Use when a sequence of steps is visually present |
44
-
| Filter chips / tag inputs |`IgrChip`| Use when chip anatomy matches status badges, filter tags, or removable labels in the screenshot |
45
-
| Calendar or date picker as a primary view element |`IgrCalendar`, `IgrDatePicker`, `IgrDateRangePicker`| Use when scheduling or date selection is the core UI |
46
-
| 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 |
0 commit comments