igniteui-cli 15.1.0 → 15.2.0

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-theming/SKILL.md

@@ -0,0 +1,259 @@
+---
+name: igniteui-blazor-theming
+description: "Covers theming and visual customization for Ignite UI for Blazor: choosing and switching built-in themes (Bootstrap, Material, Fluent, Indigo - light and dark variants), customizing component appearance with CSS custom properties (design tokens), using the igniteui-theming MCP server to generate component themes and palettes, applying custom palettes, setting roundness/spacing/sizing tokens globally, dark mode switching, scoped component theming, and CSS parts. Use when users ask about changing the look and feel of Ignite UI Blazor components, applying a color scheme, generating CSS variables, using CSS parts, or customizing design tokens. Do NOT use for grid data features or component configuration - use igniteui-blazor-grids or igniteui-blazor-components instead."
+user-invocable: true
+---
+
+# Ignite UI for Blazor - Theming and Styling
+
+## Description
+
+This skill teaches AI agents how to theme Ignite UI for Blazor applications using built-in CSS theme files, CSS custom properties, CSS shadow parts, and the **Ignite UI Theming MCP server**. It covers theme switching, palette generation, component-level design tokens, global layout tokens, and scoped CSS customization.
+
+## Prerequisites
+
+- A Blazor project using Ignite UI for Blazor components
+- A theme CSS file linked in the host page (see [`references/common-patterns.md`](./references/common-patterns.md))
+- 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 any lightweight theming MCP tool. 
+> This skill is already scoped to Ignite UI for Blazor, so use `platform: "blazor"`
+> in theming tool calls. If the theming 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-setup.md`](./references/mcp-setup.md).** Read that file for editor-specific configuration steps and verification.
+
+## Theming Architecture
+
+| Layer | Purpose |
+|---|---|
+| Built-in theme CSS | Baseline Bootstrap, Material, Fluent, or Indigo styling in light/dark variants |
+| Palette tokens | Global color CSS variables used across components |
+| Component design tokens | Component-scoped CSS custom properties generated or discovered with MCP |
+| CSS shadow parts | Fine-grained internal element styling only when the component doc lists supported parts |
+| Layout tokens | Global roundness, spacing, and size controls generated by MCP tools |
+
+Ignite UI for Blazor theming in this skill is CSS-first. Agents should generate or edit CSS custom properties and selectors for normal app styling.
+
+## Built-In Themes
+
+Use built-in theme CSS files for the baseline visual system. Supported design systems are Bootstrap, Material, Fluent, and Indigo, with light and dark variants.
+
+Confirm exact file paths in [`references/common-patterns.md`](./references/common-patterns.md) before writing host-page markup. Only one built-in theme CSS file should be active at a time.
+
+## Color Palettes
+
+Use `create_palette(platform: "blazor", output: "css", ...)` for a generated palette from seed colors. Use `create_custom_palette(platform: "blazor", output: "css", ...)` only when the user needs explicit control over individual shade values.
+
+Palette CSS belongs in `:root` and must be loaded after the Ignite UI built-in theme CSS.
+
+For simple palette references, use `get_color` instead of writing color variable names from memory:
+
+```
+get_color(color: "primary", variant: "600")
+```
+
+Use `contrast: true` when you need the matching text color token.
+
+Raw color values are acceptable in the initial palette seed call. After the palette exists, component themes and custom CSS should use palette CSS custom properties wherever the desired color belongs to the theme.
+
+Palette shades: chromatic shades use `50` as the lightest shade and `900` as the darkest shade. Do not invert chromatic colors for dark themes; only gray is inverted for dark variants.
+
+Surface color must match the variant: use a light surface for `variant: "light"` and a dark surface for `variant: "dark"`.
+
+## Component-Level Theming
+
+For component styling, first call `get_component_design_tokens(component: "...")`, then call `create_component_theme(platform: "blazor", component: "...", tokens: {...}, output: "css")` or write CSS using the returned token names. Do not use `overrides`; the MCP argument is `tokens`.
+
+For components with variants, query the exact variant whenever possible. For example, use `contained-button`, `flat-button`, `outlined-button`, or `fab-button` instead of generic `button` before generating a component theme.
+
+Use palette token references such as `var(--ig-primary-500)` and `var(--ig-primary-500-contrast)` after a palette has been established. Do not pass raw hex/RGB/HSL values to component theme tokens unless the value is intentionally outside the theme palette.
+
+For CSS parts, call the component's Blazor `get_doc` entry first. Do not say a component exposes CSS parts unless the Blazor doc confirms the exact part names.
+
+### Discovering Available Tokens
+
+Each component has its own set of design tokens. Before theming a component, call `get_component_design_tokens` and use only token names returned by the tool.
+
+### Compound Components
+
+Some components are compound and may involve internally themed child components. When `get_component_design_tokens` returns compound guidance, follow the checklist from the tool response.
+
+For standard compound components, generate the related themes listed by the tool and scope them under the parent component selector. For composed compound components, use only the primary parent tokens unless the user explicitly requests a specific refinement token.
+
+## Layout Controls
+
+Use MCP layout tools for global or scoped layout changes:
+
+| Goal | MCP tool | Required value shape |
+|---|---|---|
+| Roundness | `set_roundness` | `radiusFactor: 0..1` |
+| Spacing | `set_spacing` | `spacing: number` plus optional `inline` / `block` |
+| Size | `set_size` | `size: "small" | "medium" | "large"` |
+
+Do not use legacy size names such as `compact`, `cosy`, or `comfortable` for Blazor theming tools.
+
+## Using the Theming MCP Server
+
+The Ignite UI Theming MCP server provides code generation and reference tools for Blazor-ready CSS custom properties. Agents can see tool schemas directly, so this section only records the Ignite UI for Blazor theming workflow and product-specific constraints.
+
+> **IMPORTANT - File Safety Rule**: When generating or updating theme code, **never overwrite existing style files directly**. Instead, propose the changes as an update and let the user review and approve before writing to disk. If an `app.css`, `site.css`, `.razor.css`, or other target style file already exists, show the generated code as a diff or suggestion rather than replacing the file contents. This prevents accidental loss of custom styles the user has already written.
+
+Always follow this workflow:
+
+### Step 1 - Verify Blazor Theming Context
+
+```
+Tool: read_resource
+Params: { uri: "theming://platforms/blazor" }
+```
+
+Use this as the lightweight availability check and platform reference for Blazor theming tasks.
+
+### Step 2 - Generate a Palette
+
+> **Note:** For Blazor (CSS-first, no Sass pipeline), use `create_palette` with `output: "css"` to get CSS custom properties directly. Do NOT use `create_theme` for Blazor — it always outputs Sass which requires a compilation step not present in standard Blazor projects. The `create_palette` param names are `primary`/`secondary`/`surface` (not `primaryColor`/`secondaryColor`/`surfaceColor` — those belong to `create_theme`).
+
+```
+Tool: create_palette
+Params: {
+  platform: "blazor",
+  output: "css",
+  primary: "#3f51b5",
+  secondary: "#e91e63",
+  surface: "#ffffff",
+  variant: "light"
+}
+```
+
+For dark themes, use a dark surface color and `variant: "dark"`. Read `theming://guidance/colors/rules` first when surface or gray color choices are unclear.
+
+### Step 3 - Customize Individual Components
+
+```
+Tool: get_component_design_tokens
+Params: { component: "contained-button" }
+```
+
+Then generate CSS using only valid token names returned by the tool:
+
+```
+Tool: create_component_theme
+Params: {
+  platform: "blazor",
+  output: "css",
+  component: "contained-button",
+  tokens: {
+    "background": "var(--ig-primary-500)",
+    "foreground": "var(--ig-primary-500-contrast)"
+  }
+}
+```
+
+Use `tokens`, not `overrides`. If the token discovery response distinguishes primary tokens from refinement tokens, use only the primary tokens unless the user explicitly requested the refined state or subpart.
+
+### Step 4 - Adjust Global Layout Tokens
+
+```
+Tool: set_roundness
+Params: { platform: "blazor", output: "css", radiusFactor: 0.5 }
+
+Tool: set_spacing
+Params: { platform: "blazor", output: "css", spacing: 1.25 }
+
+Tool: set_size
+Params: { platform: "blazor", output: "css", size: "small" }
+```
+
+### Step 5 - Apply Generated CSS
+
+Place generated CSS in an app stylesheet loaded after the Ignite UI theme CSS, such as `wwwroot/css/app.css`.
+
+```html
+<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+<link href="css/app.css" rel="stylesheet" />
+```
+
+Palette and global layout CSS normally go in `:root`. Component theme CSS goes on the generated `igc-*` selector or under a scoped wrapper selector.
+
+In `.razor.css` isolation files, prefix `igc-*` selectors so Blazor CSS isolation does not block the override.
+
+### Loading Reference Data
+
+Use `read_resource` with these URIs for preset values and documentation:
+
+| URI | Content |
+|---|---|
+| `theming://platforms/blazor` | Blazor platform specifics |
+| `theming://presets/palettes` | Preset palette colors |
+| `theming://guidance/colors/usage` | Which shades to use for which purpose |
+| `theming://guidance/colors/roles` | Semantic color roles |
+| `theming://guidance/colors/rules` | Light/dark theme color rules |
+
+## Mandatory Agent Protocol
+
+> **DO NOT write CSS variable names, token names, or palette colors from memory.**
+> Design token names and values are version-specific and theme-specific. Anything generated without reading the reference files or querying the MCP theming server will produce incorrect CSS.
+
+You are required to complete all of the following steps before producing any theming-related code or answer:
+
+**Step 1 - Identify the theming task.**
+Map the user's request to one or more rows in the Task to Reference File table below.
+
+**Step 2 - Use the theming MCP tools for version-specific values.**
+For any task involving design token lookup, palette generation, component theme CSS, or global layout tokens, call the relevant Ignite UI Theming MCP tool. Do not infer token names, selector names, or palette variables from memory.
+
+**Step 3 - Read the relevant reference files in parallel.**
+Call `read_file` on all identified reference files in a single parallel batch.
+
+**Step 4 - Only then produce output.**
+Base CSS and instructions on what the MCP tools return and what the reference files say.
+
+### Task to Reference File
+
+| Task | Reference file to read |
+|---|---|
+| Switching themes (light/dark/Bootstrap/Material/Fluent/Indigo), adding the CSS link, dark mode toggle, scoped theming | [`references/common-patterns.md`](./references/common-patterns.md) |
+| Setting up the MCP theming server in VS Code, Cursor, Claude Desktop, or JetBrains IDEs | [`references/mcp-setup.md`](./references/mcp-setup.md) |
+
+## Key Blazor Theming Notes
+
+> **AGENT INSTRUCTION - CSS customization**
+>
+> For normal Ignite UI for Blazor app styling, generate CSS custom properties and selectors.
+
+> **AGENT INSTRUCTION - CSS parts**
+>
+> Some Ignite UI Blazor components expose CSS shadow parts via `::part()`. Use `get_doc` for the component to confirm whether parts are available and to get the exact part names. Use `get_component_design_tokens` to get token names; do not infer token names or part names from Angular, React, or Web Components examples.
+
+> **AGENT INSTRUCTION - Theming MCP server platform**
+>
+> This skill already establishes the platform. When calling Ignite UI Theming MCP tools that accept a platform, always pass `platform: "blazor"`.
+
+## Key Rules
+
+1. **Use `platform: "blazor"` and `output: "css"`** on theming tools that accept those parameters
+2. **Always call `get_component_design_tokens` before component CSS overrides**; token names are not guessable from component names
+3. **Use exact component variants** for variant components, such as `contained-button`, `flat-button`, `outlined-button`, and `fab-button`
+4. **Use `tokens` with `create_component_theme`**; do not use an `overrides` object
+5. **Use palette tokens after palette generation**; raw colors belong in palette seed inputs, not downstream component theme values
+6. **Place generated CSS after the built-in Ignite UI theme CSS** so overrides win in the cascade
+7. **Use `igc-*` selectors in CSS**, not Razor component names such as `IgbButton`
+8. **Use `::part()` only after confirming part names with Blazor docs**, and prefer design tokens when a token exists
+9. **Surface color must match the variant**; use a light surface for `light` and a dark surface for `dark`
+10. **Only one built-in theme CSS file should be active at a time** to avoid conflicting variables and component styles
+
+## Related Skills
+
+- [`igniteui-blazor-components`](../igniteui-blazor-components/SKILL.md) - All non-grid UI components
+- [`igniteui-blazor-grids`](../igniteui-blazor-grids/SKILL.md) - Data Grids

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-theming/references/common-patterns.md

@@ -0,0 +1,276 @@
+# Common Theming Patterns
+
+> **Part of the [`igniteui-blazor-theming`](../SKILL.md) skill hub.**
+
+## Contents
+
+- [Built-in Themes](#built-in-themes)
+- [Switching Theme at Build Time](#switching-theme-at-build-time)
+- [Dark Mode Toggle at Runtime](#dark-mode-toggle-at-runtime)
+- [CSS Custom Properties (Design Tokens)](#css-custom-properties-design-tokens)
+- [Scoped Component Theming](#scoped-component-theming)
+- [CSS Parts](#css-parts)
+- [Global Design Tokens](#global-design-tokens)
+- [Key Rules](#key-rules)
+
+---
+
+## Built-in Themes
+
+Ignite UI for Blazor ships 8 built-in themes (4 families × 2 modes):
+
+| Theme | Light CSS path | Dark CSS path |
+|---|---|---|
+| Bootstrap | `themes/light/bootstrap.css` | `themes/dark/bootstrap.css` |
+| Material | `themes/light/material.css` | `themes/dark/material.css` |
+| Fluent | `themes/light/fluent.css` | `themes/dark/fluent.css` |
+| Indigo | `themes/light/indigo.css` | `themes/dark/indigo.css` |
+
+All paths are relative to `_content/IgniteUI.Blazor/`.
+
+---
+
+## Switching Theme at Build Time
+
+Add a single `<link>` tag in your host page:
+
+### Blazor Server / Web App - `Components/App.razor` or `Pages/_Host.cshtml`
+
+```html
+<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+```
+
+### Blazor WASM - `wwwroot/index.html`
+
+```html
+<link href="_content/IgniteUI.Blazor/themes/light/material.css" rel="stylesheet" />
+```
+
+### .NET 9+ Web App - use `Assets` collection
+
+```razor
+<link rel="stylesheet" href="@Assets["_content/IgniteUI.Blazor/themes/light/fluent.css"]" />
+```
+
+Replace the file name to switch the entire application theme. Only **one** theme CSS file should be loaded at a time.
+
+---
+
+## Dark Mode Toggle at Runtime
+
+Switch themes dynamically by updating the `href` attribute of the theme `<link>` tag via JavaScript interop or by using a CSS class on the `<body>`:
+
+### Approach 1 - Replace the stylesheet href (JS Interop)
+
+```razor
+@inject IJSRuntime JS
+
+<IgbButton @onclick="ToggleDark">Toggle Dark Mode</IgbButton>
+
+@code {
+    bool IsDark = false;
+
+    async Task ToggleDark()
+    {
+        IsDark = !IsDark;
+        var theme = IsDark ? "dark/bootstrap" : "light/bootstrap";
+        await JS.InvokeVoidAsync("setTheme", $"_content/IgniteUI.Blazor/themes/{theme}.css");
+    }
+}
+```
+
+```html
+<!-- wwwroot/index.html or App.razor -->
+<link id="igTheme" href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+
+<script>
+    window.setTheme = function (href) {
+        document.getElementById('igTheme').setAttribute('href', href);
+    };
+</script>
+```
+
+### Approach 2 - Preload both themes and toggle link disabled states
+
+```html
+<link id="igLightTheme" href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+<link id="igDarkTheme" href="_content/IgniteUI.Blazor/themes/dark/bootstrap.css" rel="stylesheet" disabled />
+```
+
+```js
+window.toggleDarkMode = function (isDark) {
+    document.getElementById('igLightTheme').disabled = isDark;
+    document.getElementById('igDarkTheme').disabled = !isDark;
+};
+```
+
+---
+
+## CSS Custom Properties (Design Tokens)
+
+All visual attributes of Ignite UI components (colors, borders, shadows, fonts) are exposed as CSS custom properties. You override them by declaring the property in a CSS rule that matches the component's scope. Design tokens are the **primary** theming approach - prefer them over `::part()` selectors.
+
+**Workflow:**
+
+1. Call `get_component_design_tokens` to get all available tokens for a component.
+2. Pick the tokens you want to change.
+3. Write a CSS rule that overrides those tokens.
+
+**File context matters:**
+
+- **Global CSS file** (`app.css`) - write `igc-<tag> { --ig-<component>-<token>: value; }` directly.
+- **`.razor.css` isolation file** - add `::deep` before the `igc-<tag>` selector.
+
+```css
+/* app.css - global, no ::deep needed */
+:root {
+    --ig-primary-500: #7b2fff;
+    --ig-primary-600: #6200ee;
+}
+
+igc-chip {
+    --ig-chip-background: var(--ig-primary-500);
+    --ig-chip-text-color: var(--ig-primary-500-contrast);
+}
+```
+
+```css
+/* MyView.razor.css - isolation file, ::deep required */
+::deep igc-chip {
+    --ig-chip-background: var(--ig-primary-500);
+    --ig-chip-text-color: var(--ig-primary-500-contrast);
+}
+```
+
+> **AGENT INSTRUCTION:** Always call `get_component_design_tokens(component: "<component-or-variant>")` before styling a component. For variant-based components such as buttons, query the exact variant such as `contained-button` or `flat-button`. Do NOT guess token names from memory.
+
+---
+
+## Scoped Component Theming
+
+Apply a custom theme to a specific component instance (without affecting all components):
+
+```razor
+<div class="my-custom-button">
+    <IgbButton>Custom Style</IgbButton>
+</div>
+```
+
+```css
+/* Scoped token override in your app's CSS (global file, no ::deep) */
+.my-custom-button igc-button {
+    --ig-primary-500: #ff5722;
+    --ig-primary-600: #e64a19;
+}
+```
+
+When the scoped override is inside a `.razor.css` isolation file, add `::deep`:
+
+```css
+/* MyComponent.razor.css - isolation file */
+::deep .my-custom-button igc-button {
+    --ig-primary-500: #ff5722;
+    --ig-primary-600: #e64a19;
+}
+```
+
+Use `::part()` within a scoped selector only for properties not covered by tokens - verify via `get_component_design_tokens` first:
+
+```css
+/* Global CSS */
+.my-custom-button igc-button::part(base) {
+    border-radius: 20px;
+    font-weight: 700;
+}
+
+/* Isolation file */
+::deep .my-custom-button igc-button::part(base) {
+    border-radius: 20px;
+    font-weight: 700;
+}
+```
+
+---
+
+## CSS Parts
+
+Some Ignite UI Blazor components expose shadow DOM parts via `::part()`. Use these for styling only after the Blazor component documentation confirms the exact part names. Prefer design token CSS custom properties (via `get_component_design_tokens` / `create_component_theme`) over `::part()` - tokens are the primary theming layer. Only reach for `::part()` when the property you need is not covered by any design token.
+
+**`::part()` is not a replacement for design tokens.** Setting a design token (e.g., `--ig-chip-background`) is different from using `::part(base) { background: ... }`. Use the token approach when a token exists; use `::part()` for properties the token system does not expose.
+
+**Workflow:**
+
+1. Call `get_component_design_tokens` to check whether the desired property has a token.
+2. If a token exists, set it via `igc-<tag> { --ig-<component>-<token>: value; }` - no `::part()` needed.
+3. If no token covers it, call `get_doc` to see the component's CSS parts list, then use `igc-<component-tag>::part(<part-name>)`.
+
+**File context:**
+
+- **Global CSS file** (`app.css`): use `igc-<tag>::part(<name>) { ... }` directly.
+- **`.razor.css` isolation file**: prefix with `::deep` → `::deep igc-<tag>::part(<name>) { ... }`.
+
+Example - styling the dialog footer area (global CSS):
+
+```css
+/* app.css - global, no ::deep needed */
+igc-dialog::part(footer) {
+    background-color: #f5f5f5;
+    border-top: 1px solid #e0e0e0;
+    padding: 12px 16px;
+}
+```
+
+Same override in a `.razor.css` isolation file:
+
+```css
+/* MyView.razor.css - isolation file, ::deep required */
+::deep igc-dialog::part(footer) {
+    background-color: #f5f5f5;
+    border-top: 1px solid #e0e0e0;
+    padding: 12px 16px;
+}
+```
+
+> **AGENT INSTRUCTION:** Blazor renders Ignite UI components as web components with `igc-` tag names. The CSS selector uses the web component tag name (e.g., `igc-button`, `igc-dialog`) not the Razor component name (`IgbButton`). `::deep` is a Blazor CSS isolation combinator - it is only needed in `.razor.css` files, not in global stylesheets.
+
+---
+
+## Global Design Tokens
+
+Use the MCP theming tools to generate CSS for global design tokens:
+
+### Roundness (border-radius)
+
+```bash
+set_roundness(platform: "blazor", output: "css", radiusFactor: 0.5)
+# Returns CSS custom properties to add to :root
+```
+
+`radiusFactor` is a value from 0 (square) to 1 (maximum roundness).
+
+### Spacing
+
+```bash
+set_spacing(platform: "blazor", output: "css", spacing: 1.25)
+# Returns spacing CSS custom properties to add to :root
+```
+
+### Size
+
+```bash
+set_size(platform: "blazor", output: "css", size: "small")
+# Returns size CSS custom properties; values: "small" | "medium" | "large"
+```
+
+Add the returned CSS to your global `app.css` or `wwwroot/css/app.css` inside a `:root {}` selector.
+
+---
+
+## Key Rules
+
+1. **Always use the MCP theming tools to get token names.** Do not hardcode CSS variable names without first calling `get_component_design_tokens`.
+2. **Only one theme CSS file should be active at a time.** Loading multiple themes causes conflicts.
+3. **CSS selectors use `igc-` tag names, not Razor component names.** `igc-button::part(base)`, not `IgbButton::part(base)`.
+4. **Design token overrides go in a plain CSS file** - there is no Sass step for Blazor theming.
+5. **Scoped theming works by wrapping the component in a container with a CSS class** and scoping the CSS selector to that container.
+6. **`_content/IgniteUI.Blazor/themes/`** is the correct base path for all built-in theme CSS files.

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-theming/references/mcp-setup.md

@@ -0,0 +1,81 @@
+# Setting Up the Theming MCP Server
+
+> **Part of the [`igniteui-blazor-theming`](../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 Theming MCP server enables AI assistants to generate Blazor-ready CSS custom properties, palettes, component themes, and global layout tokens. 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-theming": {
+      "command": "npx",
+      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
+    }
+  }
+}
+```
+
+This works whether `igniteui-theming` 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-theming": {
+      "command": "npx",
+      "args": ["-y", "igniteui-theming", "igniteui-theming-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-theming": {
+      "command": "npx",
+      "args": ["-y", "igniteui-theming", "igniteui-theming-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-theming igniteui-theming-mcp`
+4. Click OK and restart the AI Assistant
+
+## Verifying the Setup
+
+After configuring the MCP server, ask your AI assistant:
+
+> "Read the Ignite UI theming resource for the Blazor platform"
+
+If the MCP server is running, the assistant can call
+`read_resource` and return the Blazor theming
+guidance. For Blazor-specific theming, pass
+`platform: "blazor"` to theming tools that accept a platform parameter.

package/templates/blazor/igb/projects/ai-config/index.d.ts

@@ -0,0 +1,22 @@
+import { ControlExtraConfiguration, ProjectTemplate } from "@igniteui/cli-core";
+export declare class IgbAiConfigPartial implements ProjectTemplate {
+    id: string;
+    name: string;
+    description: string;
+    framework: string;
+    projectType: string;
+    dependencies: string[];
+    hasExtraConfiguration: boolean;
+    isHidden: boolean;
+    delimiters: import("@igniteui/cli-core").TemplateDelimiters;
+    get templatePaths(): string[];
+    installModules(): void;
+    upgradeIgniteUIPackages(_projectPath: string, _packagePath: string): Promise<boolean>;
+    generateConfig(_name: string, _theme: string, ..._options: any[]): {
+        [key: string]: any;
+    };
+    getExtraConfiguration(): ControlExtraConfiguration[];
+    setExtraConfiguration(_extraConfigKeys: {}): void;
+}
+declare const _default: IgbAiConfigPartial;
+export default _default;