From c5bad85949da1d357b0ebe8c9ffe6dae50e2be3d Mon Sep 17 00:00:00 2001 From: onlyexeption Date: Tue, 2 Jun 2026 14:35:57 +0300 Subject: [PATCH 1/7] feat(skills): refactor react skills --- skills/igniteui-react-components/SKILL.md | 18 --- .../reference/CHARTS-GRIDS.md | 42 +---- .../reference/COMPONENT-CATALOGUE.md | 150 +----------------- .../reference/EVENT-HANDLING.md | 2 + .../igniteui-react-customize-theme/SKILL.md | 20 +-- .../reference/CSS-THEMING.md | 2 + .../reference/MCP-SERVER.md | 8 - .../reference/component-mapping.md | 134 +++++++--------- 8 files changed, 84 insertions(+), 292 deletions(-) diff --git a/skills/igniteui-react-components/SKILL.md b/skills/igniteui-react-components/SKILL.md index 60ead52..c24dbf9 100644 --- a/skills/igniteui-react-components/SKILL.md +++ b/skills/igniteui-react-components/SKILL.md @@ -25,17 +25,6 @@ user-invocable: true > **Full setup instructions for VS Code, Cursor, Claude Desktop, and JetBrains IDEs are in [`reference/MCP-SERVER.md`](./reference/MCP-SERVER.md).** Read that file for editor-specific configuration steps and verification. -### 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?" @@ -179,10 +168,3 @@ Use [COMPONENT-CATALOGUE.md](./reference/COMPONENT-CATALOGUE.md) to map any UI n 6. **Handle events as `CustomEvent`** — not `React.SyntheticEvent` 7. **Use refs sparingly** — prefer declarative props 8. **Check slot names** in the docs - -## Additional Resources - -- [Ignite UI for React — Getting Started](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started) -- [React Examples Repository](https://github.com/IgniteUI/igniteui-react-examples) -- [npm: igniteui-react](https://www.npmjs.com/package/igniteui-react) -- [@lit/react Documentation](https://lit.dev/docs/frameworks/react/) diff --git a/skills/igniteui-react-components/reference/CHARTS-GRIDS.md b/skills/igniteui-react-components/reference/CHARTS-GRIDS.md index 14d4aaf..d4748c2 100644 --- a/skills/igniteui-react-components/reference/CHARTS-GRIDS.md +++ b/skills/igniteui-react-components/reference/CHARTS-GRIDS.md @@ -53,6 +53,10 @@ IgrCategoryChartModule.register(); ## Complete Chart Example +> 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. + +The minimum pattern — register the module at file scope, then wrap the component in a sized container: + ```tsx import { IgrCategoryChart, IgrCategoryChartModule } from 'igniteui-react-charts'; import styles from './dashboard-view.module.css'; @@ -80,20 +84,6 @@ export default function DashboardView() { } ``` -```css -/* dashboard-view.module.css */ -.chart-container { - min-width: 400px; - min-height: 300px; - flex-grow: 1; - flex-basis: 0; -} -.chart-container > * { - height: 100%; - width: 100%; -} -``` - ## 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. @@ -140,6 +130,8 @@ IgrDataChartAnnotationModule.register(); > **Bar charts are horizontal** — categories go on the Y-axis and numeric values on the X-axis. This is the opposite of column charts. +> For the full `IgrDataChart` API (all series types, axis options, layers), call `get_doc('react', 'bar-chart')` or `get_doc('react', 'column-chart')`. + ### Complete Bar Chart Component (Multiple Series) ```tsx @@ -288,28 +280,6 @@ export default function BarChartView() { } ``` -### 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/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md b/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md index d3170f1..31f8e71 100644 --- a/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md +++ b/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md @@ -3,136 +3,6 @@ ## Overview This reference gives high-level guidance on Ignite UI for React components, their key features, and common use cases. For a full list of components, call `list_components` from `igniteui-cli` with the specific chart, or grid component, or feature you're interested in. -## Available Packages - -Ignite UI for React is distributed across several packages depending on your needs: - -| Package | License | Install | Best For | -|---|---|---|---| -| [`igniteui-react`](https://www.npmjs.com/package/igniteui-react) | MIT | `npm install igniteui-react` | General UI components (inputs, layouts, notifications, scheduling) | -| [`igniteui-grid-lite`](https://www.npmjs.com/package/igniteui-grid-lite) | MIT | `npm install igniteui-react igniteui-grid-lite` | Lightweight grid (Grid Lite) — requires both packages, import from `igniteui-react/grid-lite` | -| [`igniteui-react-grids`](https://www.npmjs.com/package/igniteui-react-grids) | Commercial | `npm install igniteui-react-grids` (trial) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) | -| [`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 | - -> **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. - ---- - -## Component Catalogue by UI Pattern - -Use the tables below to map a UI need to the right React component. All components use the **`Igr`** prefix. - -### Inputs & Forms - -| UI Need | Component | Import | Docs | -|---|---|---|---| -| Text field / text input | `IgrInput` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/input) | -| Multi-line text | `IgrTextarea` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/text-area) | -| Checkbox | `IgrCheckbox` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/checkbox) | -| On/off toggle | `IgrSwitch` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/switch) | -| Single choice from a list | `IgrRadio` / `IgrRadioGroup` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/radio) | -| Star / score rating | `IgrRating` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/rating) | -| Formatted / masked text input | `IgrMaskInput` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/mask-input) | -| Date and time input | `IgrDateTimeInput` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/date-time-input) | -| File upload | `IgrFileInput` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/file-input) | -| Simple dropdown / select | `IgrSelect` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/select) | -| Searchable dropdown, single or multi-select | `IgrCombo` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/combo/overview) | -| Grouped toggle buttons | `IgrButtonGroup` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/button-group) | -| Range / numeric slider | `IgrSlider` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/slider) | -| Range slider (two handles) | `IgrRangeSlider` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/slider) | - -### Buttons & Actions - -| UI Need | Component | Import | Docs | -|---|---|---|---| -| Standard clickable button | `IgrButton` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/button) | -| Icon-only button | `IgrIconButton` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/icon-button) | -| Click ripple effect | `IgrRipple` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/ripple) | -| Removable tag / filter chip | `IgrChip` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/chip) | - -### Scheduling & Date Pickers - -| 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 range selection | `IgrDateRangePicker` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/scheduling/date-range-picker) | - -### Notifications & Feedback - -| UI Need | Component | Import | Docs | -|---|---|---|---| -| Brief auto-dismiss notification | `IgrToast` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/notifications/toast) | -| Actionable dismissible notification bar | `IgrSnackbar` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/notifications/snackbar) | -| Persistent status banner | `IgrBanner` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/notifications/banner) | -| Modal confirmation or content dialog | `IgrDialog` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/notifications/dialog) | -| Tooltip on hover | `IgrTooltip` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/tooltip) | -| Small count / status indicator | `IgrBadge` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/badge) | - -### Progress Indicators - -| UI Need | Component | Import | Docs | -|---|---|---|---| -| Horizontal progress bar | `IgrLinearProgress` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/linear-progress) | -| Circular / spinner progress | `IgrCircularProgress` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/circular-progress) | - -### Layouts & Containers - -| UI Need | Component | Import | Docs | -|---|---|---|---| -| Generic content card | `IgrCard` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/card) | -| User avatar / profile image | `IgrAvatar` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/avatar) | -| Icon display | `IgrIcon` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/icon) | -| Horizontal or vertical divider | `IgrDivider` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/divider) | -| Collapsible section | `IgrExpansionPanel` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/expansion-panel) | -| Multiple collapsible sections | `IgrAccordion` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/accordion) | -| Tabbed content panels (with inline content) | `IgrTabs` (content in `IgrTab`) | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/tabs) | -| Image / content slideshow | `IgrCarousel` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/carousel) | -| Multi-step wizard / onboarding flow | `IgrStepper` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/stepper) | -| Resizable, draggable dashboard tiles | `IgrTileManager` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/tile-manager) | - -### Navigation - -| UI Need | Component | Import | Docs | -|---|---|---|---| -| Top application bar / toolbar | `IgrNavbar` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/menus/navbar) | -| Side navigation drawer | `IgrNavDrawer` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/menus/navigation-drawer) | -| Tab-based navigation (with router) | `IgrTabs` (label-only, no content) | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/tabs) | -| Context menu / actions dropdown | `IgrDropdown` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/dropdown) | - -### Lists & Data Display - -| UI Need | Component | Import | Docs | -|---|---|---|---| -| 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 | `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) | - -### Charts & Data Visualization - -> **⚠️ IMPORTANT:** Chart, gauge, and map components require **explicit module registration** and a **sized container**. Import the `*Module` class and call `.register()` at module level, and wrap the component in a container with explicit `min-width`/`min-height` or `flex-grow`. See [CHARTS-GRIDS.md](./CHARTS-GRIDS.md) for details. - -| UI Need | Component | Module Registration | Import | Docs | -|---|---|---|---|---| -| Category / bar / line chart | `IgrCategoryChart` | `IgrCategoryChartModule.register()` | `igniteui-react-charts` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/charts/chart-overview) | -| Pie / doughnut chart | `IgrPieChart` | `IgrPieChartModule.register()` | `igniteui-react-charts` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/charts/chart-overview) | -| Financial / stock chart | `IgrFinancialChart` | `IgrFinancialChartModule.register()` | `igniteui-react-charts` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/charts/chart-overview) | -| Radial gauge | `IgrRadialGauge` | `IgrRadialGaugeModule.register()` | `igniteui-react-gauges` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/gauges/radial-gauge) | -| Linear gauge | `IgrLinearGauge` | `IgrLinearGaugeModule.register()` | `igniteui-react-gauges` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/gauges/linear-gauge) | -| Geographic map | `IgrGeographicMap` | `IgrGeographicMapModule.register()` | `igniteui-react-maps` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/maps/geographic-map) | - -### Conversational / AI - -| UI Need | Component | Import | Docs | -|---|---|---|---| -| Chat / AI assistant message thread | `IgrChat` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/interactivity/chat) | - --- ## Step-by-Step: Choosing Components for a UI @@ -149,7 +19,7 @@ Break the described UI into atomic patterns. Examples: ### Step 2 — Map patterns to components -Use the **Component Catalogue** tables above to find matching components. When in doubt: +Call `list_components('react')` to discover available components, optionally filtered by keyword (e.g., `filter: 'date'` for date-related components). When in doubt: | If the user needs… | Prefer… | Over… | |---|---|---| @@ -177,14 +47,9 @@ Confirm which package provides the component: - **Maps** → `igniteui-react-maps` *(commercial)* - **Gauges** → `igniteui-react-gauges` *(commercial)* -### Step 4 — Link to official resources - -Always direct the user to the official documentation linked in the tables above. Key entry points: +### Step 4 — Look up component documentation -- **Getting started**: [Ignite UI for React Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started) -- **React examples**: [https://github.com/IgniteUI/igniteui-react-examples](https://github.com/IgniteUI/igniteui-react-examples) -- **npm package**: [https://www.npmjs.com/package/igniteui-react](https://www.npmjs.com/package/igniteui-react) -- **GitHub repository**: [https://github.com/IgniteUI/igniteui-react](https://github.com/IgniteUI/igniteui-react) +Call `get_doc` with `framework: 'react'` and the doc name from `list_components` results to get full usage documentation, import paths, prop tables, event signatures, and code examples. Use `search_docs` for feature-based questions (e.g., `"date picker range selection"`). ### Step 5 — Provide a starter code snippet @@ -288,8 +153,9 @@ function Dashboard() { ## Searching the Documentation -If you are unsure about a component or need more information: +Use MCP tools for up-to-date component discovery and API lookup: -1. **Browse the docs** at `https://www.infragistics.com/products/ignite-ui-react/react/components/` — the left sidebar groups components by category -2. **Use the naming convention**: React components use the `Igr` prefix followed by PascalCase name (e.g., `IgrDateRangePicker`, `IgrNavDrawer`). The docs URL typically uses kebab-case: `components/scheduling/date-range-picker` -3. **Check the examples repo** at [igniteui-react-examples](https://github.com/IgniteUI/igniteui-react-examples) for working sample applications +- `list_components(framework: 'react')` — browse the full component catalogue, optionally narrowed with a filter keyword +- `get_doc(framework: 'react', name)` — full documentation, prop tables, and code examples for a component +- `search_docs(query, framework: 'react')` — full-text search for features or behaviors (e.g., `"date picker range selection"`) +- `search_api(query, platform: 'react')` — look up specific classes, properties, or methods diff --git a/skills/igniteui-react-components/reference/EVENT-HANDLING.md b/skills/igniteui-react-components/reference/EVENT-HANDLING.md index 6729b6d..5da9b55 100644 --- a/skills/igniteui-react-components/reference/EVENT-HANDLING.md +++ b/skills/igniteui-react-components/reference/EVENT-HANDLING.md @@ -35,6 +35,8 @@ function MyForm() { ## Common Event Props +> For component-specific event signatures and detail types, call `get_api_reference('react','', 'events')` — e.g. `get_api_reference('react', 'IgrCombo', 'events')`. + | Component | Event Prop | Fires When | |---|---|---| | `IgrButton` | `onClick` | Button is clicked | diff --git a/skills/igniteui-react-customize-theme/SKILL.md b/skills/igniteui-react-customize-theme/SKILL.md index 9f59d35..d56d05f 100644 --- a/skills/igniteui-react-customize-theme/SKILL.md +++ b/skills/igniteui-react-customize-theme/SKILL.md @@ -106,14 +106,13 @@ import './index.css'; // Overrides second ## Theming Architecture -The Ignite UI theming system is built on four pillars: +The Ignite UI theming system is built on **palette**, **typography**, **elevations**, and per-component **schemas**. Use the MCP theming tools at the right stage: -| Concept | Purpose | -|---|---| -| **Palette** | Color system with primary, secondary, surface, gray, info, success, warn, error families | -| **Typography** | Font family, type scale (h1–h6, subtitle, body, button, caption, overline) | -| **Elevations** | Box-shadow levels 0–24 for visual depth | -| **Schema** | Per-component recipes mapping palette colors to component tokens | +- **`create_palette`** — when the user provides brand colors; generates luminance-safe shades for all palette roles +- **`create_theme`** — generates the complete global theme CSS; call after `create_palette` +- **`create_typography`** — when the user wants to change fonts, type scale, or weights +- **`create_elevations`** — when the user wants to adjust shadow depth +- **`get_component_design_tokens`** — before writing any component-level CSS; retrieves the current token names for a specific component ### Design Systems @@ -182,10 +181,3 @@ See [CSS-THEMING.md](./reference/CSS-THEMING.md) for approaches: class toggle, m 4. **Palette shades**: 50 = lightest, 900 = darkest 5. **Surface color must match variant** — light color for `light`, dark for `dark` 6. **Never hardcode colors after palette generation** - -## Additional Resources - -- [Ignite UI for React — Themes Overview](https://www.infragistics.com/products/ignite-ui-react/react/components/themes/overview) -- [igniteui-theming npm package](https://www.npmjs.com/package/igniteui-theming) -- [CSS Custom Properties on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) -- [CSS ::part() on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) diff --git a/skills/igniteui-react-customize-theme/reference/CSS-THEMING.md b/skills/igniteui-react-customize-theme/reference/CSS-THEMING.md index 02fce34..77e5f2f 100644 --- a/skills/igniteui-react-customize-theme/reference/CSS-THEMING.md +++ b/skills/igniteui-react-customize-theme/reference/CSS-THEMING.md @@ -148,6 +148,8 @@ For truly dynamic one-off overrides: Override individual component appearance using CSS custom properties. +> **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. + ```css /* Target the Ignite UI web component tag name */ igc-avatar { diff --git a/skills/igniteui-react-customize-theme/reference/MCP-SERVER.md b/skills/igniteui-react-customize-theme/reference/MCP-SERVER.md index ecc05fd..eae57e7 100644 --- a/skills/igniteui-react-customize-theme/reference/MCP-SERVER.md +++ b/skills/igniteui-react-customize-theme/reference/MCP-SERVER.md @@ -62,14 +62,6 @@ Edit the Claude Desktop config file: 3. Set Command to `npx` and Arguments to `igniteui-theming igniteui-theming-mcp` 4. Click OK and restart the AI Assistant -## MCP Server Workflow - -1. **Detect platform**: Call `detect_platform` — it will detect `webcomponents` from `package.json` -2. **Generate a theme**: Call `create_theme` with your desired colors and design system -3. **Customize components**: Call `get_component_design_tokens` first, then `create_component_theme` with palette token values -4. **Get color references**: Call `get_color` to get the correct CSS custom property for any palette shade -5. **Adjust layout**: Call `set_size`, `set_spacing`, or `set_roundness` - ## File Safety Rule > **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. diff --git a/skills/igniteui-react-generate-from-image-design/reference/component-mapping.md b/skills/igniteui-react-generate-from-image-design/reference/component-mapping.md index 414972a..80e1c0b 100644 --- a/skills/igniteui-react-generate-from-image-design/reference/component-mapping.md +++ b/skills/igniteui-react-generate-from-image-design/reference/component-mapping.md @@ -11,17 +11,19 @@ - [Package Requirements](#package-requirements) - [Import Patterns](#import-patterns) +> **For component API details** (props, events, slots, examples), call `get_doc` with the doc name from `list_components` results and `framework: 'react'`. Use `search_api` for specific property lookup. + ## Dashboard & Layout Components -| UI Pattern | Ignite UI Component | Key Properties | -|---|---|---| -| Top navigation bar | `IgrNavbar` | children plus named action/content slots | -| Side navigation | `IgrNavDrawer` | `open`, drawer items, `icon` and `content` slots | -| Content cards/panels | `IgrCard` | `IgrCardHeader`, `IgrCardContent`, `IgrCardActions` | -| Tabbed content | `IgrTabs` + `IgrTab` | `label`, `slot="label"` | -| Accordion sections | `IgrAccordion` | `IgrExpansionPanel` children | -| Split layouts | `IgrSplitter` | resizable panes when splitter chrome is visible | -| Tile dashboard | `IgrTileManager` | drag/resize tiles | +| UI Pattern | Ignite UI Component | +|---|---| +| Top navigation bar | `IgrNavbar` | +| Side navigation | `IgrNavDrawer` | +| Content cards/panels | `IgrCard` | +| Tabbed content | `IgrTabs` + `IgrTab` | +| Accordion sections | `IgrAccordion` | +| Split layouts | `IgrSplitter` | +| Tile dashboard | `IgrTileManager` | Decision rule: @@ -29,33 +31,17 @@ Decision rule: - 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 `