Merge pull request #1979 from IgniteUI/rmrichev/ai-skills-update

docs(*): update-skills-doc-cli-release

Author: kdinev

doc/en/components/ai/cli-mcp.md

@@ -1,32 +1,32 @@
 ---
-title: Angular Ignite UI CLI MCP | Infragistics
-_description: Connect Ignite UI CLI MCP to your AI client to scaffold projects, modify existing apps, create and update components, and ask documentation questions for Ignite UI for Angular. Learn the setup options for VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients.
-_keywords: Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, agent, GitHub Copilot, Cursor, Claude, JetBrains
+title: Ignite UI CLI MCP | Infragistics
+_description: Use the Ignite UI CLI MCP server to scaffold {ProductName} projects, add components, and answer API questions through your AI assistant.
+_keywords: {Platform}, {ProductName}, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, agent, GitHub Copilot, Cursor, Claude, JetBrains
 _language: en
 _license: MIT
 _canonicalLink: "{environment:dvUrl}/components/ai/cli-mcp"
 namespace: Infragistics.Controls
 mentionedTypes: []
-last_updated: "2026-04-21"
+last_updated: "2026-04-24"
 ---
 
 <!-- schema: Article, HowTo -->
 
 # Ignite UI CLI MCP
 
-<p class="highlight">The Ignite UI CLI MCP is a <a href="https://modelcontextprotocol.io/" target="_blank">Model Context Protocol</a> (MCP) server that enables AI assistants to scaffold projects, modify existing apps, create and update components, and answer documentation questions for Ignite UI for Angular applications. Connect the Ignite UI CLI MCP to your editor, GitHub repository, or desktop AI client and describe what you want - the assistant uses the CLI tools for you.</p>
+<p class="highlight">The Ignite UI CLI MCP is a <a href="https://modelcontextprotocol.io/" target="_blank">Model Context Protocol</a> (MCP) server that enables AI assistants to scaffold projects, modify existing apps, create and update components, and answer documentation questions for {ProductName} applications. Connect the Ignite UI CLI MCP to your editor, GitHub repository, or desktop AI client and describe what you want - the assistant uses the CLI tools for you.</p>
 
 <div class="divider"></div>
 
 ## Overview
 
-Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside Ignite UI Theming MCP - CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session.
+Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside [Ignite UI Theming MCP](./theming-mcp.md). CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session.
 
 The recommended setup path is to start with Ignite UI CLI first. That path creates the project, installs the required packages, and writes the initial MCP configuration for VS Code. You can also start from an empty folder and let the assistant create the project through MCP, or connect MCP to a project that already exists.
 
 **Example prompts to try once connected:**
 
-> _"Create a new Ignite UI for Angular project in this folder, use the recommended defaults, and add a starter dashboard page with sample data."_
+> _"Create a new {ProductName} project in this folder, use the recommended defaults, and add a starter dashboard page with sample data."_
 
 > _"Add a new grid page to this project, wire it to sample data, and keep the current navigation structure."_
 
@@ -44,7 +44,7 @@ Before configuring the MCP server, make sure you have:
 - One of the following starting points:
   - an empty folder for a new project
   - a project you created with Ignite UI CLI
-  - an existing Ignite UI for Angular project you want to continue working on
+  - an existing {ProductName} project you want to continue working on
 
 If you want theming tools in the same client session and `igniteui-theming` is not already available in your project, run:
 
@@ -120,19 +120,53 @@ npx --package igniteui-cli igniteui new
 
 Use a direct command when you already know the project settings:
 
+<!-- Angular -->
+
 ```bash
 ig new my-app --framework=angular --type=igx-ts --template=empty
 ```
 
 Matching `npx` form:
 
 ```bash
-npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts --template=empty
+npx ig new my-app --framework=angular --type=igx-ts --template=empty
+```
+
+<!-- end: Angular -->
+
+<!-- React -->
+
+```bash
+ig new my-app --framework=react --type=igr-ts --template=top-nav
+```
+
+Matching `npx` form:
+
+```bash
+npx ig new my-app --framework=react --template=top-nav
 ```
 
+<!-- end: React -->
+
+<!-- WebComponents -->
+
+```bash
+ig new my-app --framework=webcomponents --template=side-nav
+```
+
+Matching `npx` form:
+
+```bash
+npx ig new my-app --framework=webcomponents --template=side-nav
+```
+
+<!-- end: WebComponents -->
+
 In guided mode, Ignite UI CLI prompts for the project name, framework, template, theme, and whether to add a component or complete the setup. In direct mode, you provide the framework and any supported options in the command itself.
 
-For more details about project templates, CLI command options, and component scaffolding commands such as `ig add`, see the Ignite UI CLI documentation for Angular.
+<!-- React, WebComponents -->
+For more details about project templates, CLI command options, and component scaffolding commands such as `ig add`, see the [Ignite UI CLI documentation](../general-cli-overview.md).
+<!-- end: React, WebComponents -->
 
 ### VS Code
 
@@ -410,12 +444,12 @@ Validate that the JSON uses the `mcpServers` structure and that each local serve
 ## Additional Resources
 
 - [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md)
-- [Ignite UI for Angular Skills](./skills.md)
+- [{ProductName} Skills](./skills.md)
 - [Ignite UI Theming MCP](./theming-mcp.md)
 
 <div class="divider--half"></div>
 
 Our community is active and always welcoming to new ideas.
 
-- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [{ProductName} **Forums**]({ForumsLink})
+- [{ProductName} **GitHub**]({GithubLink})

doc/en/components/ai/skills.md

@@ -4,8 +4,11 @@ _description: Learn how to use Agent Skills to supercharge AI-assisted developme
 _keywords: {ProductName}, agent skills, ai assisted development, github copilot, cursor, windsurf, claude, gemini cli, junie
 _license: MIT
 mentionedTypes: []
+last_updated: "2026-04-24"
 ---
 
+<!-- schema: Article, HowTo -->
+
 # {ProductName} Agent Skills
 
 {ProductName} 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 {ProductName}. 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.
@@ -24,7 +27,7 @@ The skill files live in the [`skills/`]({GithubLink}/tree/master/skills) directo
 | Components & Layout | [`skills/igniteui-wc-choose-components/SKILL.md`]({GithubLink}/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`]({GithubLink}/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`]({GithubLink}/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`]({GithubLink}/blob/master/skills/igniteui-wc-optimize-bundle-size/SKILL.md) | Ensuring best practices for tree shaking to optimize bundle size
+| Optimization | [`skills/igniteui-wc-optimize-bundle-size/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-optimize-bundle-size/SKILL.md) | Ensuring best practices for tree shaking to optimize bundle size |
 
 <!-- end: WebComponents -->
 
@@ -34,7 +37,7 @@ The skill files live in the [`skills/`]({GithubLink}/tree/master/skills) directo
 |:------|:-----|:------------|
 | Components | [`skills/igniteui-react-components/SKILL.md`]({GithubLink}/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`]({GithubLink}/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`]({GithubLink}/blob/master/skills/igniteui-react-optimize-bundle-size/SKILL.md) | Ensuring best practices for tree shaking to optimize bundle size
+| Optimization | [`skills/igniteui-react-optimize-bundle-size/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-optimize-bundle-size/SKILL.md) | Ensuring best practices for tree shaking to optimize bundle size |
 
 <!-- end: React -->
 
@@ -117,7 +120,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
 
@@ -174,7 +177,7 @@ Use one of the options below to download and place the skill files into the appr
 
 ### **Option A - Use the Ignite UI CLI**
 
-The `ai-config` command copies skill files from your installed {ProductName} package into `.claude/skills/` and writes the Ignite UI MCP server configuration to `.vscode/mcp.json`. If the files already exist and are up-to-date, the command is a no-op.
+The `ai-config` command copies skill files from your installed {ProductName} package into `.claude/skills/` and writes the Ignite UI CLI MCP and Theming MCP server entries to `.vscode/mcp.json`. If the files already exist and are up-to-date, the command is a no-op.
 
 <!-- Angular -->
 
@@ -189,16 +192,18 @@ This also registers the `@angular/cli` MCP server in `.vscode/mcp.json` alongsid
 <!-- end: Angular -->
 
 **Using the Ignite UI CLI:**
-### **Option A - Use the Ignite UI CLI**
 
-The `ai-config` command copies skill files from your installed {ProductName} package into `.claude/skills/` and writes the Ignite UI MCP server configuration to `.vscode/mcp.json`. If the files already exist and are up-to-date, the command is a no-op.
+```bash
+npx igniteui-cli ai-config
+```
 
-<!-- Angular -->
-
-**Using Angular Schematics:**
+If you have the Ignite UI CLI installed globally, use the shorter form:
 
 ```bash
-ng generate @igniteui/angular-schematics:ai-config
+ig ai-config
+```
+
+### **Option B - Manual Copy from `node_modules`**
 
 If {ProductName} 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:
 
@@ -361,7 +366,7 @@ Once installed, the skill files are available in the respective location and wil
 
 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
+```bash
 npx skills add IgniteUI/{PackageCommon}
 ```
 
@@ -408,7 +413,6 @@ For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](./
 - [Ignite UI CLI](../general-cli-overview.md)
 <!-- end: React, WebComponents -->
 <!-- Angular -->
-<!-- TODO: Not in xplat, can't link to md directly + docfx is aggressively and annoyingly treating all forms of relative links as such.. -->
 - <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started">Getting Started with {ProductName}</a>
 - <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/cli-overview">Angular Schematics & Ignite UI CLI</a>
 <!-- end: Angular -->
@@ -420,4 +424,4 @@ For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](./
 Our community is active and always welcoming to new ideas.
 
 - [{ProductName} **Forums**]({ForumsLink})
-- [{ProductName} **GitHub**]({GithubLink})
+- [{ProductName} **GitHub**]({GithubLink})