From 00bc49c063514585b7f185b1c37b0b248ead45c5 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Fri, 24 Apr 2026 11:16:12 +0300 Subject: [PATCH 01/10] feat(skills): updating product skills with igniteui-cli mcp --- skills/igniteui-react-components/SKILL.md | 30 +++-- .../reference/CHARTS-GRIDS.md | 3 + .../reference/COMPONENT-CATALOGUE.md | 3 + .../reference/MCP-SERVER.md | 77 +++++++++++ .../igniteui-react-customize-theme/SKILL.md | 23 +++- .../reference/SASS-THEMING.md | 125 ------------------ 6 files changed, 123 insertions(+), 138 deletions(-) create mode 100644 skills/igniteui-react-components/reference/MCP-SERVER.md delete mode 100644 skills/igniteui-react-customize-theme/reference/SASS-THEMING.md diff --git a/skills/igniteui-react-components/SKILL.md b/skills/igniteui-react-components/SKILL.md index e9d662e..2567d48 100644 --- a/skills/igniteui-react-components/SKILL.md +++ b/skills/igniteui-react-components/SKILL.md @@ -6,14 +6,24 @@ user-invocable: true # Ignite UI for React Components -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. +## Prerequisites -## Before You Answer +- The **Ignite UI CLI MCP server** (`igniteui-cli`) available as a tool provider -- 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. +> **AGENT INSTRUCTION — MCP Server Setup (REQUIRED)** +> +> Before using any theming tools, you MUST verify the MCP server is available +> by calling `list_components`. If the tool is not available or the call fails, +> you MUST automatically configure it by following the setup process steps described below. +> +> After writing the file, inform the user that the MCP server has been +> configured and they may need to reload the editor for the tools to activate. +> Start the MCP server and wait for that MCP server to start before continuing the theming related work. +> Do NOT skip this step or ask the user to do it manually. + +## Setting Up the Theming MCP Server + +> **Full setup instructions for VS Code, Cursor, Claude Desktop, and JetBrains IDEs are in [`references/MCP-SERVER.md`](./references/MCP-SERVER.md).** Read that file for editor-specific configuration steps and verification. ### Package Routing @@ -76,11 +86,9 @@ This skill is organized into focused reference files. Load the appropriate file --- -## 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. +## Quick Start -### 1. Install Core UI Package +### 1. Install ```bash npm install igniteui-react @@ -163,7 +171,7 @@ Use [COMPONENT-CATALOGUE.md](./reference/COMPONENT-CATALOGUE.md) to map any UI n ## Best Practices -1. **Use the package routing table first** +1. **Start with the MIT package** (`igniteui-react`) — it covers most common UI needs 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/skills/igniteui-react-components/reference/CHARTS-GRIDS.md b/skills/igniteui-react-components/reference/CHARTS-GRIDS.md index 7d3aadb..caa7bbe 100644 --- a/skills/igniteui-react-components/reference/CHARTS-GRIDS.md +++ b/skills/igniteui-react-components/reference/CHARTS-GRIDS.md @@ -1,5 +1,8 @@ # Charts, Gauges, Maps & Grid Lite +## Overview +This reference give high-level guidance on charts and grids, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific chart component or feature you're interested in. + ## Module Registration > **⚠️ IMPORTANT:** Unlike core UI components (from `igniteui-react`), chart, gauge, and map components from `igniteui-react-charts`, `igniteui-react-gauges`, and `igniteui-react-maps` **require explicit module registration** before use. You must import the corresponding `*Module` class and call `.register()` at the module level (outside the component function). diff --git a/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md b/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md index 862b99c..a7fae18 100644 --- a/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md +++ b/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md @@ -1,5 +1,8 @@ # Component Catalogue +## Overview +This reference give high-level guidance on Ignite UI for React components, their key features, and common use cases. For 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: diff --git a/skills/igniteui-react-components/reference/MCP-SERVER.md b/skills/igniteui-react-components/reference/MCP-SERVER.md new file mode 100644 index 0000000..3c05b17 --- /dev/null +++ b/skills/igniteui-react-components/reference/MCP-SERVER.md @@ -0,0 +1,77 @@ +# Setting Up the Ignite UI CLI MCP Server + +> **Part of the [`igniteui-react-components`](../SKILL.md) skill hub.** + +## Contents + +- [VS Code](#vs-code) +- [Cursor](#cursor) +- [Claude Desktop](#claude-desktop) +- [WebStorm / JetBrains IDEs](#webstorm--jetbrains-ides) +- [Verifying the Setup](#verifying-the-setup) + +The Ignite UI CLI MCP server enables AI assistants to generate production-ready theming code. It must be configured in your editor before the theming tools become available. + +## VS Code + +Create or edit `.vscode/mcp.json` in your project: + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + } + } +} +``` + +This works whether `igniteui-cli` is installed locally in `node_modules` or needs to be pulled from the npm registry — `npx -y` handles both cases. + +## Cursor + +Create or edit `.cursor/mcp.json`: + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + } + } +} +``` + +## Claude Desktop + +Edit the Claude Desktop config file: +- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` +- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + } + } +} +``` + +## WebStorm / JetBrains IDEs + +1. Go to **Settings → Tools → AI Assistant → MCP Servers** +2. Click **+ Add MCP Server** +3. Set Command to `npx` and Arguments to `igniteui-cli@next mcp` +4. Click OK and restart the AI Assistant + +## Verifying the Setup + +After configuring the MCP server, ask your AI assistant: + +> "List all available Ignite UI components" + +If the MCP server is running, the `list_components` tool will return all available components for the detected framework. diff --git a/skills/igniteui-react-customize-theme/SKILL.md b/skills/igniteui-react-customize-theme/SKILL.md index 084c06c..8fb9f75 100644 --- a/skills/igniteui-react-customize-theme/SKILL.md +++ b/skills/igniteui-react-customize-theme/SKILL.md @@ -6,12 +6,31 @@ user-invocable: true # Ignite UI for React — Theming Skill +## Prerequisites + +- A React project with `igniteui-react` installed +- The **Ignite UI Theming MCP server** (`igniteui-theming`) available as a tool provider + +> **AGENT INSTRUCTION — MCP Server Setup (REQUIRED)** +> +> Before using any theming tools, you MUST verify the MCP server is available +> by calling `detect_platform`. If the tool is not available or the call fails, +> you MUST automatically configure it by following the setup process steps described below. +> +> After writing the file, inform the user that the MCP server has been +> configured and they may need to reload the editor for the tools to activate. +> Start the MCP server and wait for that MCP server to start before continuing the theming related work. +> Do NOT skip this step or ask the user to do it manually. + +## Setting Up the Theming MCP Server + +> **Full setup instructions for VS Code, Cursor, Claude Desktop, and JetBrains IDEs are in [`references/MCP-SERVER.md`](./references/MCP-SERVER.md).** Read that file for editor-specific configuration steps and verification. + ## Description -This skill teaches AI agents how to theme Ignite UI for React applications. Two approaches are supported: +This skill teaches AI agents how to theme Ignite UI for React applications. One approach is supported: - **CSS custom properties** — works in any project without additional build tooling -- **Sass** — available when the project has Sass configured; provides the full palette/typography/elevation API The skill also covers component-level theming, layout controls (spacing, sizing, roundness), and how to use the **Ignite UI Theming MCP server** for AI-assisted code generation — all in a React application context. diff --git a/skills/igniteui-react-customize-theme/reference/SASS-THEMING.md b/skills/igniteui-react-customize-theme/reference/SASS-THEMING.md deleted file mode 100644 index 2ce76fd..0000000 --- a/skills/igniteui-react-customize-theme/reference/SASS-THEMING.md +++ /dev/null @@ -1,125 +0,0 @@ -# Sass Theming - -> Requires Sass configured in the project (e.g., `sass` in `devDependencies` and Vite/webpack configured to handle `.scss` files). - -## Basic Setup - -```scss -// src/styles.scss -@use 'igniteui-theming' as *; - -// 1. Define a palette -$my-palette: palette( - $primary: #1976D2, - $secondary: #FF9800, - $surface: #FAFAFA -); - -// 2. Apply the palette -@include palette($my-palette); - -// 3. Optional: Typography -@include typography($font-family: "'Roboto', sans-serif"); - -// 4. Optional: Elevations -@include elevations(); - -// 5. Optional: Spacing -@include spacing(); -``` - -Import in your React entry point: - -```tsx -// main.tsx -import './styles.scss'; -``` - -## Dark Theme - -For dark themes, use a dark surface color and a dark schema: - -```scss -@use 'igniteui-theming' as *; - -$dark-palette: palette( - $primary: #90CAF9, - $secondary: #FFB74D, - $surface: #121212 -); - -@include palette($dark-palette, $schema: $dark-material-schema); -``` - -> **Important:** Use `@use 'igniteui-theming'` — not `igniteui-angular/theming` or Angular-specific `core()` / `theme()` mixins. - -## Component-Level Theming with Sass - -When Sass is configured, use component theme functions and the `tokens` mixin: - -```scss -@use 'igniteui-theming' as *; - -$custom-avatar: avatar-theme( - $schema: $light-material-schema, - $background: var(--ig-primary-500), - $color: var(--ig-primary-500-contrast) -); - -igc-avatar { - @include tokens($custom-avatar); -} -``` - -## Light/Dark Toggle with Sass - -```scss -@use 'igniteui-theming' as *; - -$light-palette: palette($primary: #1976D2, $secondary: #FF9800, $surface: #FAFAFA); -$dark-palette: palette($primary: #90CAF9, $secondary: #FFB74D, $surface: #121212); - -@include typography($font-family: "'Roboto', sans-serif"); -@include elevations(); - -// Light is default -@include palette($light-palette, $schema: $light-material-schema); - -// Dark via class on a container or -.dark-theme { - @include palette($dark-palette, $schema: $dark-material-schema); -} -``` - -## Theming Architecture - -The Ignite UI theming system is built on four pillars: - -| Concept | Purpose | -|---|---| -| **Palette** | Color system with primary, secondary, surface, gray, info, success, warn, error families, each with shades 50–900 + accents A100–A700 | -| **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 | - -### Design Systems - -Four built-in design systems are available: - -- **Material** (default) — Material Design 3 -- **Bootstrap** — Bootstrap-inspired -- **Fluent** — Microsoft Fluent Design -- **Indigo** — Infragistics Indigo Design - -Each has light and dark variants (e.g., `$light-material-schema`, `$dark-fluent-schema`). - -### Palette Shades - -- Shades 50 = lightest, 900 = darkest for all chromatic colors -- Surface color must match the variant — light color for `light`, dark color for `dark` - -## Key Rules - -1. **Sass**: Use `@use 'igniteui-theming'` — not `igniteui-angular/theming` -2. **Sass**: Component themes use `@include tokens($theme)` inside a selector -3. **Never hardcode colors after palette generation** — use `var(--ig--)` palette tokens everywhere From 1ce8b42724668cc8c17a58629df1c8d43ef3a982 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Fri, 24 Apr 2026 11:19:53 +0300 Subject: [PATCH 02/10] fix(skills): charts and grids reference --- skills/igniteui-react-components/reference/CHARTS-GRIDS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/skills/igniteui-react-components/reference/CHARTS-GRIDS.md b/skills/igniteui-react-components/reference/CHARTS-GRIDS.md index caa7bbe..0619caa 100644 --- a/skills/igniteui-react-components/reference/CHARTS-GRIDS.md +++ b/skills/igniteui-react-components/reference/CHARTS-GRIDS.md @@ -1,7 +1,7 @@ # Charts, Gauges, Maps & Grid Lite ## Overview -This reference give high-level guidance on charts and grids, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific chart component or feature you're interested in. +This reference give high-level guidance on charts and grids, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific chart, or grid component, or feature you're interested in. ## Module Registration From 8987486fb35aef774d3b7ccb7be53131a5610e4a Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Fri, 24 Apr 2026 12:22:18 +0300 Subject: [PATCH 03/10] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- skills/igniteui-react-components/SKILL.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/skills/igniteui-react-components/SKILL.md b/skills/igniteui-react-components/SKILL.md index 2567d48..6041ac7 100644 --- a/skills/igniteui-react-components/SKILL.md +++ b/skills/igniteui-react-components/SKILL.md @@ -23,7 +23,7 @@ user-invocable: true ## Setting Up the Theming MCP Server -> **Full setup instructions for VS Code, Cursor, Claude Desktop, and JetBrains IDEs are in [`references/MCP-SERVER.md`](./references/MCP-SERVER.md).** Read that file for editor-specific configuration steps and verification. +> **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 From f39bdfec2af53cf942deb0363d8d5ce2df3569a1 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Fri, 24 Apr 2026 12:22:56 +0300 Subject: [PATCH 04/10] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- .../igniteui-react-components/reference/COMPONENT-CATALOGUE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md b/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md index a7fae18..498e587 100644 --- a/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md +++ b/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md @@ -1,7 +1,7 @@ # Component Catalogue ## Overview -This reference give high-level guidance on Ignite UI for React components, their key features, and common use cases. For full list of components, call `list_components` from `igniteui-cli` with the specific chart, or grid component, or feature you're interested in. +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 From 18605720a39a6376d0157ad65088a695778d4928 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Fri, 24 Apr 2026 12:23:13 +0300 Subject: [PATCH 05/10] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- skills/igniteui-react-components/reference/CHARTS-GRIDS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/skills/igniteui-react-components/reference/CHARTS-GRIDS.md b/skills/igniteui-react-components/reference/CHARTS-GRIDS.md index 0619caa..9b80141 100644 --- a/skills/igniteui-react-components/reference/CHARTS-GRIDS.md +++ b/skills/igniteui-react-components/reference/CHARTS-GRIDS.md @@ -1,7 +1,7 @@ # Charts, Gauges, Maps & Grid Lite ## Overview -This reference give high-level guidance on charts and grids, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific chart, or grid component, or feature you're interested in. +This reference gives high-level guidance on charts and grids, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific chart, or grid component, or feature you're interested in. ## Module Registration From 6e6b63ac400700ba7b146bedfdc2dd78e7561586 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Fri, 24 Apr 2026 12:23:25 +0300 Subject: [PATCH 06/10] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- skills/igniteui-react-customize-theme/SKILL.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/skills/igniteui-react-customize-theme/SKILL.md b/skills/igniteui-react-customize-theme/SKILL.md index 8fb9f75..e68c46b 100644 --- a/skills/igniteui-react-customize-theme/SKILL.md +++ b/skills/igniteui-react-customize-theme/SKILL.md @@ -24,7 +24,7 @@ user-invocable: true ## Setting Up the Theming MCP Server -> **Full setup instructions for VS Code, Cursor, Claude Desktop, and JetBrains IDEs are in [`references/MCP-SERVER.md`](./references/MCP-SERVER.md).** Read that file for editor-specific configuration steps and verification. +> **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. ## Description From 2128ec0be0b5d034dea2f21107ea6bb253786de6 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Fri, 24 Apr 2026 12:24:39 +0300 Subject: [PATCH 07/10] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- skills/igniteui-react-components/SKILL.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/skills/igniteui-react-components/SKILL.md b/skills/igniteui-react-components/SKILL.md index 6041ac7..60ead52 100644 --- a/skills/igniteui-react-components/SKILL.md +++ b/skills/igniteui-react-components/SKILL.md @@ -12,16 +12,16 @@ user-invocable: true > **AGENT INSTRUCTION — MCP Server Setup (REQUIRED)** > -> Before using any theming tools, you MUST verify the MCP server is available +> Before using the Ignite UI CLI MCP tools, you MUST verify the MCP server is available > by calling `list_components`. If the tool is not available or the call fails, > you MUST automatically configure it by following the setup process steps described below. > > After writing the file, inform the user that the MCP server has been > configured and they may need to reload the editor for the tools to activate. -> Start the MCP server and wait for that MCP server to start before continuing the theming related work. +> Start the MCP server and wait for that MCP server to start before continuing the component-related work. > Do NOT skip this step or ask the user to do it manually. -## Setting Up the Theming MCP Server +## Setting Up the Ignite UI CLI MCP Server > **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. From 49fad40aac2c329d244b77a007eb07d6e4f3ee41 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 24 Apr 2026 09:27:24 +0000 Subject: [PATCH 08/10] fix(skills): reconcile Sass theming references and consolidate prerequisites in customize-theme skill Agent-Logs-Url: https://github.com/IgniteUI/igniteui-react/sessions/06b07ae2-881b-4556-a701-284d475dc167 Co-authored-by: kdinev <1472513+kdinev@users.noreply.github.com> --- .../igniteui-react-customize-theme/SKILL.md | 43 ++++++++----------- 1 file changed, 17 insertions(+), 26 deletions(-) diff --git a/skills/igniteui-react-customize-theme/SKILL.md b/skills/igniteui-react-customize-theme/SKILL.md index e68c46b..e531647 100644 --- a/skills/igniteui-react-customize-theme/SKILL.md +++ b/skills/igniteui-react-customize-theme/SKILL.md @@ -1,31 +1,11 @@ --- name: igniteui-react-customize-theme -description: This skill customizes Ignite UI for React component styling using CSS custom properties, Sass, and the full theming system and should be used when applying brand colors, dark mode, component-level overrides, or scoped themes in a React application +description: This skill customizes Ignite UI for React component styling using CSS custom properties and the full theming system and should be used when applying brand colors, dark mode, component-level overrides, or scoped themes in a React application user-invocable: true --- # Ignite UI for React — Theming Skill -## Prerequisites - -- A React project with `igniteui-react` installed -- The **Ignite UI Theming MCP server** (`igniteui-theming`) available as a tool provider - -> **AGENT INSTRUCTION — MCP Server Setup (REQUIRED)** -> -> Before using any theming tools, you MUST verify the MCP server is available -> by calling `detect_platform`. If the tool is not available or the call fails, -> you MUST automatically configure it by following the setup process steps described below. -> -> After writing the file, inform the user that the MCP server has been -> configured and they may need to reload the editor for the tools to activate. -> Start the MCP server and wait for that MCP server to start before continuing the theming related work. -> Do NOT skip this step or ask the user to do it manually. - -## Setting Up the Theming MCP Server - -> **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. - ## Description This skill teaches AI agents how to theme Ignite UI for React applications. One approach is supported: @@ -46,9 +26,23 @@ The skill also covers component-level theming, layout controls (spacing, sizing, - A React project with `igniteui-react` installed - A theme CSS file imported in your entry point (see [igniteui-react-components](../igniteui-react-components/SKILL.md)) -- **Optional**: Sass configured in the project (enables the Sass-based theming API) - **Optional**: The **Ignite UI Theming MCP server** (`igniteui-theming`) for AI-assisted code generation +> **AGENT INSTRUCTION — MCP Server Setup (REQUIRED)** +> +> Before using any theming tools, you MUST verify the MCP server is available +> by calling `detect_platform`. If the tool is not available or the call fails, +> you MUST automatically configure it by following the setup process steps described below. +> +> After writing the file, inform the user that the MCP server has been +> configured and they may need to reload the editor for the tools to activate. +> Start the MCP server and wait for that MCP server to start before continuing the theming related work. +> Do NOT skip this step or ask the user to do it manually. + +## Setting Up the Theming MCP Server + +> **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. + ## Related Skills - [igniteui-react-components](../igniteui-react-components/SKILL.md) — Choose the right components and set up your React project @@ -71,7 +65,6 @@ This skill is organized into focused sections. Refer to the appropriate file for | Topic | File | When to Use | |---|---|---| | CSS Theming | [CSS-THEMING.md](./reference/CSS-THEMING.md) | Pre-built themes, CSS custom properties, scoped overrides, layout controls, light/dark switching | -| Sass Theming | [SASS-THEMING.md](./reference/SASS-THEMING.md) | Sass-based theming with palette(), component theme functions | | MCP Server | [MCP-SERVER.md](./reference/MCP-SERVER.md) | AI-assisted theming code generation | | Troubleshooting | [TROUBLESHOOTING.md](./reference/TROUBLESHOOTING.md) | Common issues and solutions | @@ -188,9 +181,7 @@ See [CSS-THEMING.md](./reference/CSS-THEMING.md) for approaches: class toggle, m 3. **Always call `get_component_design_tokens` before `create_component_theme`** 4. **Palette shades**: 50 = lightest, 900 = darkest 5. **Surface color must match variant** — light color for `light`, dark for `dark` -6. **Sass**: Use `@use 'igniteui-theming'` — not `igniteui-angular/theming` -7. **Sass**: Component themes use `@include tokens($theme)` inside a selector -8. **Never hardcode colors after palette generation** +6. **Never hardcode colors after palette generation** ## Additional Resources From 45d1d3284044f1de41e6350737ed791f8d07a1ac Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Fri, 24 Apr 2026 13:56:56 +0300 Subject: [PATCH 09/10] Update skills/igniteui-react-customize-theme/SKILL.md --- skills/igniteui-react-customize-theme/SKILL.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/skills/igniteui-react-customize-theme/SKILL.md b/skills/igniteui-react-customize-theme/SKILL.md index e531647..1b2351e 100644 --- a/skills/igniteui-react-customize-theme/SKILL.md +++ b/skills/igniteui-react-customize-theme/SKILL.md @@ -26,7 +26,7 @@ The skill also covers component-level theming, layout controls (spacing, sizing, - A React project with `igniteui-react` installed - A theme CSS file imported in your entry point (see [igniteui-react-components](../igniteui-react-components/SKILL.md)) -- **Optional**: The **Ignite UI Theming MCP server** (`igniteui-theming`) for AI-assisted code generation +- The **Ignite UI Theming MCP server** (`igniteui-theming`) > **AGENT INSTRUCTION — MCP Server Setup (REQUIRED)** > From dd46ee11224f8bdf5d5761b890d4b99e792d49bd Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Fri, 24 Apr 2026 14:01:34 +0300 Subject: [PATCH 10/10] fix(skills): adding theming prerequisites on top --- .../igniteui-react-customize-theme/SKILL.md | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/skills/igniteui-react-customize-theme/SKILL.md b/skills/igniteui-react-customize-theme/SKILL.md index 1b2351e..9f59d35 100644 --- a/skills/igniteui-react-customize-theme/SKILL.md +++ b/skills/igniteui-react-customize-theme/SKILL.md @@ -6,22 +6,6 @@ user-invocable: true # Ignite UI for React — Theming Skill -## Description - -This skill teaches AI agents how to theme Ignite UI for React applications. One approach is supported: - -- **CSS custom properties** — works in any project without additional build tooling - -The skill also covers component-level theming, layout controls (spacing, sizing, roundness), and how to use the **Ignite UI Theming MCP server** for AI-assisted code generation — all in a React application context. - -## Example Usage - -- "How do I change the primary color in my Ignite UI React app?" -- "Apply a dark theme to my React app" -- "Customize the grid header colors" -- "How do I scope a theme to a specific section of my React app?" -- "Set up Material Design theming for Ignite UI components" - ## Prerequisites - A React project with `igniteui-react` installed @@ -39,6 +23,22 @@ The skill also covers component-level theming, layout controls (spacing, sizing, > Start the MCP server and wait for that MCP server to start before continuing the theming related work. > Do NOT skip this step or ask the user to do it manually. +## Description + +This skill teaches AI agents how to theme Ignite UI for React applications. One approach is supported: + +- **CSS custom properties** — works in any project without additional build tooling + +The skill also covers component-level theming, layout controls (spacing, sizing, roundness), and how to use the **Ignite UI Theming MCP server** for AI-assisted code generation — all in a React application context. + +## Example Usage + +- "How do I change the primary color in my Ignite UI React app?" +- "Apply a dark theme to my React app" +- "Customize the grid header colors" +- "How do I scope a theme to a specific section of my React app?" +- "Set up Material Design theming for Ignite UI components" + ## Setting Up the Theming MCP Server > **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.