feat(skills): updating all skills

skills/igniteui-angular-components/SKILL.md

@@ -7,45 +7,25 @@ user-invocable: true
 # Ignite UI for Angular — UI Components
 
 ## Prerequisites
-- Angular 20+ project
+- An Angular project on the major version matching the installed `igniteui-angular` package (igniteui-angular majors track Angular majors)
 - `@angular/cli` installed
 - `igniteui-angular` or `@infragistics/igniteui-angular` added to the project via `ng add igniteui-angular` (or the `@infragistics` variant) or `npm install` — see [Package Variants](#package-variants) below.
 - A theme applied to the application (see [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md)).
 - `provideAnimations()` in `app.config.ts` — **required before using any overlay or animated component**
-- The **Ignite UI CLI MCP server** (`igniteui-cli`) is available as a tool provider
 
-> **AGENT INSTRUCTION — MCP Server Setup (REQUIRED)**
->
-> Before using any Ignite UI CLI MCP tools, you MUST verify the MCP server is available
-> by calling `list_components`. If the tool is not available or the call fails,
-> you MUST automatically configure it by following the setup process steps described below.
->
-> After writing the file, inform the user that the MCP server has been
-> configured and they may need to reload the editor for the tools to activate.
-> Start the MCP server and wait for that MCP server to start before continuing the component-related work.
-> Do NOT skip this step or ask the user to do it manually.
+## Ignite UI CLI MCP Server (recommended, not required)
 
-## Setting Up the Ignite UI CLI MCP Server
+The `igniteui-cli` MCP server provides `list_components`, `get_doc`, `search_docs`, and `search_api` for version-accurate component documentation. When these tools are available, prefer them for any API detail the reference files below do not cover.
 
-> **Full setup instructions for VS Code, Cursor, Claude Desktop, and JetBrains IDEs are in [`references/mcp-setup.md`](./references/mcp-setup.md).** Read that file for editor-specific configuration steps and verification.
+If the tools are not available, do not block the task — the bundled reference files are self-sufficient for the components they cover. Suggest that the user run `npx -y igniteui-cli ai-config` from the project root (it configures both the `igniteui-cli` and `igniteui-theming` MCP servers and copies the agent skill files) and reload the editor. MCP servers cannot be started mid-session; the configuration takes effect on the next session. Editor-specific details are in [`references/mcp-setup.md`](./references/mcp-setup.md).
 
-## MANDATORY AGENT PROTOCOL — YOU MUST FOLLOW THIS BEFORE PRODUCING ANY OUTPUT
+## Required Workflow
 
-**This file is a routing hub only. It contains NO code examples and NO API details.**
+**This file is a routing hub only. It contains no code examples and no API details.** Component APIs change between releases, so never write component selectors, import paths, input/output names, or directive names from memory — read the relevant reference files first.
 
-> **DO NOT write any component selectors, import paths, input names, output names, or directive names from memory.**
-> Component APIs change between versions. Anything generated without reading the reference files will be incorrect.
-
-You are **required** to complete ALL of the following steps before producing any component-related code or answer:
-
-**STEP 1 — Identify every component or feature involved.**
-Map the user's request to one or more rows in the Task → Reference File table below. A single request often spans multiple categories (e.g., a form inside a Dialog requires reading both `form-controls.md` AND `feedback.md`).
-
-**STEP 2 — Read every identified reference file in full (PARALLEL).**
-Call `read_file` (or equivalent) on **all** reference files identified in Step 1 **in a single parallel batch** — do NOT read them one at a time sequentially. You must do this even if you believe you already know the answer. Do not skip, skim, or partially read a reference file.
-
-**STEP 3 — Only then produce output.**
-Base your code and explanation exclusively on what you read. If the reference files do not cover something, say so explicitly rather than guessing.
+1. **Identify every component or feature involved.** Map the user's request to one or more rows in the Task → Reference File table below. A single request often spans multiple categories (e.g., a form inside a Dialog requires both `form-controls.md` and `feedback.md`).
+2. **Read every identified reference file in full**, in a single parallel batch of file reads — even if you believe you already know the answer.
+3. **Then produce output**, based only on what you read. If something is not covered by the reference files, look it up with `get_doc`/`search_docs` when the MCP tools are available; otherwise state explicitly that the detail is unverified instead of guessing.
 
 ### Task → Reference File
 

skills/igniteui-angular-components/references/charts.md

@@ -4,13 +4,11 @@
 
 - [Overview](#overview)
 - [General Chart Configuration](#general-chart-configuration)
-- [Key Chart Features](#key-chart-features)
 - [Chart Types Reference](#chart-types-reference)
-- [Common API Members by Chart Type](#common-api-members-by-chart-type)
-- [Import Paths](#import-paths)
+- [Standalone component example](#standalone-component-example)
+- [Common errors and fixes](#common-errors-and-fixes)
 - [Styling & Theming](#styling--theming)
 - [Data Requirements](#data-requirements)
-- [Documentation References](#documentation-references)
 
 ## Overview
 

skills/igniteui-angular-components/references/data-display.md

@@ -205,7 +205,7 @@ import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carous
 </igx-carousel>
 ```
 
-> **AGENT INSTRUCTION:** Carousel uses Angular animations — ensure `provideAnimations()` is present in `app.config.ts`.
+> **Important:** Carousel uses Angular animations — ensure `provideAnimations()` is present in `app.config.ts`.
 
 ## Paginator
 

skills/igniteui-angular-components/references/feedback.md

@@ -3,7 +3,7 @@
 > **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.**
 > For app setup, providers, and import patterns — see [`setup.md`](./setup.md).
 
-> **AGENT INSTRUCTION:** All components in this file rely on Angular animations and the Ignite UI overlay system. Before using any of them, ensure `provideAnimations()` (or `provideAnimationsAsync()`) is present in `app.config.ts`. If it is missing, add it — these components will throw runtime errors or silently fail to animate without it.
+> **Important:** All components in this file rely on Angular animations and the Ignite UI overlay system. Before using any of them, ensure `provideAnimations()` (or `provideAnimationsAsync()`) is present in `app.config.ts`. If it is missing, add it — these components will throw runtime errors or silently fail to animate without it.
 
 ## Contents
 

skills/igniteui-angular-components/references/layout-manager.md

@@ -252,114 +252,6 @@ export class DockManagerComponent {
 </igc-dockmanager>
 ```
 
-### Full Example (from user-provided code)
-
-```typescript
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import {
-  IgcDockManagerLayout,
-  IgcDockManagerPaneType,
-  IgcSplitPaneOrientation
-} from 'igniteui-dockmanager';
-
-@Component({
-  selector: 'app-dock-manager',
-  templateUrl: './dock-manager.component.html',
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class DockManagerComponent {
-  layout: IgcDockManagerLayout = {
-    rootPane: {
-      type: IgcDockManagerPaneType.splitPane,
-      orientation: IgcSplitPaneOrientation.horizontal,
-      panes: [
-        {
-          type: IgcDockManagerPaneType.splitPane,
-          orientation: IgcSplitPaneOrientation.vertical,
-          panes: [
-            { type: IgcDockManagerPaneType.contentPane, contentId: 'content1', header: 'Content Pane 1' },
-            { type: IgcDockManagerPaneType.contentPane, contentId: 'content2', header: 'Unpinned Pane 1', isPinned: false }
-          ]
-        },
-        {
-          type: IgcDockManagerPaneType.splitPane,
-          orientation: IgcSplitPaneOrientation.vertical,
-          size: 200,
-          panes: [
-            {
-              type: IgcDockManagerPaneType.documentHost,
-              size: 200,
-              rootPane: {
-                type: IgcDockManagerPaneType.splitPane,
-                orientation: IgcSplitPaneOrientation.horizontal,
-                allowEmpty: true,
-                panes: [
-                  {
-                    type: IgcDockManagerPaneType.tabGroupPane,
-                    panes: [
-                      { type: IgcDockManagerPaneType.contentPane, header: 'Document 1', contentId: 'content3', documentOnly: true },
-                      { type: IgcDockManagerPaneType.contentPane, header: 'Document 2', contentId: 'content4', documentOnly: true }
-                    ]
-                  }
-                ]
-              }
-            },
-            { type: IgcDockManagerPaneType.contentPane, contentId: 'content5', header: 'Unpinned Pane 2', isPinned: false }
-          ]
-        },
-        {
-          type: IgcDockManagerPaneType.splitPane,
-          orientation: IgcSplitPaneOrientation.vertical,
-          panes: [
-            {
-              type: IgcDockManagerPaneType.tabGroupPane,
-              size: 200,
-              panes: [
-                { type: IgcDockManagerPaneType.contentPane, contentId: 'content6', header: 'Tab 1' },
-                { type: IgcDockManagerPaneType.contentPane, contentId: 'content7', header: 'Tab 2' },
-                { type: IgcDockManagerPaneType.contentPane, contentId: 'content8', header: 'Tab 3' },
-                { type: IgcDockManagerPaneType.contentPane, contentId: 'content9', header: 'Tab 4' },
-                { type: IgcDockManagerPaneType.contentPane, contentId: 'content10', header: 'Tab 5' }
-              ]
-            },
-            { type: IgcDockManagerPaneType.contentPane, contentId: 'content11', header: 'Content Pane 2' }
-          ]
-        }
-      ]
-    },
-    floatingPanes: [
-      {
-        type: IgcDockManagerPaneType.splitPane,
-        orientation: IgcSplitPaneOrientation.horizontal,
-        floatingHeight: 150,
-        floatingWidth: 250,
-        floatingLocation: { x: 300, y: 200 },
-        panes: [
-          { type: IgcDockManagerPaneType.contentPane, contentId: 'content12', header: 'Floating Pane' }
-        ]
-      }
-    ]
-  };
-}
-```
-
-```html
-<igc-dockmanager [layout]="layout" style="height: 600px;">
-  <div slot="content1" class="dockManagerContent">Content 1</div>
-  <div slot="content2" class="dockManagerContent">Content 2</div>
-  <div slot="content3" class="dockManagerContent">Content 3</div>
-  <div slot="content4" class="dockManagerContent">Content 4</div>
-  <div slot="content5" class="dockManagerContent">Content 5</div>
-  <div slot="content6" class="dockManagerContent">Content 6</div>
-  <div slot="content7" class="dockManagerContent">Content 7</div>
-  <div slot="content8" class="dockManagerContent">Content 8</div>
-  <div slot="content9" class="dockManagerContent">Content 9</div>
-  <div slot="content10" class="dockManagerContent">Content 10</div>
-  <div slot="content11" class="dockManagerContent">Content 11</div>
-  <div slot="content12" class="dockManagerContent">Content 12</div>
-</igc-dockmanager>
-```
-
 ### Key Rules for Dock Manager
 
 1. **Separate package** — `igniteui-dockmanager` is installed independently of `igniteui-angular`

skills/igniteui-angular-components/references/layout.md

@@ -201,7 +201,7 @@ Key inputs: `[isOpen]`, `[pin]` (dock to content), `[pinThreshold]` (auto-pin at
 
 Events: `(opened)`, `(closed)`, `(pinChange)`.
 
-> **AGENT INSTRUCTION:** The Navigation Drawer uses the Ignite UI overlay/animation system — ensure `provideAnimations()` is in `app.config.ts`.
+> **Important:** The Navigation Drawer uses the Ignite UI overlay/animation system — ensure `provideAnimations()` is in `app.config.ts`.
 
 ## See Also
 

skills/igniteui-angular-components/references/mcp-setup.md

@@ -2,40 +2,31 @@
 
 > **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.**
 
-## Contents
+The Ignite UI CLI MCP server exposes `list_components`, `get_doc`, `search_docs`, and `search_api` so AI assistants can discover Ignite UI components and read version-accurate documentation. It must be configured in the editor/agent before these tools become available, and the editor or agent session must be restarted afterwards — MCP servers cannot be hot-loaded into a running session.
 
-- [VS Code](#vs-code)
-- [Cursor](#cursor)
-- [Claude Desktop](#claude-desktop)
-- [WebStorm / JetBrains IDEs](#webstorm--jetbrains-ides)
-- [Verifying the Setup](#verifying-the-setup)
+> Depending on the client, MCP tool names may appear with a server prefix (e.g. `mcp__igniteui-cli__list_components` in Claude Code). This skill refers to tools by their bare names.
 
-The Ignite UI CLI MCP server enables AI assistants to discover Ignite UI components, access component documentation, and support related Ignite UI workflows. It must be configured in your editor before these tools become available.
+## Recommended: One-Command Setup
 
-## VS Code
+From the project root:
 
-Create or edit `.vscode/mcp.json` in your project:
-
-```json
-{
-  "servers": {
-    "igniteui-cli": {
-      "command": "npx",
-      "args": ["-y", "igniteui-cli", "mcp"]
-    }
-  }
-}
+```bash
+npx -y igniteui-cli ai-config
 ```
 
-This works whether `igniteui-cli` is installed locally in `node_modules` or needs to be pulled from the npm registry — `npx -y` handles both cases.
+This configures **both** the `igniteui-cli` and `igniteui-theming` MCP servers, copies the Ignite UI Agent Skills into the project, and preserves any existing server entries in the config files. Inline options such as `--agents claude copilot` and `--assistants vscode cursor` select which agents and editors to configure.
 
-## Cursor
+Projects created with `npx igniteui-cli new` already have the `igniteui-cli` MCP entry configured.
 
-Create or edit `.cursor/mcp.json`:
+## Manual Configuration (fallback)
+
+Use these only when `ai-config` is unavailable or your editor is not covered by it.
+
+### VS Code — `.vscode/mcp.json`
 
 ```json
 {
-  "mcpServers": {
+  "servers": {
     "igniteui-cli": {
       "command": "npx",
       "args": ["-y", "igniteui-cli", "mcp"]
@@ -44,11 +35,15 @@ Create or edit `.cursor/mcp.json`:
 }
 ```
 
-## Claude Desktop
+`npx -y` works whether `igniteui-cli` is installed locally in `node_modules` or needs to be pulled from the npm registry.
 
-Edit the Claude Desktop config file:
-- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
-- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
+### Claude Code
+
+```bash
+claude mcp add igniteui-cli -- npx -y igniteui-cli mcp
+```
+
+### Cursor — `.cursor/mcp.json`
 
 ```json
 {
@@ -61,7 +56,11 @@ Edit the Claude Desktop config file:
 }
 ```
 
-## WebStorm / JetBrains IDEs
+### Claude Desktop
+
+Edit the Claude Desktop config file (**macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`, **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`) and add the same `mcpServers` entry as shown for Cursor above.
+
+### WebStorm / JetBrains IDEs
 
 1. Go to **Settings → Tools → AI Assistant → MCP Servers**
 2. Click **+ Add MCP Server**
@@ -70,7 +69,7 @@ Edit the Claude Desktop config file:
 
 ## Verifying the Setup
 
-After configuring the MCP server, ask your AI assistant:
+After restarting the editor/session, ask the AI assistant:
 
 > "List all available Ignite UI components"
 

skills/igniteui-angular-components/references/setup.md

@@ -23,7 +23,7 @@ Both packages share identical entry-point paths. Everywhere below, replace `igni
 
 ## Required Providers (`app.config.ts`)
 
-> **AGENT INSTRUCTION:** Before adding any Ignite UI component, verify that `app.config.ts` contains the providers listed below. Missing `provideAnimations()` is the most common cause of runtime errors — all overlay and animated components (Dialog, Combo, Select, Date Picker, Snackbar, Toast, Banner, Navigation Drawer, Dropdown) will silently fail or throw without it.
+> **Important:** Before adding any Ignite UI component, verify that `app.config.ts` contains the providers listed below. Missing `provideAnimations()` is the most common cause of runtime errors — all overlay and animated components (Dialog, Combo, Select, Date Picker, Snackbar, Toast, Banner, Navigation Drawer, Dropdown) will silently fail or throw without it.
 
 ```typescript
 import { ApplicationConfig } from '@angular/core';
@@ -80,7 +80,7 @@ export class ExampleComponent {}
 
 ## Multi-Entry-Point Imports
 
-> **AGENT INSTRUCTION:** Always import from specific entry points, never from the root barrel. Check `package.json` to determine whether the project uses `igniteui-angular` or `@infragistics/igniteui-angular` — that prefix applies to every import path.
+> **Important:** Always import from specific entry points, never from the root barrel. Check `package.json` to determine whether the project uses `igniteui-angular` or `@infragistics/igniteui-angular` — that prefix applies to every import path.
 
 ```typescript
 // CORRECT — tree-shakeable, specific entry point
@@ -96,7 +96,8 @@ import { IgxComboComponent } from 'igniteui-angular';
 | Component / Directive | Entry Point |
 |---|---|
 | Input Group | `igniteui-angular/input-group` |
-| Combo / Simple Combo | `igniteui-angular/combo` |
+| Combo | `igniteui-angular/combo` |
+| Simple Combo | `igniteui-angular/simple-combo` |
 | Select | `igniteui-angular/select` |
 | Date Picker / Date Range Picker | `igniteui-angular/date-picker` |
 | Time Picker | `igniteui-angular/time-picker` |
@@ -107,7 +108,8 @@ import { IgxComboComponent } from 'igniteui-angular';
 | Slider | `igniteui-angular/slider` |
 | Tabs | `igniteui-angular/tabs` |
 | Stepper | `igniteui-angular/stepper` |
-| Accordion / Expansion Panel | `igniteui-angular/expansion-panel` |
+| Accordion | `igniteui-angular/accordion` |
+| Expansion Panel | `igniteui-angular/expansion-panel` |
 | Splitter | `igniteui-angular/splitter` |
 | Navigation Drawer | `igniteui-angular/navigation-drawer` |
 | Bottom Navigation | `igniteui-angular/bottom-nav` |