Merge pull request #6454 from IgniteUI/ESShared/XPlaform_en_igniteui-xplat-docs-to-angular-docs-EN_2026.4.8.1

Changes from igniteui-xplat-docs-to-angular-docs-EN for en

Author: ChronosSF

en/components/ai/ai-assisted-development-overview.md

@@ -0,0 +1,23 @@
+---
+title: AI-Assisted Development with Ignite UI - Ignite UI for Angular
+_description: Ignite UI provides Agent Skills, the Ignite UI CLI MCP server, and the Theming MCP server to ground AI coding assistants in correct component APIs, import paths, and design tokens across Angular, React, and Web Components.
+_keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI CLI MCP, Ignite UI Theming MCP, Agent Skills, AI, agent, Copilot, Cursor
+_language: en
+_license: MIT
+_canonicalLink: "{environment:dvUrl}/components/ai-assisted-development-overview"
+namespace: Infragistics.Controls
+mentionedTypes: []
+---
+
+<!-- schema: Article -->
+
+<!-- cspell:words igniteui mcpservers npx theming -->
+
+## Related Topics
+
+- [Agent Skills](skills.md) - Full setup guide for loading and wiring Skill packages in VS Code, Cursor, Windsurf, and JetBrains
+- [CLI MCP](cli-mcp.md) - Full setup guide for Ignite UI CLI MCP, including recommended CLI-first setup and client-specific configuration
+
+<!---->
+
+- [Theming MCP](theming-mcp.md) - Theming MCP server setup and theming workflow examples

en/components/ai/cli-mcp.md

@@ -8,7 +8,7 @@ mentionedTypes: []
 
 # Ignite UI for Angular Agent Skills
 
-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.
+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.
@@ -56,7 +56,7 @@ For user-level (global) skills available across all projects, use `~/.agents/ski
 | 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.
+> **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
 
@@ -111,7 +111,7 @@ For user-level (global) skills available across all projects, use `~/.agents/ski
 
 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**
+### **Option A - 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. into `.agents/skills/`), run:
 
@@ -145,12 +145,12 @@ robocopy node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\ski
 robocopy node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming /E
 ```
 
-### **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:
 
-- **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.
+- **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):**
 
@@ -170,7 +170,7 @@ gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-ang
 
 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**
+### **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:
 
@@ -184,7 +184,7 @@ The CLI will guide you through a series of prompts to:
 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.
+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.
 

en/components/ai/skills.md

@@ -1,5 +1,5 @@
 ---
-title: Angular Theming MCP | Infragistics 
+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
@@ -20,6 +20,8 @@ The server supports all four Ignite UI design systems — **Material**, **Bootst
 
 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.
 
+The Ignite UI Theming MCP works alongside the Ignite UI CLI MCP. In practice, the Theming MCP handles palettes, themes, tokens, typography, elevations, and styling workflows, while the CLI MCP handles project creation, project modification, component workflows, and documentation-oriented tasks. Most teams will want both servers connected in the same AI client.
+
 **Example prompts to try once connected:**
 
 > _"Create a complete Material Design dark theme for my Angular app with primary #2563eb and coral secondary #f97316."_
@@ -178,10 +180,11 @@ JetBrains AI Assistant supports MCP servers through the IDE settings:
 
 ### Other MCP Clients
 
-For any other MCP-compatible client, use the STDIO transport with the following command and arguments:
+For any other MCP-compatible client, use the STDIO transport with this launch command:
 
-- **Command**: `npx`
-- **Arguments**: `-y`, `igniteui-theming`, `igniteui-theming-mcp`
+```bash
+npx -y igniteui-theming igniteui-theming-mcp
+```
 
 ## Customizing AI Behavior with Project Rules
 
@@ -195,6 +198,7 @@ Editors like VS Code and Cursor let you provide project-level instruction files
 ## 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.
@@ -215,6 +219,7 @@ 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.
@@ -238,7 +243,7 @@ To see the current full list of tools and their parameters at any time, ask your
 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.                                                                                              |