docs(*): add-maker-to-ai-docs (#1971)

Author: radomirchev

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

@@ -5,10 +5,13 @@ _keywords: {Platform}, {ProductName}, Infragistics, MCP, Model Context Protocol,
 _language: en
 _license: MIT
 _canonicalLink: "{environment:dvUrl}/components/ai-assisted-development-overview"
+last_updated: "2026-04-21"
 namespace: Infragistics.Controls
 mentionedTypes: []
 ---
 
+<!-- schema: Article, HowTo -->
+
 # AI-Assisted Development with Ignite UI
 
 Ignite UI for Angular, React, and Web Components provides a three-part AI toolchain - Agent Skills, the Ignite UI CLI MCP server, and the Ignite UI Theming MCP server - that grounds AI coding assistants in correct component APIs, import paths, and design tokens. Agent Skills are developer-owned instruction packages that define how AI agents use Ignite UI in a specific project. The CLI MCP server exposes Ignite UI CLI scaffolding, component management, and documentation tools to the active AI agent session via the Model Context Protocol. The Theming MCP server exposes the Ignite UI Theming Engine as queryable agent context. All three components work with GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains AI Assistant.
@@ -19,11 +22,11 @@ The AI toolchain does not currently support Blazor in the CLI MCP and Agent Skil
 
 Ignite UI's AI toolchain consists of three independently usable layers. Each layer can be enabled on its own; they are designed to work together.
 
-| Layer | What it provides | Owner | Frameworks |
-| --- | --- | --- | --- |
-| Agent Skills | Developer-owned instruction packages: import paths, component patterns, decision flows, project conventions | Developer | Angular, React, Web Components, Blazor |
-| CLI MCP server (`igniteui-cli`) | Project scaffolding, component management, documentation and API queries via MCP | Infragistics | Angular, React, Web Components |
-| Theming MCP server (`igniteui-theming`) | Design tokens, palette definitions, CSS variable generation, theming queries via MCP | Infragistics | Angular, React, Web Components, Blazor |
+| Layer                                   | What it provides                                                                                            | Owner        | Frameworks                             |
+| --------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------ | -------------------------------------- |
+| Agent Skills                            | Developer-owned instruction packages: import paths, component patterns, decision flows, project conventions | Developer    | Angular, React, Web Components, Blazor |
+| CLI MCP server (`igniteui-cli`)         | Project scaffolding, component management, documentation and API queries via MCP                            | Infragistics | Angular, React, Web Components         |
+| Theming MCP server (`igniteui-theming`) | Design tokens, palette definitions, CSS custom property generation, WCAG AA contrast validation             | Infragistics | Angular, React, Web Components, Blazor |
 
 The CLI MCP server and Theming MCP server are both started through `npx` and connect to any MCP-compatible client through STDIO transport. Agent Skills are local files placed in your project that the AI client reads from disk.
 
@@ -67,20 +70,50 @@ For configuration details, see [Theming MCP](theming-mcp.md).
 
 The CLI MCP server and Theming MCP server work with any editor or AI client that supports MCP with STDIO transport.
 
-| Client | Configuration method |
-| --- | --- |
-| VS Code with GitHub Copilot | `.vscode/mcp.json` |
-| Cursor | `.cursor/mcp.json` |
-| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` |
-| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` |
-| Claude Code | `.mcp.json` or the Claude Code MCP CLI command |
-| JetBrains AI Assistant | **Tools → AI Assistant → Model Context Protocol (MCP)** |
+| Client                      | Configuration method                                              |
+| --------------------------- | ----------------------------------------------------------------- |
+| VS Code with GitHub Copilot | `.vscode/mcp.json`                                                |
+| Cursor                      | `.cursor/mcp.json`                                                |
+| Claude Desktop (macOS)      | `~/Library/Application Support/Claude/claude_desktop_config.json` |
+| Claude Desktop (Windows)    | `%APPDATA%\Claude\claude_desktop_config.json`                     |
+| Claude Code                 | `.mcp.json` or the Claude Code MCP CLI command                    |
+| JetBrains AI Assistant      | **Tools → AI Assistant → Model Context Protocol (MCP)**           |
 
 Agent Skills are compatible with GitHub Copilot via `.github/copilot-instructions.md`, Cursor via `.cursorrules` or `.cursor/rules/`, Windsurf via `.windsurfrules`, and JetBrains AI Assistant via project-level prompt settings.
 
 ## Set Up the AI Toolchain
 
-Setting up the Ignite UI AI toolchain takes three steps: load Agent Skills for your framework, connect the CLI MCP server, and optionally connect the Theming MCP server. All three steps are independent and can be done in any order.
+Use `ig ai-config` to configure Agent Skills and both MCP servers in a single command. For individual control over each layer, or to configure only part of the toolchain in an existing project, follow the steps below. Running `ig ai-config` completes Steps 1, 2, and 3 in one operation.
+
+### Quick Setup
+
+The `ai-config` command copies the Ignite UI Agent Skills 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.
+
+**Using Angular Schematics:**
+
+```bash
+ng generate @igniteui/angular-schematics:ai-config
+```
+
+This also registers the `@angular/cli` MCP server in `.vscode/mcp.json` alongside the Ignite UI servers.
+
+**Using the Ignite UI CLI:**
+
+```bash
+npx igniteui-cli ai-config
+```
+
+If you have the Ignite UI CLI installed globally, use the shorter form:
+
+```bash
+ig ai-config
+```
+
+> [!NOTE]
+> The `npx igniteui-cli` and `ig` forms do not register the `@angular/cli` MCP server. Use the Angular Schematics command above if you want all three servers configured in a single step.
+
+> [!NOTE]
+> The command requires Ignite UI packages to be installed in your project (`npm install`). If no skill files are found, make sure your packages are up-to-date.
 
 ### Step 1 - Load Agent Skills
 
@@ -139,12 +172,6 @@ For configuration details and theming workflows, see [Theming MCP](theming-mcp.m
 
 ## Additional Resources
 
-<!-- React -->
-- [Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP](../general-how-to-mcp-e2e.md)
-<!-- end: React -->
-<!-- WebComponents -->
-- [Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP](../general-how-to-mcp-e2e.md)
-<!-- end: WebComponents -->
 - [Agent Skills](./skills.md)
 - [Ignite UI CLI MCP](./cli-mcp.md)
 - [Ignite UI Theming MCP](./theming-mcp.md)
@@ -154,4 +181,4 @@ For configuration details and theming workflows, see [Theming MCP](theming-mcp.m
 Our community is active and always welcoming to new ideas.
 
 - [{ProductName} **Forums**]({ForumsLink})
-- [{ProductName} **GitHub**]({GithubLink})
+- [{ProductName} **GitHub**]({GithubLink})