diff --git a/cspell.json b/cspell.json index 92337f7824..e21b8b5f4d 100644 --- a/cspell.json +++ b/cspell.json @@ -260,6 +260,8 @@ "batchediting", "updateparameters", "alldata", - "subtag" + "subtag", + "junie", + "xplat" ] } diff --git a/en/components/ai/skills.md b/en/components/ai/skills.md index 148ec1dba8..63e577ae26 100644 --- a/en/components/ai/skills.md +++ b/en/components/ai/skills.md @@ -1,150 +1,165 @@ --- -title: Ignite UI for Angular Skills | AI Skills | AI-Assisted Development | Ignite UI for Angular | Infragistics +title: Agent Skills | AI Skills | AI-Assisted Development | Ignite UI for Angular | Infragistics _description: Learn how to use Agent Skills to supercharge AI-assisted development with Ignite UI for Angular components, grids, data operations, and theming. -_keywords: ignite ui for angular, copilot skills, ai assisted development, github copilot, cursor, windsurf, claude, jetbrains ai +_keywords: Ignite UI for Angular, agent skills, ai assisted development, github copilot, cursor, windsurf, claude, gemini cli, junie +_license: MIT +mentionedTypes: [] --- -# Ignite UI for Angular Skills +# Ignite UI for Angular Agent Skills -Ignite UI for Angular 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 Angular. 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 Angular 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 Angular. 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-angular/tree/master/skills) directory of the Ignite UI for Angular repository: + + | Skill | Path | Description | |:------|:-----|:------------| | Components & Layout | [`skills/igniteui-angular-components/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-components/SKILL.md) | Standalone components, form controls, overlays, layout | | Data Grids | [`skills/igniteui-angular-grids/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-grids/SKILL.md) | Grid, Tree Grid, Hierarchical Grid, Pivot Grid, sorting, filtering, grouping, paging, remote data | | Theming & Styling | [`skills/igniteui-angular-theming/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | -> **Note:** Starting with Ignite UI for Angular **21.1.0**, these skills are automatically discovered when placed in your agent's skills path (e.g., `.claude/skills`, `.agents/skills`, `.cursor/rules/`). This release ships with an optional `ng update` migration to add these skills to your project automatically when updating to `igniteui-angular` 21.1.0 or later. +> \[!NOTE] +> Starting with Ignite UI for Angular **21.1.0**, these skills are automatically discovered when placed in your agent's skills path (e.g., `.claude/skills`, `.agents/skills`, `.cursor/rules/`). This release ships with an optional migration to add these skills to your project automatically. -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 +## Skill Locations -This approach wires the skills permanently into your project so that every AI session automatically follows the Ignite UI for Angular guidelines — no copy-pasting required. +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. -### GitHub Copilot (VS Code) +### General (`.agents/skills/`) -GitHub Copilot reads custom instructions from a `.github/copilot-instructions.md` file at the root of your repository. To create a persistent agent: +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: -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: + - ```markdown - # Copilot Instructions + .agents/ + skills/ + igniteui-angular-components/ + SKILL.md + igniteui-angular-grids/ + SKILL.md + igniteui-angular-theming/ + SKILL.md - This project uses Ignite UI for Angular. Follow the guidelines in the skill files below: + - - Components & Layout: https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-components/SKILL.md - - Data Grids: https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-grids/SKILL.md - - Theming & Styling: https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md - ``` +For user-level (global) skills available across all projects, use `~/.agents/skills/` instead. -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. +### GitHub Copilot -### Cursor +[GitHub Copilot](https://docs.github.com/en/copilot/concepts/agents/about-agent-skills) discovers skills from: -Cursor supports persistent project rules through a `.cursorrules` file or the `.cursor/rules/` directory: +| Scope | Location | +|:------|:---------| +| Project | `.github/skills/`, `.claude/skills/` | +| Personal | `~/.copilot/skills/`, `~/.claude/skills/` (Copilot coding agent and GitHub Copilot CLI only) | -1. Create `.cursorrules` in your project root (or `.cursor/rules/igniteui.md` for a named rule). -2. Paste the contents of the desired `SKILL.md` files into that file. For example: +> **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. - ``` - # Ignite UI for Angular Rules +### Claude - - - ``` +[Claude](https://code.claude.com/docs/en/skills#where-skills-live) discovers skills from: -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. +| Scope | Location | +|:------|:---------| +| Project | `.claude/skills/` | +| Personal | `~/.claude/skills/` | -### Windsurf +### Cursor -Windsurf reads persistent rules from a `.windsurfrules` file at the project root: +[Cursor](https://cursor.com/docs/skills#skill-directories) 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 | `.agents/skills/`, `.cursor/skills/` | +| User (global) | `~/.cursor/skills/` | -### JetBrains IDEs (WebStorm, IntelliJ) +### Gemini CLI and Antigravity -JetBrains AI Assistant supports project-level prompts that are applied to every AI interaction: +[Gemini CLI](https://geminicli.com/docs/cli/skills/#skill-discovery-tiers) and [Antigravity](https://antigravity.google/docs/skills) discover 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 | +|:------|:---------| +| Workspace | `.gemini/skills/`, `.agents/skills/` | +| User | `~/.gemini/skills/`, `~/.agents/skills/` | -### Claude Code +> **Tip:** Use the `/skills` slash command in Gemini CLI to view and manage installed skills. -Claude Code supports a `CLAUDE.md` file at the project root as persistent agent instructions: +### Junie (JetBrains IDEs) -1. Create `CLAUDE.md` in your project root. -2. Paste the contents of the relevant `SKILL.md` files into it. For example: +[Junie](https://junie.jetbrains.com/docs/agent-skills.html) discovers skills from: - ```markdown - # Project Instructions +| Scope | Location | +|:------|:---------| +| Project | `.junie/skills/` | +| User | `~/.junie/skills/` | - This project uses Ignite UI for Angular. Always follow these guidelines: +### Windsurf - - ``` +[Windsurf](https://docs.windsurf.com/windsurf/cascade/skills#skill-scopes) discovers skills from: -3. Claude Code will automatically read `CLAUDE.md` at the start of every session. +| Scope | Location | +|:------|:---------| +| Workspace | `.windsurf/skills/`, `.agents/skills/` | +| Global | `~/.codeium/windsurf/skills/`, `~/.agents/skills/` | -### General AI Agents +*** -Alternatively, one can use a general Agent Skills config so your Agent can easily discover and load skills automatically on demand: +## Installing Skills -1. Create a `.agents/skills/` directory in your project root. -2. Copy the skill directories from `igniteui-angular/skills/` repository into `.agents/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. - ``` - .agents/ - skills/ - igniteui-angular-components/ - igniteui-angular-grids/ - igniteui-angular-theming/ - ``` +### **Option A — Use the installed npm package** -3. The Agent will now discover these skills and load the relevant one automatically based on the context of your request. +If Ignite UI for Angular 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-angular/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-angular\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 +cp -r node_modules/igniteui-angular/skills/igniteui-angular-components .agents/skills/ +cp -r node_modules/igniteui-angular/skills/igniteui-angular-grids .agents/skills/ +cp -r node_modules/igniteui-angular/skills/igniteui-angular-theming .agents/skills/ +``` -# Define the base target directory -BASE_DIR=".agents/skills" + -# Components & Layout -curl --create-dirs -o $BASE_DIR/igniteui-angular-components/SKILL.md https://raw.githubusercontent.com/IgniteUI/igniteui-angular/master/skills/igniteui-angular-components/SKILL.md +**Windows (Command Prompt)** -# Data Grids -curl --create-dirs -o $BASE_DIR/igniteui-angular-grids/SKILL.md https://raw.githubusercontent.com/IgniteUI/igniteui-angular/master/skills/igniteui-angular-grids/SKILL.md + -# Theming & Styling -curl --create-dirs -o $BASE_DIR/igniteui-angular-theming/SKILL.md https://raw.githubusercontent.com/IgniteUI/igniteui-angular/master/skills/igniteui-angular-theming/SKILL.md +```cmd +robocopy node_modules\igniteui-angular\skills\igniteui-angular-components .agents\skills\igniteui-angular-components /E +robocopy node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids /E +robocopy node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming /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: @@ -153,82 +168,41 @@ 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-angular.git --path skills/igniteui-angular-components gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-grids gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-theming ``` + + **Install to workspace scope:** + + ```bash gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-components gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-grids gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-theming ``` -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 Angular 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-angular/skills/. .agents/skills/ -``` - -```powershell -# Windows (PowerShell) -Copy-Item -Recurse node_modules\igniteui-angular\skills .agents\skills -``` - -Or copy individual skill directories as needed: - -**macOS / Linux** - -```bash -cp -r node_modules/igniteui-angular/skills/igniteui-angular-components .agents/skills/ -cp -r node_modules/igniteui-angular/skills/igniteui-angular-grids .agents/skills/ -cp -r node_modules/igniteui-angular/skills/igniteui-angular-theming .agents/skills/ -``` - -**Windows (PowerShell)** - -```powershell -Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-components .agents\skills\igniteui-angular-components -Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids -Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming -``` - -**Windows (Command Prompt)** - -```cmd -xcopy /E /I node_modules\igniteui-angular\skills\igniteui-angular-components .agents\skills\igniteui-angular-components -xcopy /E /I node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids -xcopy /E /I node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming -``` - -The skill files are located at: - -``` -node_modules/igniteui-angular/skills/igniteui-angular-components/SKILL.md -node_modules/igniteui-angular/skills/igniteui-angular-grids/SKILL.md -node_modules/igniteui-angular/skills/igniteui-angular-theming/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: -```bash +```shell npx skills add IgniteUI/igniteui-angular ``` The CLI will guide you through a series of prompts to: -1. Select which skills to install (components, grids, and theming). +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. @@ -236,35 +210,30 @@ 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-angular](https://github.com/IgniteUI/igniteui-angular) 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-angular/blob/master/skills/igniteui-angular-theming/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 Angular](../general/getting-started.md) -- [Angular Schematics & Ignite UI CLI](../general/cli-overview.md) -- [How to Use Standalone Components](../general/how-to/how-to-use-standalone-components.md) -- [Code Splitting and Multiple Entry Points](../general/code-splitting-and-multiple-entry-points.md) + + + + +- Getting Started with Ignite UI for Angular +- Angular Schematics & Ignite UI CLI + +
Our community is active and always welcoming to new ideas. diff --git a/en/components/ai/theming-mcp.md b/en/components/ai/theming-mcp.md index 021440d451..c4ef910541 100644 --- a/en/components/ai/theming-mcp.md +++ b/en/components/ai/theming-mcp.md @@ -1,7 +1,9 @@ --- -title: Ignite UI Theming MCP | Ignite UI for Angular -_description: Ignite UI for Angular ships with the Ignite UI Theming MCP server that allows you to create custom themes, palettes, typography, and elevations for your Angular 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 Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Artificial Intelligence, AI, MCP, Model Context Protocol, Theming, Custom Themes, Palettes, Typography, Elevations +title: Angular Theming MCP | Infragistics +_description: Angular works with the Ignite UI Theming MCP server that allows you to create custom themes, palettes, typography, and elevations for your Ignite UI for Angular 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 Angular controls, Angular widgets, web widgets, UI widgets, Components Suite, Artificial Intelligence, AI, MCP, Model Context Protocol, Theming, Custom Themes, Palettes, Typography, Elevations +_license: MIT +mentionedTypes: [] --- # Ignite UI Theming MCP @@ -12,34 +14,34 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI ## Overview -Instead of writing Sass theming code 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. +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 Angular, the MCP server also works with **Ignite UI for Web Components**, **React**, and **Blazor**. The `detect_platform` tool reads your `package.json` and selects the correct import paths and selectors automatically. +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 Angular, 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 Angular app with primary #2563eb and coral secondary #f97316."_ +> *"Create a complete Material Design dark theme for my Angular app with primary #2563eb and coral secondary #f97316."* -> _"What design tokens are available for the button component? Customize it with my brand purple #8b5cf6."_ +> *"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."_ +> *"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."_ +> *"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`. For Angular, this is `igniteui-angular` (v15.0 or later). The server also supports `igniteui-webcomponents`, `igniteui-react`, and `igniteui-blazor`. +- 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 `igniteui-angular` installed yet, run: +If you do not have Ignite UI Theming installed yet, run: ```bash -ng add igniteui-angular +npm install igniteui-theming ``` ## Setup @@ -52,9 +54,11 @@ The canonical launch command is: npx -y igniteui-theming igniteui-theming-mcp ``` -> [!NOTE] +> \[!NOTE] > The `-y` flag tells `npx` to auto-confirm the package download prompt so the server can start without manual intervention. + + ### How version resolution works Because `igniteui-theming` is a dependency of `igniteui-angular`, it is already present in your `node_modules` after `npm install`. When you run the launch command above, `npx` detects the locally installed copy and runs it directly — no network request is made. This means the MCP server version always stays in sync with the rest of your Ignite UI packages. @@ -63,6 +67,8 @@ If you run the command outside a project (or before running `npm install`), `npx Choose your AI client below for the specific configuration steps. + + ### 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: @@ -80,7 +86,7 @@ GitHub Copilot in VS Code supports MCP servers through a workspace-level configu Once saved, open the GitHub Copilot chat panel, switch to **Agent** mode, and the Ignite UI Theming tools will be available. -> [!NOTE] +> \[!NOTE] > MCP support in VS Code requires GitHub Copilot and VS Code 1.99 or later. ### Cursor @@ -100,7 +106,7 @@ Cursor supports project-scoped MCP configuration. Create or edit `.cursor/mcp.js The server will be picked up automatically when you open a new Cursor chat session. -> [!NOTE] +> \[!NOTE] > You can also configure MCP servers globally via **Settings → MCP** in Cursor. ### Claude Desktop @@ -151,8 +157,11 @@ Use the `/mcp` command inside Claude Code to verify the server is connected. 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 @@ -168,7 +177,7 @@ JetBrains AI Assistant supports MCP servers through the IDE settings: 5. Click **OK** and restart the AI Assistant. -> [!NOTE] +> \[!NOTE] > MCP support requires the AI Assistant plugin to be installed and enabled in your JetBrains IDE. ### Other MCP Clients @@ -180,9 +189,9 @@ For any other MCP-compatible client, use the STDIO transport with the following ## 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. +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. +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`) @@ -219,7 +228,7 @@ globs: ["**/*.scss", "**/styles/**"] - For dark mode, only the palette changes. Component overrides stay the same. ``` -> [!NOTE] +> \[!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 @@ -228,7 +237,7 @@ The MCP server exposes a set of tools that the AI uses automatically based on yo 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?"_ +> *"What tools does the Ignite UI Theming MCP provide?"* Here is a brief overview of each tool: @@ -248,22 +257,28 @@ Here is a brief overview of each tool: | `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] +> \[!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. -> [!NOTE] + + +> \[!NOTE] > If your project uses the licensed `@infragistics/igniteui-angular` package, tell the AI so it can set the `licensed` parameter on palette, theme, and component tools. This adjusts the generated import paths accordingly. + + ## 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 Angular project with Ignite UI. Create a complete Material Design light theme with primary #2563eb, secondary #f97316, and Roboto font."_ +> *"I'm starting a new Angular 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-angular/theming' as *; @@ -284,25 +299,27 @@ $my-typography: typography( @include theme($my-palette, $schema: $light-material-schema); ``` + + ### Dark Mode Variant -> _"I need a dark mode version of my existing theme. Keep the same primary blue but use a dark surface #121212."_ +> *"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."_ +> *"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. See [Palettes](../themes/palettes.md) for more detail on shade generation. +The AI will call `create_custom_palette` with `mode: "explicit"` for the primary color and auto-generate the rest. See [Palettes](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/palettes) for more detail on shade generation. ### Component-Level Customization -> _"Style the flat button with a purple background #8b5cf6 and white text, with a lighter purple #a78bfa on hover."_ +> *"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 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. @@ -310,7 +327,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-angular`, `igniteui-webcomponents`) as a dependency. You can also tell the AI explicitly: _"Use the Angular platform."_ +If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `igniteui-angular`) as a dependency. You can also tell the AI explicitly: *"Use the Angular platform."* **Luminance warning on colors** @@ -320,6 +337,8 @@ If the AI warns about color luminance, it means the chosen color is too light or 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. + + **Generated Sass does not compile** Ensure `igniteui-angular` and `igniteui-theming` are installed: @@ -328,12 +347,15 @@ Ensure `igniteui-angular` and `igniteui-theming` are installed: ng add igniteui-angular ``` -Also confirm that `core()` is called before any other theming mixin in your `styles.scss`. See [Theming with Sass](../themes/sass/index.md) for the correct file setup. +Also confirm that `core()` is called before any other theming mixin in your `styles.scss`. See [Theming with Sass]() for the correct file setup. + + ## Additional Resources -Related topics: +- [Ignite UI for Angular Skills](./skills.md) +