igniteui-angular 22.1.0-beta.0 → 22.1.0-beta.1

package/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"
 

package/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';
@@ -69,7 +69,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
@@ -85,7 +85,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` |
@@ -96,7 +97,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` |

package/skills/igniteui-angular-figma-to-app/SKILL.md

@@ -31,11 +31,13 @@ This skill orchestrates four MCP servers: **Figma** (design data), **Ignite UI C
 
 ---
 
-## MANDATORY AGENT PROTOCOL
+## Required Workflow
 
-You **must** complete all phases in order. Do **not** skip phases or generate component
-code from memory. Every component selector, input name, and import path must come from
-`get_doc` results — never guessed.
+Complete all phases in order — do not skip phases or generate component code from
+memory. Every component selector, input name, and import path must come from
+`get_doc` results or, where no doc exists in the catalog, from the
+`igniteui-angular-components` / `igniteui-angular-grids` skill reference files —
+never guessed.
 
 Read [references/figma-component-map.md](references/figma-component-map.md) before Phase 2.
 Read [references/design-token-bridge.md](references/design-token-bridge.md) before Phase 3.
@@ -46,6 +48,11 @@ Read [references/validation-patterns.md](references/validation-patterns.md) befo
 
 ## Phase 0 — Prerequisites
 
+> **Tool naming:** this skill writes MCP tool names as `<server>_<tool>` (e.g.
+> `figma_get_metadata`, `theming_create_theme`). The exact name depends on the client —
+> Claude Code exposes them as `mcp__<server>__<tool>` (e.g. `mcp__figma__get_metadata`).
+> Match by the tool's base name on whatever server is connected.
+
 ### 0a: Verify All Four MCP Servers
 
 Run these checks **silently** in parallel. Each verification call is a no-op if the
@@ -54,13 +61,15 @@ server is not connected; do not surface raw errors to the user at this point.
 | Server                | Verification call                              | Success signal                      |
 | --------------------- | ---------------------------------------------- | ----------------------------------- |
 | **Figma**             | `figma_get_metadata` with no `nodeId`          | Returns page list or selection info |
-| **Ignite UI CLI**     | `igniteui_cli_list_components` with `framework: "angular"` | Returns component list              |
+| **Ignite UI CLI**     | `list_components` with `framework: "angular"`  | Returns component list              |
 | **Ignite UI Theming** | `theming_detect_platform`                      | Returns platform info               |
 | **Playwright**        | `playwright_browser_navigate` to `about:blank` | Navigates without error             |
 
 If **any server fails**, stop and guide the user through setup **for that server only**
-before continuing. Full setup instructions for all servers are in
-[references/mcp-setup.md](references/mcp-setup.md).
+before continuing. For `igniteui-cli` and `igniteui-theming`, the fastest path is
+`npx -y igniteui-cli ai-config`, which configures both. Full setup instructions for all
+servers are in [references/mcp-setup.md](references/mcp-setup.md). Newly configured MCP
+servers require an editor/session reload before their tools appear.
 
 ### 0b: Detect or Scaffold Angular Project
 
@@ -76,14 +85,14 @@ Check whether the current working directory contains a valid Angular + Ignite UI
 
 - Note the package layout: `igniteui-angular` (open-source) or `@infragistics/igniteui-angular` (licensed)
 - Note the Angular version from `package.json`
-- **Check `.vscode/mcp.json` for all four required MCP server entries** — `figma`, `igniteui-cli`,
-  `igniteui-theming`, and `playwright`. If any are missing, add them from
-  [references/mcp-setup.md](references/mcp-setup.md) before continuing. Projects scaffolded with
+- **Check the MCP configuration for all four required server entries** — `figma`, `igniteui-cli`,
+  `igniteui-theming`, and `playwright` (in `.vscode/mcp.json` or the client's equivalent).
+  If `igniteui-cli` or `igniteui-theming` is missing, run `npx -y igniteui-cli ai-config`
+  from the project root — it configures both servers and copies the Agent Skills, preserving
+  existing entries. Add missing `figma` and `playwright` entries from
+  [references/mcp-setup.md](references/mcp-setup.md). Projects scaffolded with
   `npx igniteui-cli new` have `igniteui-cli` pre-wired but typically lack the other three.
-- Check whether `.vscode/mcp.json` exists in the project root. If it does not, run
-  `npx -y igniteui-cli ai-config` from the project root to auto-generate the Ignite UI
-  CLI MCP server configuration and copy the Agent Skills — this ensures `list_components`
-  and `get_doc` are wired up before Phase 2.
+  A reload is required before newly configured servers' tools appear.
 - Inform the user: "Found existing Ignite UI Angular project. Proceeding with the Figma workflow."
 
 **If no valid project is found:**
@@ -142,8 +151,9 @@ If the user confirms scaffolding:
 **Goal:** understand the full design structure and capture all data needed for
 implementation and validation before writing any code.
 
-> **Rate-limit awareness:** Figma MCP calls count against plan quotas.
-> Starter plan: **6 calls/month**. Organization plan: 200/day. Enterprise: 600/day.
+> **Rate-limit awareness:** Figma MCP calls count against plan quotas
+> (indicative, subject to change — verify against the user's current Figma plan:
+> Starter **6 calls/month**, Organization 200/day, Enterprise 600/day).
 >
 > Estimated call budget for a 5-artboard design:
 > `figma_get_metadata` ×2 + `figma_get_screenshot` ×5 + `figma_get_design_context` ×5 + `figma_get_variable_defs` ×1 + `figma_get_code_connect_map` ×5 = **~18 calls**.
@@ -371,15 +381,17 @@ Each row gives you:
 
 ### 2b: Fetch Component Docs
 
-For every component family you will use, call `get_doc`:
+Call `list_components({ framework: "angular" })` **once** to discover which component
+families have full docs — **the catalog covers only a subset of components**. Then:
 
-```
-list_components({ framework: "angular" })   // once, to discover doc names
-get_doc({ framework: "angular", name: "<doc-name>" })  // per component family
-```
+- For families **with** a doc: call `get_doc({ framework: "angular", name: "<doc-name>" })`,
+  all in a single parallel batch — never sequentially.
+- For families **without** a doc: read the matching reference files from the
+  [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md) and
+  [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) skills, and use
+  `search_api` for member-level API lookups.
 
-Call all `get_doc` requests **in a single parallel batch** — never sequentially.
-Do **not** write any component code until you have read its doc.
+Do **not** write any component code until you have read its doc or reference file.
 
 ### 2c: Search for Feature Docs
 
@@ -747,8 +759,8 @@ Check that:
   `figma_get_design_context` per artboard. Batch screenshot calls.
 - **Fail fast on 3 retries.** If the same correction fails three times, stop, report
   the issue to the user, and ask for guidance.
-- **Never commit `package-lock.json`** or other lock files unintentionally. Ask before
-  changing any dependency manifest.
+- **Do not modify dependency manifests or lock files without asking.** Identify the exact
+  packages and versions required, then get approval before installing.
 
 ---
 

package/skills/igniteui-angular-figma-to-app/references/figma-component-map.md

@@ -19,8 +19,12 @@
 1. Find the kit component name (as it appears in the Figma layers panel or the
    Indigo.Design kit library) in the **Kit Component Name** column.
 2. Read the **Angular Selector** and **IgxXxx Class** for the template.
-3. Use the **`get_doc` Key** to call `get_doc({ framework: "angular", name: "<key>" })`
-   before writing any code.
+3. Try the **`get_doc` Key** with `get_doc({ framework: "angular", name: "<key>" })`.
+   **The doc catalog covers only a subset of components** (verify with `list_components`
+   once). When no doc exists for a key, use the
+   [`igniteui-angular-components`](../../igniteui-angular-components/SKILL.md) /
+   [`igniteui-angular-grids`](../../igniteui-angular-grids/SKILL.md) skill reference files
+   for usage patterns and `search_api` for member-level API lookups — do not guess.
 4. Consult **Key Inputs / Variants** for the properties most commonly configured from
    Figma variants.
 
@@ -71,10 +75,10 @@
 | `_Simple Combo`                | `<igx-simple-combo>`              | `IgxSimpleComboComponent`                                                   | `simple-combo`           | `box`                                                                           | `[data]`, `[displayKey]`, `[valueKey]`                                          |
 | `_Select` / `_Dropdown`        | `<igx-select>`                    | `IgxSelectComponent`                                                        | `select`                 | `line`                                                                          | `<igx-select-item>` children, `[type]`                                          |
 | `_Autocomplete`                | `igxAutocomplete` directive       | `IgxAutocompleteDirective`                                                  | `autocomplete`           | n/a                                                                             | Used alongside `igx-input-group` + `igx-drop-down`                              |
-| `_Checkbox`                    | `<igx-checkbox>`                  | `IgxCheckboxComponent`                                                      | `checkbox`               | `[(ngModel)]`, `[checked]`, `[indeterminate]`, `[disabled]`, `labelPosition`    |
-| `_Radio` / `_Radio Button`     | `<igx-radio>`                     | `IgxRadioComponent`                                                         | `radio-button`           | `[value]`, `[(ngModel)]`; wrap multiple in `<igx-radio-group>`                  |
-| `_Switch` / `_Toggle`          | `<igx-switch>`                    | `IgxSwitchComponent`                                                        | `switch`                 | `[(ngModel)]`, `[checked]`, `labelPosition`                                     |
-| `_Slider` / `_Range Slider`    | `<igx-slider>`                    | `IgxSliderComponent`                                                        | `slider`                 | `[type]` (`SLIDER\|RANGE`), `[minValue]`, `[maxValue]`, `[step]`, `[(ngModel)]` |
+| `_Checkbox`                    | `<igx-checkbox>`                  | `IgxCheckboxComponent`                                                      | `checkbox`               | n/a                                                                             | `[(ngModel)]`, `[checked]`, `[indeterminate]`, `[disabled]`, `labelPosition`    |
+| `_Radio` / `_Radio Button`     | `<igx-radio>`                     | `IgxRadioComponent`                                                         | `radio-button`           | n/a                                                                             | `[value]`, `[(ngModel)]`; wrap multiple in `<igx-radio-group>`                  |
+| `_Switch` / `_Toggle`          | `<igx-switch>`                    | `IgxSwitchComponent`                                                        | `switch`                 | n/a                                                                             | `[(ngModel)]`, `[checked]`, `labelPosition`                                     |
+| `_Slider` / `_Range Slider`    | `<igx-slider>`                    | `IgxSliderComponent`                                                        | `slider`                 | n/a                                                                             | `[type]` (`SLIDER\|RANGE`), `[minValue]`, `[maxValue]`, `[step]`, `[(ngModel)]` |
 | `_Rating`                      | `<igc-rating>`                    | `IgcRatingComponent` (**web component** — `igniteui-webcomponents` package) | _(see setup note below)_ | n/a                                                                             | `value` attribute; `igcChange` event; no `[(ngModel)]` — bind via `(igcChange)` |
 
 > **Rating setup:** `npm install igniteui-webcomponents`. In the component:
@@ -115,8 +119,8 @@
 | `_Accordion`       | `<igx-accordion>`       | `IgxAccordionComponent`      | `accordion`       | `[singleBranchExpand]`; `<igx-expansion-panel>` children               |
 | `_Expansion Panel` | `<igx-expansion-panel>` | `IgxExpansionPanelComponent` | `expansion-panel` | `<igx-expansion-panel-header>` + `<igx-expansion-panel-body>`          |
 | `_Splitter`        | `<igx-splitter>`        | `IgxSplitterComponent`       | `splitter`        | `[type]` (`horizontal\|vertical`); `<igx-splitter-pane>` children      |
-| `_Tile Manager`    | `<igc-tile-manager>`    | Web component (standalone)   | `tile-manager`    | `<igc-tile>` children; this is a web component — see layout-manager.md |
-| `_Dock Manager`    | `<igc-dockmanager>`     | Web component (standalone)   | `dock-manager`    | `[layout]` JSON input; this is a web component — see layout-manager.md |
+| `_Tile Manager`    | `<igc-tile-manager>`    | Web component (standalone)   | `tile-manager`    | `<igc-tile>` children; web component — see [`layout-manager.md`](../../igniteui-angular-components/references/layout-manager.md) |
+| `_Dock Manager`    | `<igc-dockmanager>`     | Web component (standalone)   | `dock-manager`    | `[layout]` JSON input; web component — see [`layout-manager.md`](../../igniteui-angular-components/references/layout-manager.md) |
 
 ---
 
@@ -171,8 +175,9 @@
 > DV components have **no Sass design tokens**. All visual configuration is done via
 > component inputs. Do **not** call `theming_get_component_design_tokens` for these.
 >
-> **`get_doc` key:** use `charts-chart-overview` for all chart types (not the
-> type-specific keys like `category-chart` or `pie-chart` — those return "Doc not found").
+> **`get_doc`:** the current doc catalog has **no chart docs** — use the
+> [`charts.md`](../../igniteui-angular-components/references/charts.md) reference in the
+> components skill for usage patterns and `search_api` for member lookups.
 >
 > **Series colors:** chart components use their own default brush palette. Always
 > explicitly set `[brushes]` and `[outlines]` with space-separated hex colors extracted
@@ -181,21 +186,15 @@
 
 | Kit Component Name                                               | Angular Selector                       | IgxXxx Class                 | `get_doc` Key           | Key Inputs / Variants                                                                 |
 | ---------------------------------------------------------------- | -------------------------------------- | ---------------------------- | ----------------------- | ------------------------------------------------------------------------------------- |
-| `_Category Chart` / `_Line Chart` / `_Area Chart` / `_Bar Chart` | `<igx-category-chart>`                 | `IgxCategoryChartComponent`  | `charts-chart-overview` | `[dataSource]`, `[chartType]`, `[brushes]`, `[outlines]`, `[legend]`, `[markerTypes]` |
-| `_Pie Chart` / `_Donut Chart`                                    | `<igx-pie-chart>`                      | `IgxPieChartComponent`       | `charts-chart-overview` | `[dataSource]`, `[valueMemberPath]`, `[labelMemberPath]`                              |
-| `_Financial Chart` / `_Stock Chart`                              | `<igx-financial-chart>`                | `IgxFinancialChartComponent` | `charts-chart-overview` | `[dataSource]`, `[chartType]` (`Candle\|Bar\|Line`), `[volumeType]`                   |
-| `_Sparkline`                                                     | `<igx-sparkline>`                      | `IgxSparklineComponent`      | `charts-chart-overview` | `[dataSource]`, `[valueMemberPath]`, `[displayType]` (`Line\|Area\|Column\|WinLoss`)  |
-| `_Data Chart`                                                    | `<igx-data-chart>`                     | `IgxDataChartComponent`      | `charts-chart-overview` | `[dataSource]`; series added as child elements                                        |
-| `_Doughnut Chart`                                                | `<igx-doughnut-chart>`                 | `IgxDoughnutChartComponent`  | `charts-chart-overview` | `[dataSource]`; `<igx-ring-series>` children                                          |
-| `_Treemap`                                                       | `<igx-treemap>`                        | `IgxTreemapComponent`        | `charts-chart-overview` | `[dataSource]`, `[valueMemberPath]`, `[labelMemberPath]`                              |
-| `_Funnel Chart`                                                  | `<igx-funnel-chart>`                   | `IgxFunnelChartComponent`    | `charts-chart-overview` | `[dataSource]`, `[valueMemberPath]`, `[labelMemberPath]`                              |
-| `_Scatter Chart` / `_Bubble Chart`                               | `<igx-data-chart>` with scatter series | `IgxDataChartComponent`      | `charts-chart-overview` | Use `<igx-scatter-series>` or `<igx-bubble-series>`                                   |
-| `_Sparkline`                                                     | `<igx-sparkline>`                      | `IgxSparklineComponent`      | `sparkline`             | `[dataSource]`, `[valueMemberPath]`, `[displayType]` (`Line\|Area\|Column\|WinLoss`)  |
-| `_Data Chart`                                                    | `<igx-data-chart>`                     | `IgxDataChartComponent`      | `data-chart`            | `[dataSource]`; series added as child elements                                        |
-| `_Doughnut Chart`                                                | `<igx-doughnut-chart>`                 | `IgxDoughnutChartComponent`  | `doughnut-chart`        | `[dataSource]`; `<igx-ring-series>` children                                          |
-| `_Treemap`                                                       | `<igx-treemap>`                        | `IgxTreemapComponent`        | `treemap`               | `[dataSource]`, `[valueMemberPath]`, `[labelMemberPath]`                              |
-| `_Funnel Chart`                                                  | `<igx-funnel-chart>`                   | `IgxFunnelChartComponent`    | `funnel-chart`          | `[dataSource]`, `[valueMemberPath]`, `[labelMemberPath]`                              |
-| `_Scatter Chart` / `_Bubble Chart`                               | `<igx-data-chart>` with scatter series | `IgxDataChartComponent`      | `data-chart`            | Use `<igx-scatter-series>` or `<igx-bubble-series>`                                   |
+| `_Category Chart` / `_Line Chart` / `_Area Chart` / `_Bar Chart` | `<igx-category-chart>`                 | `IgxCategoryChartComponent`  | — | `[dataSource]`, `[chartType]`, `[brushes]`, `[outlines]`, `[legend]`, `[markerTypes]` |
+| `_Pie Chart` / `_Donut Chart`                                    | `<igx-pie-chart>`                      | `IgxPieChartComponent`       | — | `[dataSource]`, `[valueMemberPath]`, `[labelMemberPath]`                              |
+| `_Financial Chart` / `_Stock Chart`                              | `<igx-financial-chart>`                | `IgxFinancialChartComponent` | — | `[dataSource]`, `[chartType]` (`Candle\|Bar\|Line`), `[volumeType]`                   |
+| `_Sparkline`                                                     | `<igx-sparkline>`                      | `IgxSparklineComponent`      | — | `[dataSource]`, `[valueMemberPath]`, `[displayType]` (`Line\|Area\|Column\|WinLoss`)  |
+| `_Data Chart`                                                    | `<igx-data-chart>`                     | `IgxDataChartComponent`      | — | `[dataSource]`; series added as child elements                                        |
+| `_Doughnut Chart`                                                | `<igx-doughnut-chart>`                 | `IgxDoughnutChartComponent`  | — | `[dataSource]`; `<igx-ring-series>` children                                          |
+| `_Treemap`                                                       | `<igx-treemap>`                        | `IgxTreemapComponent`        | — | `[dataSource]`, `[valueMemberPath]`, `[labelMemberPath]`                              |
+| `_Funnel Chart`                                                  | `<igx-funnel-chart>`                   | `IgxFunnelChartComponent`    | — | `[dataSource]`, `[valueMemberPath]`, `[labelMemberPath]`                              |
+| `_Scatter Chart` / `_Bubble Chart`                               | `<igx-data-chart>` with scatter series | `IgxDataChartComponent`      | — | Use `<igx-scatter-series>` or `<igx-bubble-series>`                                   |
 
 ---
 
@@ -236,7 +235,7 @@
 | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
 | Open-source package                         | `import { Igx... } from 'igniteui-angular/<entry-point>'`                                                  |
 | Licensed package                            | `import { Igx... } from '@infragistics/igniteui-angular/<entry-point>'`                                    |
-| Web components (Tile Manager, Dock Manager) | `import 'igniteui-dockmanager'` / see `layout-manager.md` in the components skill                          |
+| Web components (Tile Manager, Dock Manager) | `import 'igniteui-dockmanager'` / see [`layout-manager.md`](../../igniteui-angular-components/references/layout-manager.md) in the components skill |
 | Rating web component                        | `import { IgcRatingComponent, defineComponents } from 'igniteui-webcomponents'` + `CUSTOM_ELEMENTS_SCHEMA` |
 | DV charts/gauges/maps                       | Require separate `igniteui-angular-charts`, `igniteui-angular-gauges`, or `igniteui-angular-maps` packages |
 

package/skills/igniteui-angular-figma-to-app/references/mcp-setup.md

@@ -12,7 +12,7 @@
 | Server                                     | Purpose                                             | Verify with                                    |
 | ------------------------------------------ | --------------------------------------------------- | ---------------------------------------------- |
 | **Figma**                                  | Read artboard structure, screenshots, design tokens | `figma_get_metadata` (no nodeId)               |
-| **Ignite UI CLI** (`igniteui-cli`)         | Component docs, API reference                       | `igniteui_cli_list_components`                 |
+| **Ignite UI CLI** (`igniteui-cli`)         | Component docs, API reference                       | `list_components`                              |
 | **Ignite UI Theming** (`igniteui-theming`) | Palette + component-level theming code              | `theming_detect_platform`                      |
 | **Playwright**                             | Browser automation, screenshots, DOM measurement    | `playwright_browser_navigate` to `about:blank` |
 
@@ -71,7 +71,7 @@ Create or edit `.cursor/mcp.json`:
 claude mcp add figma -- npx -y @figma/mcp@latest --figma-access-token YOUR_TOKEN_HERE
 ```
 
-Or edit `~/.claude/settings.json`:
+Or add the entry to the project's `.mcp.json` (created at the repo root):
 
 ```json
 {
@@ -151,9 +151,10 @@ Call `figma_get_metadata` with **no `nodeId`**. It should return either:
 > npx -y igniteui-cli ai-config
 > ```
 >
-> This sets up both the MCP configuration and the Agent Skills in one step.
-> Only follow the manual steps below when `npx igniteui-cli ai-config` is not available
-> or you need to configure a non-VS Code editor.
+> This configures **both** the `igniteui-cli` and `igniteui-theming` MCP servers and copies
+> the Agent Skills in one step, preserving existing server entries. Only follow the manual
+> steps below (and in section 3) when `npx igniteui-cli ai-config` is not available or you
+> need to configure an editor it does not cover.
 
 ### VS Code
 
@@ -191,7 +192,7 @@ Create or edit `.cursor/mcp.json`:
 claude mcp add igniteui-cli -- npx -y igniteui-cli mcp
 ```
 
-Or edit `~/.claude/settings.json`:
+Or add the entry to the project's `.mcp.json` (created at the repo root):
 
 ```json
 {
@@ -219,6 +220,9 @@ The `list_components` tool should return a full component list for the Angular f
 
 ## 3. Ignite UI Theming MCP (`igniteui-theming`)
 
+> **`npx -y igniteui-cli ai-config` configures this server too** (see section 2). Use the
+> manual steps below only when `ai-config` is unavailable or doesn't cover your editor.
+
 ### VS Code
 
 Create or edit `.vscode/mcp.json`:
@@ -255,7 +259,7 @@ Create or edit `.cursor/mcp.json`:
 claude mcp add igniteui-theming -- npx -y igniteui-theming igniteui-theming-mcp
 ```
 
-Or edit `~/.claude/settings.json`:
+Or add the entry to the project's `.mcp.json` (created at the repo root):
 
 ```json
 {
@@ -320,7 +324,7 @@ Create or edit `.cursor/mcp.json`:
 claude mcp add playwright -- npx -y @playwright/mcp@latest
 ```
 
-Or edit `~/.claude/settings.json`:
+Or add the entry to the project's `.mcp.json` (created at the repo root):
 
 ```json
 {
@@ -422,7 +426,7 @@ The `playwright_browser_navigate` tool should open the page without error.
 }
 ```
 
-### Claude Code (`~/.claude/settings.json`)
+### Claude Code (`.mcp.json` in the project root)
 
 ```json
 {

package/skills/igniteui-angular-figma-to-app/references/validation-patterns.md

@@ -217,8 +217,8 @@ FIGMA:    header height = 40px
 RENDERED: height = 56px
 SEVERITY: Minor
 FIX:      Call theming_get_component_design_tokens("grid"), find "header-background" or size
-          token, then call theming_set_size({ component: "grid", size: "compact" }) or
-          create_component_theme with a custom header height token.
+          token, then call theming_set_size({ component: "grid", size: "small" }) or
+          theming_create_component_theme with a custom header height token.
 ```
 
 ---

package/skills/igniteui-angular-generate-from-image-design/SKILL.md

@@ -6,9 +6,9 @@ user-invocable: true
 
 # Implementing Ignite UI Angular Views from Design Images
 
-## MANDATORY AGENT PROTOCOL
+## Required Steps Before Coding
 
-Before writing any implementation code, you must complete these steps in order:
+Complete these steps in order before writing any implementation code:
 
 1. Analyze the image and identify all visible regions and UI patterns.
 2. Read [references/component-mapping.md](references/component-mapping.md) and [references/gotchas.md](references/gotchas.md).
@@ -17,6 +17,13 @@ Before writing any implementation code, you must complete these steps in order:
 5. Call `get_doc` for every chosen component family before using it.
 6. Only then start coding.
 
+> **If the MCP tools are unavailable**, do not block the task: fall back to the reference
+> files of the [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md) and
+> [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) skills for component APIs,
+> and the [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md) skill's manual
+> Sass workflow for theming. Suggest running `npx -y igniteui-cli ai-config` (configures the
+> `igniteui-cli` and `igniteui-theming` MCP servers) and reloading the editor for future sessions.
+
 ## Workflow
 
 1. **Analyze the design image** - Read the image, identify every UI section, component, layout structure.
@@ -24,9 +31,10 @@ Before writing any implementation code, you must complete these steps in order:
 3. **Discover components** - Call `list_components` with targeted filters to find matching components for each UI pattern
 4. **Look up component docs** - Call `get_doc` for every chosen component family before coding
 5. **Generate theme** - (a) To generate a theme, first extract colors and create a color palette using `create_palette` or `create_custom_palette` depending on the scenario. Then extract elevations and call `create_elevations`. Then extract typography and call `create_typography`. Then call `create_theme` with the palette, elevations, and typography. (b) After a theme exists, prefer using design tokens or scoped semantic CSS variables over raw literals. (c) For every Ignite UI component, call `get_component_design_tokens`, map extracted image tokens to token roles, then call `create_component_theme` with the tokens differing from the global theme for the specific component.
-6. **Implement** - Build the screenshot-first layout, data, and view components
-7. **Refine** - Use the `set_size`, `set_spacing`, `set_roundness` tools to refine the view's visual fidelity against the image, then iterate on implementation and theming until the view matches the design closely
-8. **Validate** - Build, test, run, compare against the image, and fix differences
+6. **Install DV packages** - if the design uses charts, maps, gauges, or sparklines, resolve and install the compatible DV packages (with approval)
+7. **Implement** - Build the screenshot-first layout, data, and view components
+8. **Refine** - Use the `set_size`, `set_spacing`, `set_roundness` tools to refine the view's visual fidelity against the image, then iterate on implementation and theming until the view matches the design closely
+9. **Validate** - Build, test, run, compare against the image, and fix differences
 
 ## Step 1: Analyze the Design Image
 
@@ -86,9 +94,9 @@ For component-to-Ignite-UI mapping, see [references/component-mapping.md](refere
 
 ## Step 4: Look Up Component API
 
-For every chosen component category, call `get_doc` with the doc name from `list_components` results (e.g., `name: "card"`, `framework: "angular"`). Use the doc `name` field from the MCP results, not the result title shown in the list. This is mandatory before coding and gives exact usage patterns, inputs, and template structure.
+For every chosen component category that appears in the `list_components` results, call `get_doc` with its doc `name` field (not the result title). **The doc catalog covers only a subset of components** — for categories without a doc, read the matching reference files from the [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md) / [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) skills and use `search_api` for member-level API lookups. Read one or the other before coding — it gives exact usage patterns, inputs, and template structure.
 
-Call `search_docs` for feature-based questions (e.g., "how to configure [component] for [specific behavior or styling need]").
+Call `search_docs` for feature-based questions (e.g., "how to configure [component] for [specific behavior or styling need]") — it searches only the docs in the catalog.
 
 ## Step 5: Generate Theme with MCP
 
@@ -224,3 +232,10 @@ Fix TypeScript or template errors immediately during the build/test steps. Use t
 - re-examining the original design for overlooked sections or missing imports
 
 After the build succeeds with zero errors, refine layout proportions, color values, missing sections, and typography until the view matches closely.
+
+## Related Skills
+
+- [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md) — non-grid component reference files
+- [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) — data grid reference files
+- [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md) — theming system source of truth
+- [`igniteui-angular-figma-to-app`](../igniteui-angular-figma-to-app/SKILL.md) — use instead when a live Figma file is available (richer design data than a static image)

package/skills/igniteui-angular-generate-from-image-design/references/component-mapping.md

@@ -21,7 +21,7 @@
 | Tabbed content | `IgxBottomNavComponent` or `IgxTabsComponent` | Panel-based or router-based |
 | Accordion sections | `IgxAccordionComponent` | `IgxExpansionPanelComponent` children |
 | Split layouts | `IgxSplitterComponent` | Horizontal/vertical panes |
-| Tile dashboard | `IgxTileManagerComponent` | Drag/resize tiles (Premium) |
+| Tile dashboard | `<igc-tile-manager>` web component | Drag/resize `<igc-tile>` children (Premium); not an `Igx` Angular component — requires `CUSTOM_ELEMENTS_SCHEMA` |
 
 Decision rule: