diff --git a/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db b/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db index 5f4ee83dd..922d3be53 100644 Binary files a/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db and b/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db differ diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db b/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db index 5f4ee83dd..922d3be53 100644 Binary files a/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db and b/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db differ diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button.md index 93d6665cb..2d2424ceb 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button.md @@ -1943,7 +1943,7 @@ Or you can use the universal `--ig-button-size` variable to target all instances ```html
- +
``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-changelog-dv.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-changelog-dv.md index 7ae3aac9f..238db82b5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-changelog-dv.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-changelog-dv.md @@ -17,8 +17,30 @@ All notable changes for each version of Ignite UI for Angular are documented on - [Ignite UI for Angular CHANGELOG.md at Github](https://github.com/IgniteUI/igniteui-angular/blob/master) +## **21.0.1 (March 2026)** + +### Bug Fixes + +| Bug Number | Control | Description | +|------------|---------|-------------| +| 2189 | IgxDataChart | DataChart skips rendering axis when there are no labels | +| 3055 | IgxDataPieChart | added missing styling properties for the Others Slice | +| 38668 | IgxDataTooltipLayer | TitleTextColor is overridden when chart's TitleTextColor is used | +| 40238 | Excel | fixed Excel Formula parser - Workbook.Load() throwing an Excel.FormulaParseException | +| 41167 | Excel | Object's Formulas are not round-tripped - Added Excel support for round tripping the camera tool | +| 41419 | Excel | Saving a VBA Signed Excel file does not keep a signature/certificate. | +| 41594 | IgxDataChart | AssigningCategoryStyle args.GetItems is null or not working to update items in the fragment series. | + ## **21.0.0 (January 2026)** +### Enhancements + +### igniteui-angular-charts + +Added OthersCategoryBrush and OthersCategoryOutline to DataPieChart and ProportionalCategoryAngleAxis + +### General + - Angular 21 support. ## **20.2.1 (December 2025)** diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/general-changelog-dv-blazor.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/general-changelog-dv-blazor.md index 4be194dd0..3399e14bc 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/general-changelog-dv-blazor.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/general-changelog-dv-blazor.md @@ -18,6 +18,15 @@ All notable changes for each version of Ignite UI for Blazor are documented on t - As of version 2024.2, the Ignite UI for Blazor toolset supports .NET 9. For more information on .NET 9 please refer to [this article on Microsoft's site](https://learn.microsoft.com/en-us/dotnet/core/whats-new/dotnet-9/overview). +## **25.2.83 (March 2026)** + +### Bug Fixes + +| Bug Number | Control | Description | +|------------|---------|-------------| +| 3229 | Grids | Latest version of Blazor Grids shows Trial watermark for Licensed version | +| 2754 | IgbTabs | Changing the check state for IgbSwitch inside the tab causes the tab content to disappear | + ## **25.2.77 (March 2026)** ### IgniteUI.Blazor (Grids) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/general-installing-blazor.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/general-installing-blazor.md index 8e2e006bf..70aa434b0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/general-installing-blazor.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/general-installing-blazor.md @@ -37,11 +37,11 @@ In the package manager dialog, open the **Browse** tab, select the **Infragistic ## Using the .NET CLI ```cmd -> dotnet add package IgniteUI.Blazor --version 25.2.77 (March 2026) +> dotnet add package IgniteUI.Blazor --version 25.2.83 (March 2026) ``` ## Using the Package Manager ```cmd -PM> Install-Package IgniteUI.Blazor -Version 25.2.77 (March 2026) +PM> Install-Package IgniteUI.Blazor -Version 25.2.83 (March 2026) ``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-collapsible-column-groups.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-collapsible-column-groups.md index cf2f4a6e4..8e06fb1d7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-collapsible-column-groups.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-collapsible-column-groups.md @@ -218,7 +218,7 @@ To get started with the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api ```cmd -> dotnet add package IgniteUI.Blazor --version 25.2.77 (March 2026) +> dotnet add package IgniteUI.Blazor --version 25.2.83 (March 2026) ``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-collapsible-column-groups.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-collapsible-column-groups.md index 58b1929c2..8a6919d6a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-collapsible-column-groups.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-collapsible-column-groups.md @@ -327,7 +327,7 @@ To get started with the [`IgbHierarchicalGrid`](https://www.infragistics.com/bla ```cmd -> dotnet add package IgniteUI.Blazor --version 25.2.77 (March 2026) +> dotnet add package IgniteUI.Blazor --version 25.2.83 (March 2026) ``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-collapsible-column-groups.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-collapsible-column-groups.md index 24bf11df9..cddc76024 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-collapsible-column-groups.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-collapsible-column-groups.md @@ -230,7 +230,7 @@ To get started with the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs ```cmd -> dotnet add package IgniteUI.Blazor --version 25.2.77 (March 2026) +> dotnet add package IgniteUI.Blazor --version 25.2.83 (March 2026) ``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/dock-manager.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/dock-manager.md index 53c4ca567..f84bad996 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/dock-manager.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/dock-manager.md @@ -2085,9 +2085,9 @@ The Dock Manager comes with a light and a dark theme. The light theme is the def ## Localization -The Dock Manager component supports localizing the strings used in the context menus, tooltips and aria attributes. By default, the Dock Manager detects the language of the page by searching for a [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute on any of its parents. If the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute is not set or is set to a value which the Dock Manager does not support, the default language used is [English (en)](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsEN). The Dock Manager provides built-in localized strings for the following languages: [English (en)](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsEN), [Japanese (jp)](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsJP), [Korean (ko)](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsKO) and [Spanish (es)](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsES). +The Dock Manager lets you localize the strings used in context menus, tooltips, and ARIA attributes. By default, it reads the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute from the root `` element to determine which language to use. If the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute is missing or set to an unsupported value, the Dock Manager uses [English (en)](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsEN). -The Dock Manager exposes [`resourceStrings`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdockmanager.html#resourceStrings) property which allows you to modify the strings. If you set the [`resourceStrings`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdockmanager.html#resourceStrings) property, the Dock Manager will use your strings no matter what [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute is set. +The Dock Manager also exposes a [`resourceStrings`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdockmanager.html#resourceStrings) property that you can use to modify individual strings directly. When you set the [`resourceStrings`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdockmanager.html#resourceStrings) property, the Dock Manager uses the strings you provide regardless of the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute on the page. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/general-changelog-dv-react.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/general-changelog-dv-react.md index b19df5d63..a16979857 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/general-changelog-dv-react.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/general-changelog-dv-react.md @@ -13,6 +13,25 @@ _tocName: Changelog All notable changes for each version of Ignite UI for React are documented on this page. +## **19.6.0 (March 2026)** + +### igniteui-react + +#### Changed + +- [`IgrDockManager`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdockmanager.html): Updated to use the latest `igniteui-dockmanager@2.1.0` with new `minResizeWidth` and `minResizeHeight` properties, `paneFlyoutToggle` event; additional `layoutChange` event detail and fixes. See the [full changelog](https://github.com/IgniteUI/igniteui-dockmanager/blob/master/CHANGELOG.md#210). +- Updated to use the latest `igniteui-webcomponents@7.1.0` including new `Splitter` and `Highlight` container components and fixes. See the [full changelog](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md#710---2026-03-19). + +#### New Features + +- #### AI-Assisted Development - Agent Skills + - Structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI, etc.) how to work with Ignite UI for React. + - The skill files are included in the `igniteui-react` package and also live in the [skills/](https://github.com/IgniteUI/igniteui-react/tree/master/skills) directory: + - **components** - Identify the right React components (`*`) for a UI pattern, then install, import, and use them — JSX patterns, events, refs, forms, etc. + - **customize-theme** - Customize styling using CSS custom properties, Sass, and the theming system in React, including using Ignite UI Theming MCP server. + - **optimize-bundle-size** - Reduce bundle size with granular imports, tree-shaking, and lazy loading. + - These skills are automatically discovered when placed in the agent's skills path (e.g. `.agents/skills` or `.claude/skills`). + ## **19.5.2 (March 2026)** ### Bug Fixes diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/skills.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/skills.md new file mode 100644 index 000000000..568ff2332 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/skills.md @@ -0,0 +1,238 @@ +--- +title: Agent Skills | AI Skills | AI-Assisted Development | Ignite UI for React | Infragistics +_description: Learn how to use Agent Skills to supercharge AI-assisted development with Ignite UI for React components, grids, data operations, and theming. +_keywords: Ignite UI for React, agent skills, ai assisted development, github copilot, cursor, windsurf, claude, gemini cli, junie +_license: MIT +mentionedTypes: [] +_tocName: Agent Skills +--- + +# Ignite UI for React Agent Skills + +Ignite UI for React ships with **[Agent Skills](https://agentskills.io/)** — structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, Gemini CLI, JetBrains Junie, etc.) how to work with Ignite UI for React. These skill files provide context-aware guidance on components, grids, data operations, and theming, enabling your AI assistant to generate accurate, idiomatic code that follows best practices. + +> \[!NOTE] +> The AI tooling landscape is evolving rapidly. Skill discovery locations and distribution options may change as tools and IDEs are updated. Always consult the official documentation for your specific tool or agent for the latest information. + +## Available Skills + +The skill files live in the [`skills/`](https://github.com/IgniteUI/igniteui-react/tree/master/skills) directory of the Ignite UI for React repository: + + + +| Skill | Path | Description | +|:------|:-----|:------------| +| Components | [`skills/igniteui-react-components/SKILL.md`](https://github.com/IgniteUI/igniteui-react/blob/master/skills/igniteui-react-components/SKILL.md) | Identify the right components, install, import, and use them — JSX patterns, event handling, refs, forms, TypeScript | +| Theming & Styling | [`skills/igniteui-react-customize-theme/SKILL.md`](https://github.com/IgniteUI/igniteui-react/blob/master/skills/igniteui-react-customize-theme/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | +| Optimization | [`skills/igniteui-react-optimize-bundle-size/SKILL.md`](https://github.com/IgniteUI/igniteui-react/blob/master/skills/igniteui-react-optimize-bundle-size/SKILL.md) | Ensuring best practices for tree shaking to optimize bundle size | + + + +## Skill Locations + +Each AI coding tool discovers skills from specific directories. Place your skill files in the appropriate location so your AI assistant can find and use them automatically. The general `.agents/skills/` convention is supported across multiple tools, while each tool also has its own specific directories. + +### General (`.agents/skills/`) + +The `.agents/skills/` directory is a cross-agent convention supported by multiple tools, including [VS Code with Copilot](https://code.visualstudio.com/docs/copilot/customization/agent-skills), [OpenAI Codex](https://developers.openai.com/codex/skills), [Cursor](https://cursor.com/docs/skills), [Gemini CLI](https://geminicli.com/docs/cli/skills/#skill-discovery-tiers), [Antigravity](https://antigravity.google/docs/skills), and [Windsurf](https://docs.windsurf.com/windsurf/cascade/skills#skill-scopes). Copy the skill directories into `.agents/skills/` in your project root: + + + + .agents/ + skills/ + igniteui-react-components/ + SKILL.md + igniteui-react-customize-theme/ + SKILL.md + igniteui-react-optimize-bundle-size/ + SKILL.md + + + +For user-level (global) skills available across all projects, use `~/.agents/skills/` instead. + +### GitHub Copilot + +[GitHub Copilot](https://docs.github.com/en/copilot/concepts/agents/about-agent-skills) discovers skills from: + +| Scope | Location | +|:------|:---------| +| Project | `.github/skills/`, `.claude/skills/` | +| Personal | `~/.copilot/skills/`, `~/.claude/skills/` (Copilot coding agent and GitHub Copilot CLI only) | + +> **Tip:** In [VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills), these locations also include the general `.agents/skills/` and `~/.agents/skills/` and you can configure additional skill locations using the `chat.agentSkillsLocations` setting. + +### Claude + +[Claude](https://code.claude.com/docs/en/skills#where-skills-live) discovers skills from: + +| Scope | Location | +|:------|:---------| +| Project | `.claude/skills/` | +| Personal | `~/.claude/skills/` | + +### Cursor + +[Cursor](https://cursor.com/docs/skills#skill-directories) discovers skills from: + +| Scope | Location | +|:------|:---------| +| Project | `.agents/skills/`, `.cursor/skills/` | +| User (global) | `~/.cursor/skills/` | + +### Gemini CLI and Antigravity + +[Gemini CLI](https://geminicli.com/docs/cli/skills/#skill-discovery-tiers) and [Antigravity](https://antigravity.google/docs/skills) discover skills from: + +| Scope | Location | +|:------|:---------| +| Workspace | `.gemini/skills/`, `.agents/skills/` | +| User | `~/.gemini/skills/`, `~/.agents/skills/` | + +> **Tip:** Use the `/skills` slash command in Gemini CLI to view and manage installed skills. + +### Junie (JetBrains IDEs) + +[Junie](https://junie.jetbrains.com/docs/agent-skills.html) discovers skills from: + +| Scope | Location | +|:------|:---------| +| Project | `.junie/skills/` | +| User | `~/.junie/skills/` | + +### Windsurf + +[Windsurf](https://docs.windsurf.com/windsurf/cascade/skills#skill-scopes) discovers skills from: + +| Scope | Location | +|:------|:---------| +| Workspace | `.windsurf/skills/`, `.agents/skills/` | +| Global | `~/.codeium/windsurf/skills/`, `~/.agents/skills/` | + +*** + +## Installing Skills + +Use one of the options below to download and place the skill files into the appropriate [skill location](#skill-locations) for your AI assistant. + +### **Option A — Use the installed npm package** + +If Ignite UI for React is already installed in your project, the skill files are available under `node_modules`. To copy them into your project (e.g. into `.agents/skills/`), run: + +**macOS / Linux / Windows (PowerShell)** + +```bash +cp -r node_modules/igniteui-react/skills/. .agents/skills/ +``` + +**Windows (Command Prompt)** + +```cmd +robocopy node_modules\igniteui-react\skills .agents\skills /E +``` + +Or copy individual skill directories as needed: + +**macOS / Linux / Windows (PowerShell)** + + + +```bash +cp -r node_modules/igniteui-react/skills/igniteui-react-components .agents/skills/ +cp -r node_modules/igniteui-react/skills/igniteui-react-customize-theme .agents/skills/ +cp -r node_modules/igniteui-react/skills/igniteui-react-optimize-bundle-size .agents/skills/ +``` + + + +**Windows (Command Prompt)** + + + +```cmd +robocopy node_modules\igniteui-react\skills\igniteui-react-components .agents\skills\igniteui-react-components /E +robocopy node_modules\igniteui-react\skills\igniteui-react-customize-theme .agents\skills\igniteui-react-customize-theme /E +robocopy node_modules\igniteui-react\skills\igniteui-react-optimize-bundle-size .agents\skills\igniteui-react-optimize-bundle-size /E +``` + + + +### **Option B — Use the `gemini skills` CLI** + +The `gemini skills install` command installs skills directly from a Git repository. It supports two scopes: + +- **User scope** (default) — installs skills globally for your user account, making them available across all projects. Skills are placed in `~/.gemini/skills/` or `~/.agents/skills/`. +- **Workspace scope** — installs skills locally into the current project directory under `.agents/skills/`, scoping them to that project only. + +**Install to user scope (default):** + + + +```bash +gemini skills install https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-components +gemini skills install https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-customize-theme +gemini skills install https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-optimize-bundle-size +``` + + + +**Install to workspace scope:** + + + +```bash +gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-components +gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-customize-theme +gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-optimize-bundle-size +``` + + + +Once installed, the skill files are available in the respective location and will be automatically discovered by compatible AI assistants. + +### **Option C — Use the `npx skills` CLI** + +The `skills` CLI is an interactive tool that downloads and installs skills directly into your project. Run the following command in your project root: + +```shell +npx skills add IgniteUI/igniteui-react +``` + +The CLI will guide you through a series of prompts to: + +1. Select which skills to install (components, theming, etc.). +2. Choose the target location for the skill files in your project (e.g. `.agents/skills/`, `.github/skills/`). +3. Download and write the selected skill files automatically. + +Once complete, the skills are ready to use — no manual file copying required. + +> **Note:** Requires Node.js and an internet connection. The command fetches the latest skill files from the [IgniteUI/igniteui-react](https://github.com/IgniteUI/igniteui-react) repository. + +*** + +## Theming MCP Server + + + +The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file](https://github.com/IgniteUI/igniteui-react/blob/master/skills/igniteui-react-customize-theme/SKILL.md) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs. + + + +For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](./theming-mcp.md) documentation. + +## Additional Resources + +
+ + + +- [Getting Started with Ignite UI for React](../general-getting-started.md) +- [Ignite UI CLI](../general-cli-overview.md) + + + +
+Our community is active and always welcoming to new ideas. + +- [Ignite UI for React **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-react) +- [Ignite UI for React **GitHub**](https://github.com/IgniteUI/igniteui-react) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/theming-mcp.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/theming-mcp.md new file mode 100644 index 000000000..491799b02 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/theming-mcp.md @@ -0,0 +1,341 @@ +--- +title: React Theming MCP | Infragistics +_description: React works with the Ignite UI Theming MCP server that allows you to create custom themes, palettes, typography, and elevations for your Ignite UI for React applications. Learn how to use the MCP server to generate and apply custom themes that match your brand and design requirements. +_keywords: Ignite UI for React controls, React widgets, web widgets, UI widgets, Components Suite, Artificial Intelligence, AI, MCP, Model Context Protocol, Theming, Custom Themes, Palettes, Typography, Elevations +_license: MIT +mentionedTypes: [] +_tocName: Theming MCP +--- + +# Ignite UI Theming MCP + +

The Ignite UI Theming MCP is a Model Context Protocol (MCP) server that enables AI assistants to generate production-ready theming code for Ignite UI applications. MCP is an open standard that lets AI assistants call specialized tools provided by external servers. Connect the Ignite UI Theming MCP to your editor or desktop AI client and describe what you want — the assistant does the rest.

+ +
+ +## Overview + +Instead of writing styles by hand, you can describe your theming intent in plain language and let an AI assistant generate the correct code for you. The MCP server gives the AI the knowledge and tools it needs to produce accurate theming code — including palettes with proper shade generation, typography, elevations, component design token overrides, and more. + +The server supports all four Ignite UI design systems — **Material**, **Bootstrap**, **Fluent**, and **Indigo** — in both light and dark variants. While this guide focuses on React, the MCP server also works with all Ignite UI component libraries from Infragistics. The `detect_platform` tool reads your `package.json` and selects the correct import paths and selectors automatically. + +Most tools can produce either **Sass** or **CSS** output. Sass output is the default and integrates with the `igniteui-theming` Sass module. CSS output generates ready-to-use CSS custom properties and can be used **without a local Sass toolchain** — the server compiles it for you. + +**Example prompts to try once connected:** + +> *"Create a complete Material Design dark theme for my React app with primary #2563eb and coral secondary #f97316."* + +> *"What design tokens are available for the button component? Customize it with my brand purple #8b5cf6."* + +> *"My brand guidelines specify exact hex values for every primary shade — create a custom palette with those explicit values."* + +> *"Make the calendar component use smaller spacing."* + +## Prerequisites + +Before configuring the MCP server, make sure you have: + +- **Node.js** (v18 or later) installed — this provides the `npx` command used to launch the server. +- A project with an **Ignite UI package** listed as a dependency in `package.json`. +- An **AI client with MCP support** — for example, VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, or a JetBrains IDE with the AI Assistant plugin. + +If you do not have Ignite UI Theming installed yet, run: + +```bash +npm install igniteui-theming +``` + +## Setup + +The MCP server is bundled with the `igniteui-theming` package and launched via `npx`. No separate installation is needed beyond having an Ignite UI package already in your project. + +The canonical launch command is: + +```bash +npx -y igniteui-theming igniteui-theming-mcp +``` + +> \[!NOTE] +> The `-y` flag tells `npx` to auto-confirm the package download prompt so the server can start without manual intervention. + +### VS Code + +GitHub Copilot in VS Code supports MCP servers through a workspace-level configuration file. Create or edit `.vscode/mcp.json` in your project root: + +```json +{ + "servers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +Once saved, open the GitHub Copilot chat panel, switch to **Agent** mode, and the Ignite UI Theming tools will be available. + +> \[!NOTE] +> MCP support in VS Code requires GitHub Copilot and VS Code 1.99 or later. + +### Cursor + +Cursor supports project-scoped MCP configuration. Create or edit `.cursor/mcp.json` in your project root: + +```json +{ + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +The server will be picked up automatically when you open a new Cursor chat session. + +> \[!NOTE] +> You can also configure MCP servers globally via **Settings → MCP** in Cursor. + +### Claude Desktop + +Add the server to your Claude Desktop configuration 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"] + } + } +} +``` + +Restart Claude Desktop after saving. You will see an MCP server indicator (slider icon) in the chat input area, confirming that MCP tools are active. + +### Claude Code + +Claude Code supports MCP servers through its CLI and a project-scoped `.mcp.json` file. To share the configuration with your team, create or edit `.mcp.json` in your project root: + +```json +{ + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +Alternatively, you can add the server via the command line for your local environment only: + +```bash +claude mcp add igniteui-theming -- npx -y igniteui-theming igniteui-theming-mcp +``` + +Use the `/mcp` command inside Claude Code to verify the server is connected. + +### JetBrains IDEs + +JetBrains AI Assistant supports MCP servers through the IDE settings: + +1. Open **Settings** (or **Preferences** on macOS). + +2. Navigate to **Tools → AI Assistant → Model Context Protocol (MCP)**. + +3. Click **+ Add** and choose **As JSON** or use the form fields. + +4. Enter the following configuration: + + ```json + { + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } + } + ``` + +5. Click **OK** and restart the AI Assistant. + +> \[!NOTE] +> MCP support requires the AI Assistant plugin to be installed and enabled in your JetBrains IDE. + +### Other MCP Clients + +For any other MCP-compatible client, use the STDIO transport with the following command and arguments: + +- **Command**: `npx` +- **Arguments**: `-y`, `igniteui-theming`, `igniteui-theming-mcp` + +## Customizing AI Behavior with Project Rules + +This section is optional. It is aimed at teams that want to fine-tune *how* the AI generates theming code to match their existing codebase conventions. + +Editors like VS Code and Cursor let you provide project-level instruction files that shape how the AI behaves. The MCP server already teaches the AI *which tools to call and in what order* — you do not need to repeat that. Instead, use these instruction files to encode your **project's design decisions, code conventions, and file organization** so the AI produces code that fits your codebase on the first try. + +### VS Code (`.github/copilot-instructions.md`) + +```markdown +## Theming Conventions + +### Sass Code Style +- Use `@use` / `@forward` — never `@import`. +- Extract repeated color values into Sass variables (e.g., `$brand-hover: #a78bfa`). +- Prefer setting primary design tokens over overriding many dependent tokens. + For example, setting `$foreground` on a flat button automatically derives + `$hover-background`, `$focus-background`, and `$active-background`. +- Keep component overrides scoped — use the component's default selector + (e.g., `.igx-button--flat`) unless a narrower scope is needed. +``` + +### Cursor (`.cursor/rules/theming.mdc`) + +```markdown +--- +description: Ignite UI for React theming conventions +globs: ["**/*.scss", "**/styles/**"] +--- + +## Project Theming Rules + +### Code conventions +- `@use` / `@forward` only — no `@import`. +- Extract shared colors into variables; do not repeat hex literals. +- Prefer primary tokens — let dependent tokens derive automatically. +- One component override per file. Name the file after the component. +- Comment every override with the design rationale. +- Never hard-code gray shades for text — use palette grays so dark mode works. +- For dark mode, only the palette changes. Component overrides stay the same. +``` + +> \[!NOTE] +> Both files are committed to source control, so every team member gets the same AI behavior without manual setup. Adapt the brand colors, design system, and file paths to match your project. + +## Available Tools + +The MCP server exposes a set of tools that the AI uses automatically based on your prompts. You never need to call them directly — just describe what you want. + +To see the current full list of tools and their parameters at any time, ask your AI assistant: + +> *"What tools does the Ignite UI Theming MCP provide?"* + +Here is a brief overview of each tool: + +| Tool | Description | +|------|-------------| +| `detect_platform` | Reads `package.json` and identifies whether the project uses Ignite UI for Angular, Web Components, React, or Blazor. Selects the correct import paths and component selectors for all subsequent tools. | +| `create_palette` | Generates a color palette with automatic shade variants (50–900, A100–A700) from your base brand colors. Accepts an `output` parameter (`sass` or `css`) and a `designSystem` to select the schema. | +| `create_custom_palette` | Fine-grained palette creation — specify exact hex values for every shade when automatic generation is not suitable. | +| `create_typography` | Sets up a font family and type scale for a given design system. | +| `create_elevations` | Configures box-shadow elevation levels (0–24) for Material or Indigo design systems. | +| `create_theme` | One-shot complete theme: palette + typography + elevations, ready to include in your `styles.scss`. Accepts a `designSystem` (`material`, `bootstrap`, `fluent`, or `indigo`) and `variant` (`light` or `dark`). | +| `set_size` | Sets `--ig-size` globally or for a specific component (`small`, `medium`, or `large`). | +| `set_spacing` | Sets `--ig-spacing` (and optionally inline/block overrides) globally or per component. | +| `set_roundness` | Sets `--ig-radius-factor` (0 = square, 1 = fully round) globally or per component. | +| `get_component_design_tokens` | Returns all available design tokens for a component — always call this before `create_component_theme`. | +| `create_component_theme` | Generates Sass or CSS to customize a component's tokens (colors, borders, etc.). Accepts a `variant` (`light` or `dark`) to select the correct schema. | +| `get_color` | Returns a CSS variable reference for a palette color, e.g. `var(--ig-primary-500)`. Supports optional contrast and opacity parameters. | +| `read_resource` | Reads built-in reference resources organized into four categories: platform configs (6), palette/typography/elevation presets (5), color guidance (7), and layout/spacing docs (8). | + +> \[!NOTE] +> For compound components (e.g., `combo`, `select`, `grid`), `get_component_design_tokens` returns a list of related child themes instead of a flat token list. For example, querying `grid` may return child themes such as `grid`, `grid-toolbar`, `grid-filtering`, and `paginator`. The AI will generate a separate `create_component_theme` call for each child theme using the appropriate scoped selector. + +## Example Scenarios + +The following scenarios show what you can ask the AI to do once the MCP server is connected. + +### New Project Theme + +> *"I'm starting a new React project with Ignite UI. Create a complete Material Design light theme with primary #2563eb, secondary #f97316, and Roboto font."* + +The AI will call `create_theme` and return a ready-to-use `styles.scss` file. The generated output will look similar to this: + + + +```scss +/* styles.scss */ +@use 'igniteui-theming' as *; +@use 'igniteui-theming/sass/typography/presets' as *; +@use 'igniteui-theming/sass/elevations/presets' as *; + +$my-palette: palette( + $primary: #2563eb, + $secondary: #f97316, + $surface: #fff, +); + +@include elevations($material-elevations); +@include palette($light-material-palette); +@include typography( + $font-family: "Roboto, sans-serif", + $type-scale: $material-type-scale +); +``` + + + +### Dark Mode Variant + +> *"I need a dark mode version of my existing theme. Keep the same primary blue but use a dark surface #121212."* + +### Brand-Exact Color Shades + +> *"Our design system specifies exact hex values for all 14 shades of our primary green. I'll paste the values — create a custom palette."* + +The AI will call `create_custom_palette` with `mode: "explicit"` for the primary color and auto-generate the rest. + +### Component-Level Customization + +> *"Style the flat button with a purple background #8b5cf6 and white text, with a lighter purple #a78bfa on hover."* + +The AI will call `get_component_design_tokens` first to discover valid token names, then call `create_component_theme` with the correct values. + +### Layout Adjustments + +> *"The calendar feels bloated — reduce its spacing, and make all components slightly smaller."* + +The AI will call `set_spacing` scoped to the calendar component and `set_size` at the `:root` level. + +## Troubleshooting + +**Platform not detected** + +If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `igniteui-react`) as a dependency. You can also tell the AI explicitly: *"Use the React platform."* + +**Luminance warning on colors** + +If the AI warns about color luminance, it means the chosen color is too light or too dark for automatic shade generation to work well. Either pick a mid-range color or ask the AI to use `create_custom_palette` with explicit shade values instead. + +**Surface color mismatch** + +For light themes use a light surface (e.g., `#fafafa`). For dark themes use a dark surface (e.g., `#121212`). Mismatched surface colors cause the AI to emit a warning. + +## Additional Resources + +- [Ignite UI for React Skills](./skills.md) + + + +
+ +Our community is active and always welcoming to new ideas. + +- [Ignite UI for React **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-react) +- [Ignite UI for React **GitHub**](https://github.com/IgniteUI/igniteui-react) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/dock-manager.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/dock-manager.md index 99939c6a8..950ff20c2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/dock-manager.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/dock-manager.md @@ -1117,11 +1117,20 @@ The Dock Manager comes with a light and a dark theme. The light theme is the def ## Localization -The Dock Manager component supports localizing the strings used in the context menus, tooltips and aria attributes. By default, the Dock Manager detects the language of the page by searching for a [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute on any of its parents. If the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute is not set or is set to a value which the Dock Manager does not support, the default language used is [English (en)](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsEN). The Dock Manager provides built-in localized strings for the following languages: [English (en)](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsEN), [Japanese (jp)](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsJP), [Korean (ko)](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsKO) and [Spanish (es)](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsES). +The Dock Manager lets you localize the strings used in context menus, tooltips, and ARIA attributes. By default, it reads the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute from the root `` element to determine which language to use. If the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute is missing or set to an unsupported value, the Dock Manager uses [English (en)](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsEN). -In order to provide resource strings for any other language use the [addResourceStrings](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#addResourceStrings) method: +Ready-to-use Dock Manager resource strings for Spanish (`es`), Japanese (`ja`), and Korean (`ko`) are provided via the `igniteui-i18n-resources` peer dependency. To use one of these languages, install `igniteui-i18n-resources` and register the corresponding bundle with `igniteui-i18n-core`: + +```ts +import { registerI18n } from 'igniteui-i18n-core'; +import { DockManagerResourceStringsES } from 'igniteui-i18n-resources'; + +registerI18n(DockManagerResourceStringsES, 'es'); +``` + +If you need to support a different language, use the [addResourceStrings](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#addResourceStrings) method to provide your own translated strings: ```ts import { addResourceStrings } from 'igniteui-dockmanager'; @@ -1136,7 +1145,7 @@ addResourceStrings('fr', dockManagerStringsFr); -The Dock Manager exposes [`resourceStrings`](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/classes/igcdockmanagercomponent.html#resourceStrings) property which allows you to modify the strings. If you set the [`resourceStrings`](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/classes/igcdockmanagercomponent.html#resourceStrings) property, the Dock Manager will use your strings no matter what [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute is set. +The Dock Manager also exposes a [`resourceStrings`](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/classes/igcdockmanagercomponent.html#resourceStrings) property that you can use to modify individual strings directly. When you set the [`resourceStrings`](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/classes/igcdockmanagercomponent.html#resourceStrings) property, the Dock Manager uses the strings you provide regardless of the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute on the page. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/general-changelog-dv-wc.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/general-changelog-dv-wc.md index 35beaa54e..5eb807cbc 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/general-changelog-dv-wc.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/general-changelog-dv-wc.md @@ -13,6 +13,18 @@ _tocName: Changelog All notable changes for each version of Ignite UI for Web Components are documented on this page. +## **7.0.1 (March 2026)** + +#### Bug Fixes + +| Bug Number | Control | Description | +|------------|---------|-------------| +| 3055 | IgcDataPieChart | DataPieChart - missing styling properties for the Others Slice | +| 38668 | IgcDataTooltipLayer | TitleTextColor is overridden when chart's TitleTextColor is used | +| 40238 | Excel | fixed Excel Formula parser - Workbook.Load() throwing an Excel.FormulaParseException | +| 41167 | Excel | Object's Formulas are not round-tripped - Added Excel support for round tripping the camera tool | +| 41419 | Excel | Saving a VBA Signed Excel file does not keep a signature/certificate. | + ## **7.0.0 (February 2026)** ### igniteui-webcomponents-charts @@ -24,8 +36,8 @@ All notable changes for each version of Ignite UI for Web Components are documen |2327|IgcToolbar|SubPanel sample not working in WebComponents| |2638|IgcDataChart|Improve mouse hot detection for rotated labels| |2959|IgcLinearGauge|Gauges should not call View functions| -|2842|IgcDataChart|AssigningCategoryStyle args.GetItems is null or not working to update items in the fragment series| |2326|IgcDataChart|Add property to set others color| +|41594|IgcDataChart|AssigningCategoryStyle args.GetItems is null or not working to update items in the fragment series| ### igniteui-webcomponents diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/overview.md index 4c5d0f44f..2a4fa3885 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/overview.md @@ -33,7 +33,7 @@ Our free, open-source Web Components Grid Lite comes with the following column-b To install Grid Lite, go to the root folder of your project (where `package.json` is located) and run the following command using npm: ```cmd -npm install igniteui-grid-lite --save +npm install igniteui-grid-lite ``` Or using yarn: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/skills.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/skills.md index 7fc1310ff..52da2470c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/skills.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/skills.md @@ -1,160 +1,168 @@ --- -title: AI-Assisted Development | AI Skills | Ignite UI for Web Components | Infragistics +title: Agent Skills | AI Skills | AI-Assisted Development | Ignite UI for Web Components | Infragistics _description: Learn how to use Agent Skills to supercharge AI-assisted development with Ignite UI for Web Components components, grids, data operations, and theming. -_keywords: Ignite UI for Web Components, copilot skills, ai assisted development, github copilot, cursor, windsurf, claude, jetbrains ai +_keywords: Ignite UI for Web Components, agent skills, ai assisted development, github copilot, cursor, windsurf, claude, gemini cli, junie _license: MIT mentionedTypes: [] -_tocName: {ProductName} Skills +_tocName: Agent Skills --- -# AI-Assisted Development +# Ignite UI for Web Components Agent Skills -Ignite UI for Web Components ships with **Agent Skills** — structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI, etc.) how to work with Ignite UI for Web Components. These skill files provide context-aware guidance on components, grids, data operations, and theming, enabling your AI assistant to generate accurate, idiomatic code that follows best practices. +Ignite UI for Web Components ships with **[Agent Skills](https://agentskills.io/)** — structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, Gemini CLI, JetBrains Junie, etc.) how to work with Ignite UI for Web Components. These skill files provide context-aware guidance on components, grids, data operations, and theming, enabling your AI assistant to generate accurate, idiomatic code that follows best practices. + +> \[!NOTE] +> The AI tooling landscape is evolving rapidly. Skill discovery locations and distribution options may change as tools and IDEs are updated. Always consult the official documentation for your specific tool or agent for the latest information. ## Available Skills -The skill files live in the [`skills/`](https://github.com/IgniteUI/igniteui-webcomponents/tree/master/skills) directory of the Ignite UI for WebComponents repository: +The skill files live in the [`skills/`](https://github.com/IgniteUI/igniteui-webcomponents/tree/master/skills) directory of the Ignite UI for Web Components repository: + + | Skill | Path | Description | |:------|:-----|:------------| -| Components & Layout | [`skills/igniteui-wc-choose-components/SKILL.md`](https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-choose-components/skill.md) | Standalone components, form controls, overlays, layout | -| Platform Integration | [`skills/igniteui-wc-integrate-with-framework/SKILL.md`](https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-integrate-with-framework/skill.md) | Helps with integrating components to the user's platform of choice | -| Theming & Styling | [`skills/igniteui-wc-customize-component-theme/SKILL.md`](https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-customize-component-theme/skill.md) | Palettes, typography, elevations, component themes, MCP server | -| Optimization | [`skills/igniteui-wc-optimize-bundle-size/SKILL.md`](https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-optimize-bundle-size/skill.md) | Ensuring best practices for tree shaking to optimize bundle size - -There are two ways to use skills with your AI assistant: [create a persistent IDE agent](#approach-1-create-a-persistent-ide-agent) that always applies them automatically, or [download and load them manually](#approach-2-download-and-load-the-skills) into your preferred IDE on demand. - -## Approach 1: Create a Persistent IDE Agent - -This approach wires the skills permanently into your project so that every AI session automatically follows the Ignite UI for Web Components guidelines — no copy-pasting required. +| Components & Layout | [`skills/igniteui-wc-choose-components/SKILL.md`](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-choose-components/SKILL.md) | Standalone components, form controls, overlays, layout | +| Platform Integration | [`skills/igniteui-wc-integrate-with-framework/SKILL.md`](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-integrate-with-framework/SKILL.md) | Helps with integrating components to the user's platform of choice | +| Theming & Styling | [`skills/igniteui-wc-customize-component-theme/SKILL.md`](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | +| Optimization | [`skills/igniteui-wc-optimize-bundle-size/SKILL.md`](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-optimize-bundle-size/SKILL.md) | Ensuring best practices for tree shaking to optimize bundle size | -### GitHub Copilot (VS Code) + -GitHub Copilot reads custom instructions from a `.github/copilot-instructions.md` file at the root of your repository. To create a persistent agent: +## Skill Locations -1. Create (or open) `.github/copilot-instructions.md` in your project root. -2. Add a reference or paste the relevant skill content into that file. For example: +Each AI coding tool discovers skills from specific directories. Place your skill files in the appropriate location so your AI assistant can find and use them automatically. The general `.agents/skills/` convention is supported across multiple tools, while each tool also has its own specific directories. -```markdown -# Copilot Instructions +### General (`.agents/skills/`) -This project uses Ignite UI for Web Components. Follow the guidelines in the skill files below: +The `.agents/skills/` directory is a cross-agent convention supported by multiple tools, including [VS Code with Copilot](https://code.visualstudio.com/docs/copilot/customization/agent-skills), [OpenAI Codex](https://developers.openai.com/codex/skills), [Cursor](https://cursor.com/docs/skills), [Gemini CLI](https://geminicli.com/docs/cli/skills/#skill-discovery-tiers), [Antigravity](https://antigravity.google/docs/skills), and [Windsurf](https://docs.windsurf.com/windsurf/cascade/skills#skill-scopes). Copy the skill directories into `.agents/skills/` in your project root: -- Components & Layout: https://github.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-choose-components/SKILL.md -- Theming & Styling: https://github.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md -``` - -3. Alternatively, paste the full content of the relevant `SKILL.md` files directly into `copilot-instructions.md` for fully offline, self-contained instructions. -4. Copilot will now apply these instructions automatically on every chat and inline suggestion in VS Code. + -### Cursor + .agents/ + skills/ + igniteui-wc-choose-components/ + SKILL.md + igniteui-wc-integrate-with-framework/ + SKILL.md + igniteui-wc-customize-component-theme/ + SKILL.md + igniteui-wc-optimize-bundle-size/ + SKILL.md -Cursor supports persistent project rules through a `.cursorrules` file or the `.cursor/rules/` directory: + -1. Create `.cursorrules` in your project root (or `.cursor/rules/igniteui.md` for a named rule). +For user-level (global) skills available across all projects, use `~/.agents/skills/` instead. -2. Paste the contents of the desired `SKILL.md` files into that file. For example: +### GitHub Copilot - ```markdown - # Ignite UI for Web Components Rules +[GitHub Copilot](https://docs.github.com/en/copilot/concepts/agents/about-agent-skills) discovers skills from: - - - ``` +| Scope | Location | +|:------|:---------| +| Project | `.github/skills/`, `.claude/skills/` | +| Personal | `~/.copilot/skills/`, `~/.claude/skills/` (Copilot coding agent and GitHub Copilot CLI only) | -3. Cursor will include these rules in every AI request automatically. You can also use the `@rules` mention in chat to reference a specific rule on demand. +> **Tip:** In [VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills), these locations also include the general `.agents/skills/` and `~/.agents/skills/` and you can configure additional skill locations using the `chat.agentSkillsLocations` setting. -### Windsurf +### Claude -Windsurf reads persistent rules from a `.windsurfrules` file at the project root: +[Claude](https://code.claude.com/docs/en/skills#where-skills-live) discovers skills from: -1. Create `.windsurfrules` in your project root. -2. Paste the contents of the relevant `SKILL.md` files into it. -3. Every Cascade AI session in Windsurf will now include these as persistent instructions. +| Scope | Location | +|:------|:---------| +| Project | `.claude/skills/` | +| Personal | `~/.claude/skills/` | -### JetBrains IDEs (WebStorm, IntelliJ) +### Cursor -JetBrains AI Assistant supports project-level prompts that are applied to every AI interaction: +[Cursor](https://cursor.com/docs/skills#skill-directories) discovers skills from: -1. Open **Settings** (or **Preferences** on macOS) → **Tools** → **AI Assistant** → **Project-level prompt**. -2. Paste the contents of the relevant `SKILL.md` files into the prompt field. -3. Click **Apply**. The AI Assistant will now follow these instructions for all requests inside the project. +| Scope | Location | +|:------|:---------| +| Project | `.agents/skills/`, `.cursor/skills/` | +| User (global) | `~/.cursor/skills/` | -### Claude Code +### Gemini CLI and Antigravity -Claude Code supports a `CLAUDE.md` file at the project root as persistent agent instructions: +[Gemini CLI](https://geminicli.com/docs/cli/skills/#skill-discovery-tiers) and [Antigravity](https://antigravity.google/docs/skills) discover skills from: -1. Create `CLAUDE.md` in your project root. +| Scope | Location | +|:------|:---------| +| Workspace | `.gemini/skills/`, `.agents/skills/` | +| User | `~/.gemini/skills/`, `~/.agents/skills/` | -2. Paste the contents of the relevant `SKILL.md` files into it. For example: +> **Tip:** Use the `/skills` slash command in Gemini CLI to view and manage installed skills. - ```markdown - # Project Instructions +### Junie (JetBrains IDEs) - This project uses Ignite UI for Web Components. Always follow these guidelines: +[Junie](https://junie.jetbrains.com/docs/agent-skills.html) discovers skills from: - - ``` +| Scope | Location | +|:------|:---------| +| Project | `.junie/skills/` | +| User | `~/.junie/skills/` | -3. Claude Code will automatically read `CLAUDE.md` at the start of every session. +### Windsurf -### General AI Agents +[Windsurf](https://docs.windsurf.com/windsurf/cascade/skills#skill-scopes) discovers skills from: -Alternatively, one can use a general Agent Skills config so your Agent can easily discover and load skills automatically on demand: +| Scope | Location | +|:------|:---------| +| Workspace | `.windsurf/skills/`, `.agents/skills/` | +| Global | `~/.codeium/windsurf/skills/`, `~/.agents/skills/` | -1. Create a `.agents/skills/` directory in your project root. +*** -2. Copy the skill directories from `igniteui-webcomponents/skills/` repository into `.agents/skills/`: +## Installing Skills - ```shell - .agents/ - skills/ - igniteui-wc-choose-components/ - igniteui-wc-customize-component-theme/ - igniteui-wc-optimize-bundle-size/ - ``` +Use one of the options below to download and place the skill files into the appropriate [skill location](#skill-locations) for your AI assistant. -3. The Agent will now discover these skills and load the relevant one automatically based on the context of your request. +### **Option A — Use the installed npm package** -> **Tip for VS Code:** VS Code searches for skills in `.github/skills/`, `.claude/skills/`, and `.agents/skills/` by default. You can configure additional locations using the `chat.agentSkillsLocations` setting. +If Ignite UI for Web Components is already installed in your project, the skill files are available under `node_modules`. To copy them into your project (e.g. into `.agents/skills/`), run: -> **Tip:** VS Code searches for skills in `.github/skills/`, `.claude/skills/`, and `.agents/skills/` by default. You can configure additional locations using the `chat.agentSkillsLocations` setting. +**macOS / Linux / Windows (PowerShell)** -*** +```bash +cp -r node_modules/igniteui-webcomponents/skills/. .agents/skills/ +``` -## Approach 2: Download and Load the Skills +**Windows (Command Prompt)** -Use this approach when you want to load a specific skill on demand, without permanently modifying project configuration files. +```cmd +robocopy node_modules\igniteui-webcomponents\skills .agents\skills /E +``` -### Step 1: Get the Skill Files +Or copy individual skill directories as needed: -#### **Option A — Download individual files** +**macOS / Linux / Windows (PowerShell)** -Each skill file can be downloaded directly from GitHub. First, create the `.agents/skills/` directory in your project root, then download the files into it: + ```bash -# Create the .agents/skills directory -mkdir -p .agents/skills - -# Download skill files into .agents/skills/ -cd .agents/skills +cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-choose-components .agents/skills/ +cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-customize-component-theme .agents/skills/ +cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-optimize-bundle-size .agents/skills/ +cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-integrate-with-framework .agents/skills/ +``` -# Components & Layout -curl -O https://raw.githubusercontent.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-choose-components/SKILL.md + -# Theming & Styling -curl -O https://raw.githubusercontent.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md +**Windows (Command Prompt)** -# Optimization -curl -O https://raw.githubusercontent.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-optimize-bundle-size/SKILL.md + -# Platform Integration -curl -O https://raw.githubusercontent.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-integrate-with-framework/SKILL.md +```cmd +robocopy node_modules\igniteui-webcomponents\skills\igniteui-wc-choose-components .agents\skills\igniteui-wc-choose-components /E +robocopy node_modules\igniteui-webcomponents\skills\igniteui-wc-customize-component-theme .agents\skills\igniteui-wc-customize-component-theme /E +robocopy node_modules\igniteui-webcomponents\skills\igniteui-wc-optimize-bundle-size .agents\skills\igniteui-wc-optimize-bundle-size /E +robocopy node_modules\igniteui-webcomponents\skills\igniteui-wc-integrate-with-framework .agents\skills\igniteui-wc-integrate-with-framework /E ``` -The skill files will now be available in `.agents/skills/` and will be automatically discovered by compatible AI assistants. + -#### **Option B — Use the `gemini skills` CLI** +### **Option B — Use the `gemini skills` CLI** The `gemini skills install` command installs skills directly from a Git repository. It supports two scopes: @@ -163,6 +171,8 @@ The `gemini skills install` command installs skills directly from a Git reposito **Install to user scope (default):** + + ```bash gemini skills install https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-choose-components gemini skills install https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-customize-component-theme @@ -170,8 +180,12 @@ gemini skills install https://github.com/IgniteUI/igniteui-webcomponents.git --p gemini skills install https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-integrate-with-framework ``` + + **Install to workspace scope:** + + ```bash gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-choose-components gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-customize-component-theme @@ -179,61 +193,11 @@ gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-web gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-integrate-with-framework ``` -Once installed, the skill files are available in the respective location and will be automatically discovered by compatible AI assistants. - -#### **Option C — Use the installed npm package** - -If Ignite UI for Web Components is already installed in your project, the skill files are available under `node_modules`. To copy them into your project (e.g. for use with General AI Agents under `.agents/skills/`), run: - -```bash -# macOS / Linux -cp -r node_modules/igniteui-webcomponents/skills/. .agents/skills/ -``` - -```powershell -# Windows (PowerShell) -Copy-Item -Recurse node_modules\igniteui-webcomponents\skills\* .agents\skills\ -``` - -Or copy individual skill directories as needed: - -**macOS / Linux** - -```bash -cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-choose-components .agents/skills/ -cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-customize-component-theme .agents/skills/ -cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-optimize-bundle-size .agents/skills/ -cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-integrate-with-framework .agents/skills/ -``` + -**Windows (PowerShell)** - -```powershell -Copy-Item -Recurse node_modules\igniteui-webcomponents\skills\igniteui-wc-choose-components .agents\skills\ -Copy-Item -Recurse node_modules\igniteui-webcomponents\skills\igniteui-wc-customize-component-theme .agents\skills\ -Copy-Item -Recurse node_modules\igniteui-webcomponents\skills\igniteui-wc-optimize-bundle-size .agents\skills\ -Copy-Item -Recurse node_modules\igniteui-webcomponents\skills\igniteui-wc-integrate-with-framework .agents\skills\ -``` - -**Windows (Command Prompt)** - -```cmd -xcopy /E /I node_modules\igniteui-webcomponents\skills\igniteui-wc-choose-components .agents\skills\onents -xcopy /E /I node_modules\igniteui-webcomponents\skills\igniteui-wc-customize-component-theme .agents\skills -xcopy /E /I node_modules\igniteui-webcomponents\skills\igniteui-wc-optimize-bundle-size .agents\skills\ -xcopy /E /I node_modules\igniteui-webcomponents\skills\igniteui-wc-integrate-with-framework .agents\skills\ -``` - -The skill files are located at: - -```shell -node_modules\igniteui-webcomponents\skills\igniteui-wc-choose-components\SKILL.md -node_modules\igniteui-webcomponents\skills\igniteui-wc-customize-component-theme\SKILL.md -node_modules\igniteui-webcomponents\skills\igniteui-wc-optimize-bundle-size\SKILL.md -node_modules\igniteui-webcomponents\skills\igniteui-wc-integrate-with-framework\SKILL.md -``` +Once installed, the skill files are available in the respective location and will be automatically discovered by compatible AI assistants. -#### **Option D — Use the `npx skills` CLI** +### **Option C — Use the `npx skills` CLI** The `skills` CLI is an interactive tool that downloads and installs skills directly into your project. Run the following command in your project root: @@ -251,24 +215,15 @@ Once complete, the skills are ready to use — no manual file copying required. > **Note:** Requires Node.js and an internet connection. The command fetches the latest skill files from the [IgniteUI/igniteui-webcomponents](https://github.com/IgniteUI/igniteui-webcomponents) repository. -### Step 2: Load the Skill into Your IDE - -Once you have the files, open them and load them into your AI assistant: - -| IDE / Tool | How to load | -|:-----------|:------------| -| **VS Code + GitHub Copilot** | Use `#file:path/to/SKILL.md` in the Copilot Chat input to attach it as context for that session. | -| **Cursor** | Drag the `SKILL.md` file into the chat window, or type `@file` and select it. | -| **Windsurf** | Attach the file using the **+** button in the Cascade chat panel. | -| **JetBrains AI Assistant** | Click the paperclip icon in the AI chat to attach the file as context. | -| **Claude Desktop** | Drag the file into the chat or add it to the project knowledge base via **Project → Add Content**. | -| **Other assistants** | Open the `SKILL.md` file, copy its full contents, and paste them into the system prompt or at the top of your first message. | - *** ## Theming MCP Server -The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file](https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-customize-component-theme/skill.md) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs. + + +The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs. + + For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](./theming-mcp.md) documentation. @@ -276,9 +231,12 @@ For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](./
+ + - [Getting Started with Ignite UI for Web Components](../general-getting-started.md) - [Ignite UI CLI](../general-cli-overview.md) -- [Ignite UI Theming MCP](./theming-mcp.md) + +
Our community is active and always welcoming to new ideas. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/splitter.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/splitter.md new file mode 100644 index 000000000..096db7d50 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/splitter.md @@ -0,0 +1,236 @@ +--- +title: Web Components Splitter Component | Layout Controls | Infragistics +_description: Use the Ignite UI for Web Components Splitter component to create two resizable panes with horizontal or vertical layouts, collapse and expand behavior, keyboard support, and nested split views. +_keywords: splitter, split panes, resizable panes, web components splitter, Web Components splitter, Ignite UI for Web Components +_license: MIT +mentionedTypes: ["Splitter"] +_tocName: Splitter +--- + +# Web Components Splitter Overview + +The Ignite UI for Web Components Splitter provides a resizable split-pane layout that divides content into two areas: `start` and `end`. Users can drag the splitter bar, use keyboard shortcuts, or collapse and expand panes with built-in controls. You can also nest splitters to build complex dashboard-style layouts. + +## Web Components Splitter Example + +```css +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +.controls { + display: flex; + flex-wrap: wrap; + gap: 16px; + align-items: center; + padding: 12px 16px; + height: 60px; + box-sizing: border-box; +} + +p { + padding: 0 16px; +} +``` +```css +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +``` + + +
+ +## Usage + +First, you need to install the Ignite UI for Web Components by running the following command: + +```cmd +npm install igniteui-webcomponents +``` + +Before using the `Splitter`, you need to register it as follows: + +```ts +import { defineComponents, IgcSplitterComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcSplitterComponent); +``` + +For a complete introduction to the Ignite UI for Web Components, read the [**Getting Started**](../general-getting-started.md) topic. + +Use the `start` and `end` slots to place pane content: + +```html + +
Start pane content
+
End pane content
+ +``` + +### Orientation + +Set the `orientation` property to control pane direction: + +- `horizontal` (default): start and end panes are rendered left and right. +- `vertical`: start and end panes are rendered top and bottom. + +```html + +
Top pane
+
Bottom pane
+ +``` + +### Pane Size and Constraints + +Use size properties to set initial and constrained pane sizes: + +- `start-size`, `end-size` +- `start-min-size`, `end-min-size` +- `start-max-size`, `end-max-size` + +Values accept CSS length values such as `px` and `%`. + +```html + +
Navigation
+
Main content
+ +``` + +### Collapsing and Resizing + +Use these properties to control interactions: + +- `disable-resize`: disables pane resizing. +- `disable-collapse`: disables pane collapsing. +- `hide-drag-handle`: hides the drag handle. +- `hide-collapse-buttons`: hides collapse and expand buttons. + +You can also collapse or expand panes programmatically: + +```ts +const splitter = document.querySelector('igc-splitter') as IgcSplitterComponent; + +splitter.toggle('start'); // collapse start pane +splitter.toggle('start'); // expand start pane +``` + +### Nested Splitters + +Splitters can be nested to create multi-region layouts. + +```css +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +p { + padding: 0 16px; +} +``` +```css +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +``` + + +## Events + +The Splitter emits the following events during resize operations: + +- `igcResizeStart`: fired once when resizing starts. +- `igcResizing`: fired continuously while resizing. +- `igcResizeEnd`: fired once when resizing ends. + +The event detail includes current `startPanelSize`, `endPanelSize`, and `delta` for ongoing and end events. + +```ts +const splitter = document.querySelector('igc-splitter'); + +splitter?.addEventListener('igcResizeEnd', (event: CustomEvent) => { + console.log(event.detail.startPanelSize, event.detail.endPanelSize, event.detail.delta); +}); +``` + +## Keyboard Navigation + +When the splitter bar is focused: + +| Keys | Description | +| ---- | ----------- | +| Arrow Left / Arrow Right | Resize panes in horizontal orientation | +| Arrow Up / Arrow Down | Resize panes in vertical orientation | +| Home | Snap start pane to its minimum size | +| End | Snap start pane to its maximum size | +| Ctrl + Arrow Left / Arrow Up | Collapse or expand the start pane | +| Ctrl + Arrow Right / Arrow Down | Collapse or expand the end pane | + +## Styling + +The `Splitter` component exposes CSS parts for styling: + +| Name | Description | +| ---- | ----------- | +| `splitter-bar` | The draggable separator between panes | +| `drag-handle` | The drag handle element in the splitter bar | +| `start-pane` | The start pane container | +| `end-pane` | The end pane container | +| `start-collapse-btn` | Button that collapses the start pane | +| `end-collapse-btn` | Button that collapses the end pane | +| `start-expand-btn` | Button that expands the start pane | +| `end-expand-btn` | Button that expands the end pane | + +It also supports theme CSS variables, including: + +- `--bar-color` +- `--handle-color` +- `--expander-color` +- `--bar-color-active` +- `--handle-color-active` +- `--expander-color-active` +- `--focus-color` +- `--size` + +```css +igc-splitter { + --bar-color: #011627; + --handle-color: #ecaa53; + --expander-color: #ecaa53; + --bar-color-active: #011627; + --handle-color-active: #ecaa53; + --expander-color-active: #ecaa53; + --focus-color: #ecaa53; +} +``` + +```css +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +igc-splitter { + --bar-color: #011627; + --handle-color: #ecaa53; + --expander-color: #ecaa53; + --bar-color-active: #011627; + --handle-color-active: #ecaa53; + --expander-color-active: #ecaa53; + --focus-color: #ecaa53; +} + +p { + padding: 0 16px; +} +``` + + +## API References + +- `Splitter` +- [`Styling & Themes`](../themes/overview.md) + +## Additional Resources + +- [Ignite UI for Web Components **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-web-components) +- [Ignite UI for Web Components **GitHub**](https://github.com/IgniteUI/igniteui-webcomponents) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/theming-mcp.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/theming-mcp.md index d224134e0..c43eeb2c3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/theming-mcp.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/theming-mcp.md @@ -259,6 +259,8 @@ The following scenarios show what you can ask the AI to do once the MCP server i The AI will call `create_theme` and return a ready-to-use `styles.scss` file. The generated output will look similar to this: + + ```scss /* styles.scss */ @use 'igniteui-theming' as *; @@ -274,11 +276,13 @@ $my-palette: palette( @include elevations($material-elevations); @include palette($light-material-palette); @include typography( - $font-family: "Titillium Web, sans-serif", + $font-family: "Roboto, sans-serif", $type-scale: $material-type-scale ); ``` + + ### Dark Mode Variant > *"I need a dark mode version of my existing theme. Keep the same primary blue but use a dark surface #121212."* @@ -305,7 +309,7 @@ The AI will call `set_spacing` scoped to the calendar component and `set_size` a **Platform not detected** -If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `igniteui-react`) as a dependency. You can also tell the AI explicitly: *"Use Ignite UI for Web Components."* +If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `igniteui-webcomponents`) as a dependency. You can also tell the AI explicitly: *"Use the Web Components platform."* **Luminance warning on colors** @@ -318,5 +322,20 @@ For light themes use a light surface (e.g., `#fafafa`). For dark themes use a da ## Additional Resources - [Ignite UI for Web Components Skills](./skills.md) + + + +
+ +Our community is active and always welcoming to new ideas. + - [Ignite UI for Web Components **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-web-components) - [Ignite UI for Web Components **GitHub**](https://github.com/IgniteUI/igniteui-webcomponents) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/package.json b/packages/igniteui-mcp/igniteui-doc-mcp/package.json index b417e5400..4876295c5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/package.json +++ b/packages/igniteui-mcp/igniteui-doc-mcp/package.json @@ -41,9 +41,9 @@ "clear:react": "npx tsx -e \"import{rmSync}from'fs';['docs_processing','docs_prepeared','docs_final'].forEach(d=>{rmSync('dist/'+d+'/react',{recursive:true,force:true})})\"", "clear:blazor": "npx tsx -e \"import{rmSync}from'fs';['docs_processing','docs_prepeared','docs_final'].forEach(d=>{rmSync('dist/'+d+'/blazor',{recursive:true,force:true})})\"", "clear:webcomponents": "npx tsx -e \"import{rmSync}from'fs';['docs_processing','docs_prepeared','docs_final'].forEach(d=>{rmSync('dist/'+d+'/webcomponents',{recursive:true,force:true})})\"", - "build:xplat-blazor": "cd common/igniteui-xplat-docs && npm install --silent && npm run buildBlazor", - "build:xplat-react": "cd common/igniteui-xplat-docs && npm install --silent && npm run buildReact", - "build:xplat-wc": "cd common/igniteui-xplat-docs && npm install --silent && npm run buildWC", + "build:xplat-blazor": "cd common/igniteui-xplat-docs && npm install --silent && npx tsc --skipLibCheck && npx gulp buildOutputBlazor", + "build:xplat-react": "cd common/igniteui-xplat-docs && npm install --silent && npx tsc --skipLibCheck && npx gulp buildOutputReact", + "build:xplat-wc": "cd common/igniteui-xplat-docs && npm install --silent && npx tsc --skipLibCheck && npx gulp buildOutputWC", "build:docs:angular": "git submodule update --init angular/igniteui-angular && npm run build && node scripts/build-docs.mjs angular", "build:docs:webcomponents": "git submodule update --init webcomponents/igniteui-webcomponents && npm run build && node scripts/build-docs.mjs webcomponents", "build:docs:all": "npm run build:docs:angular && npm run build:docs:webcomponents",