feat(skills): updating product skills with igniteui-cli mcp

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 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 component-related work.
+> Do NOT skip this step or ask the user to do it manually.
+
+## 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.
 
 ### 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

skills/igniteui-react-components/reference/CHARTS-GRIDS.md

@@ -1,5 +1,8 @@
 # Charts, Gauges, Maps & Grid Lite
 
+## Overview
+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
 
 > **⚠️ 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).

skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md

@@ -1,5 +1,8 @@
 # Component Catalogue
 
+## 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:

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.

skills/igniteui-react-customize-theme/SKILL.md

@@ -1,17 +1,33 @@
 ---
 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
+- A theme CSS file imported in your entry point (see [igniteui-react-components](../igniteui-react-components/SKILL.md))
+- The **Ignite UI Theming MCP server** (`igniteui-theming`)
+
+> **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.
+
 ## 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.
 
@@ -23,12 +39,9 @@ The skill also covers component-level theming, layout controls (spacing, sizing,
 - "How do I scope a theme to a specific section of my React app?"
 - "Set up Material Design theming for Ignite UI components"
 
-## Prerequisites
+## Setting Up the Theming MCP Server
 
-- 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
+> **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
 
@@ -52,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 |
 
@@ -169,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