igniteui-cli 15.0.0-rc.1 → 15.0.0-rc.3

package/bin/execute.js

@@ -13,9 +13,13 @@ resolve("igniteui-cli", { basedir: process.cwd() }, function (err, res) {
 		const localVersion = require(path.join(process.cwd(), "node_modules/igniteui-cli/package.json"))["version"];
 		const globalVersion = require(path.join(__dirname, "../package.json"))["version"];
 		if (globalVersion !== localVersion) {
-			console.log("Different igniteui-cli global and local version");
+			console.log("Different igniteui-cli global and local version");			
+		}		
+		if (args[0] === "ai-config") {
+			cli = require("../lib/cli");
+		} else {
+			cli = require(res);
 		}
-		cli = require(res);
 	} else {
 		cli = require("../lib/cli");
 	}

package/lib/PromptSession.js

@@ -136,7 +136,8 @@ class PromptSession extends cli_core_1.BasePromptSession {
     }
     configureAI() {
         return __awaiter(this, void 0, void 0, function* () {
-            (0, ai_config_1.configure)();
+            // skip adding skills since those are baked into the project template atm:
+            (0, ai_config_1.configure)(false);
         });
     }
     /**

package/lib/cli.js

@@ -29,6 +29,8 @@ function run() {
     return __awaiter(this, arguments, void 0, function* (args = null) {
         cli_core_1.App.initialize();
         const templateManager = new TemplateManager_1.TemplateManager();
+        // TODO: Refactor all code to use TemplateManager from the App container:
+        cli_core_1.App.container.set(cli_core_1.TEMPLATE_MANAGER, templateManager);
         commands_1.newCommand.addChoices(templateManager.getFrameworkIds());
         commands_1.newCommand.templateManager = templateManager;
         commands_1.add.templateManager = templateManager;

package/lib/commands/ai-config.d.ts

@@ -1,7 +1,6 @@
-import { IFileSystem } from "@igniteui/cli-core";
 import { CommandModule } from "yargs";
-export declare function configureMCP(fileSystem?: IFileSystem): void;
+export declare function configureMCP(): void;
 export declare function configureSkills(): void;
-export declare function configure(fileSystem?: IFileSystem): void;
+export declare function configure(skills?: boolean): void;
 declare const command: CommandModule;
 export default command;

package/lib/commands/ai-config.js

@@ -1,27 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -36,64 +13,36 @@ exports.configureMCP = configureMCP;
 exports.configureSkills = configureSkills;
 exports.configure = configure;
 const cli_core_1 = require("@igniteui/cli-core");
-const path = __importStar(require("path"));
-const IGNITEUI_SERVER_KEY = "igniteui-cli";
-const IGNITEUI_THEMING_SERVER_KEY = "igniteui-theming";
-const igniteuiServer = {
-    command: "npx",
-    args: ["-y", "igniteui-cli@next", "mcp"]
-};
-const igniteuiThemingServer = {
-    command: "npx",
-    args: ["-y", "igniteui-theming", "igniteui-theming-mcp"]
-};
-function getConfigPath() {
-    return path.join(process.cwd(), ".vscode", "mcp.json");
-}
-function readJson(filePath, fallback, fileSystem) {
-    try {
-        return JSON.parse(fileSystem.readFile(filePath));
-    }
-    catch (_a) {
-        return fallback;
-    }
-}
-function writeJson(filePath, data, fileSystem) {
-    fileSystem.writeFile(filePath, JSON.stringify(data, null, 2) + "\n");
-}
-function configureMCP(fileSystem = new cli_core_1.FsFileSystem()) {
-    const configPath = getConfigPath();
-    const config = readJson(configPath, { servers: {} }, fileSystem);
-    config.servers = config.servers || {};
-    let modified = false;
-    if (!config.servers[IGNITEUI_SERVER_KEY]) {
-        config.servers[IGNITEUI_SERVER_KEY] = igniteuiServer;
-        modified = true;
-    }
-    if (!config.servers[IGNITEUI_THEMING_SERVER_KEY]) {
-        config.servers[IGNITEUI_THEMING_SERVER_KEY] = igniteuiThemingServer;
-        modified = true;
-    }
+function configureMCP() {
+    const modified = (0, cli_core_1.addMcpServers)(cli_core_1.VS_CODE_MCP_PATH);
     if (!modified) {
-        cli_core_1.Util.log(` Ignite UI MCP servers already configured in ${configPath}`);
+        cli_core_1.Util.log(` Ignite UI MCP servers already configured in ${cli_core_1.VS_CODE_MCP_PATH}`);
         return;
     }
-    writeJson(configPath, config, fileSystem);
-    cli_core_1.Util.log(cli_core_1.Util.greenCheck() + ` MCP servers configured in ${configPath}`);
+    cli_core_1.Util.log(cli_core_1.Util.greenCheck() + ` MCP servers configured in ${cli_core_1.VS_CODE_MCP_PATH}`);
 }
 function configureSkills() {
     const result = (0, cli_core_1.copyAISkillsToProject)();
-    if (result === "copied") {
-        cli_core_1.Util.log(cli_core_1.Util.greenCheck() + " AI skills added to the project.");
+    if (result.found === 0) {
+        cli_core_1.Util.warn("No AI skill files found. Make sure packages are installed (npm install) " +
+            "and your Ignite UI packages are up-to-date.", "yellow");
+    }
+    else if (result.failed > 0) {
+        cli_core_1.Util.warn(`Failed to write ${result.failed} skill file(s) out of ${result.found}.`, "yellow");
+    }
+    else if (result.skipped === result.found) {
+        cli_core_1.Util.log("Everything is already up-to-date.");
     }
     else {
-        cli_core_1.Util.warn("No AI skill files found. Make sure packages are installed (npm install) " +
-            "and your Ignite UI package includes a skills/ directory.", "yellow");
+        const written = result.found - result.skipped;
+        cli_core_1.Util.log(cli_core_1.Util.greenCheck() + ` ${written} AI skill file(s) created or updated.`);
     }
 }
-function configure(fileSystem = new cli_core_1.FsFileSystem()) {
-    configureMCP(fileSystem);
-    configureSkills();
+function configure(skills = true) {
+    configureMCP();
+    if (skills) {
+        configureSkills();
+    }
 }
 const command = {
     command: "ai-config",

package/lib/templates/IgniteUIForReactTemplate.d.ts

@@ -12,6 +12,7 @@ export declare class IgniteUIForReactTemplate implements Template {
     framework: string;
     projectType: string;
     hasExtraConfiguration: boolean;
+    isHidden: boolean;
     packages: any[];
     delimiters: import("@igniteui/cli-core").TemplateDelimiters;
     protected widget: string;

package/lib/templates/IgniteUIForReactTemplate.js

@@ -40,6 +40,7 @@ class IgniteUIForReactTemplate {
         this.dependencies = [];
         this.framework = "react";
         this.hasExtraConfiguration = false;
+        this.isHidden = false;
         this.packages = [];
         this.delimiters = cli_core_1.defaultDelimiters;
     }

package/lib/templates/IgniteUIForWebComponentsTemplate.d.ts

@@ -11,6 +11,7 @@ export declare class IgniteUIForWebComponentsTemplate implements Template {
     framework: string;
     projectType: string;
     hasExtraConfiguration: boolean;
+    isHidden: boolean;
     packages: any[];
     dependencies: TemplateDependency[];
     delimiters: import("@igniteui/cli-core").TemplateDelimiters;

package/lib/templates/IgniteUIForWebComponentsTemplate.js

@@ -38,6 +38,7 @@ class IgniteUIForWebComponentsTemplate {
         this.framework = "webcomponents";
         this.projectType = "igc-ts";
         this.hasExtraConfiguration = false;
+        this.isHidden = false;
         this.packages = [];
         this.dependencies = [];
         this.delimiters = cli_core_1.defaultDelimiters;

package/lib/templates/jQueryTemplate.d.ts

@@ -15,6 +15,7 @@ export declare class jQueryTemplate implements Template {
     framework: string;
     projectType: string;
     hasExtraConfiguration: boolean;
+    isHidden: boolean;
     packages: any[];
     delimiters: import("@igniteui/cli-core").TemplateDelimiters;
     private configFile;

package/lib/templates/jQueryTemplate.js

@@ -34,6 +34,7 @@ class jQueryTemplate {
     constructor(rootPath) {
         this.rootPath = rootPath;
         this.framework = "jquery";
+        this.isHidden = false;
         this.packages = [];
         this.delimiters = cli_core_1.defaultDelimiters;
         this.configFile = "ignite-cli-views.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-cli",
-  "version": "15.0.0-rc.1",
+  "version": "15.0.0-rc.3",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -66,9 +66,9 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "~21.1.1500-rc.1",
-    "@igniteui/cli-core": "~15.0.0-rc.1",
-    "@igniteui/mcp-server": "~15.0.0-rc.1",
+    "@igniteui/angular-templates": "~21.2.1500-rc.3",
+    "@igniteui/cli-core": "~15.0.0-rc.3",
+    "@igniteui/mcp-server": "~15.0.0-rc.3",
     "@inquirer/prompts": "^7.9.0",
     "@types/yargs": "^17.0.33",
     "chalk": "^5.3.0",

package/templates/jquery/js/projects/empty/index.js

@@ -43,6 +43,7 @@ class EmptyProject {
         this.framework = "jquery";
         this.projectType = "js";
         this.hasExtraConfiguration = false;
+        this.isHidden = false;
         this.routesFile = "bs-routes.json";
         this.delimiters = cli_core_1.defaultDelimiters;
     }

package/templates/react/igr-ts/projects/_base/files/AGENTS.md

@@ -109,3 +109,8 @@ You are an expert in building front-end web applications with React with deep kn
 ## UI Components
 
 - Use `igniteui-react`.
+- Use `igniteui-react-grids` for advanced grids.
+- Use `igniteui-react` and `igniteui-grid-lite` for Grid Lite; import from `igniteui-react/grid-lite`.
+- Use `igniteui-react-charts`, `igniteui-react-gauges`, and `igniteui-react-maps` for charts, gauges, and maps.
+- For package-specific components such as grids, Grid Lite, charts, gauges, and maps, do not assume they come from `igniteui-react`; follow `.claude/skills/igniteui-react-components/SKILL.md` to choose the correct package and imports.
+- If the required Ignite UI package is not present in `package.json`, add or install the correct dependency first.

package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/SKILL.md

@@ -8,6 +8,24 @@ user-invocable: true
 
 This skill covers everything from identifying the right component for a UI requirement to installing, setting up, and using Ignite UI for React components — including JSX patterns, event handling, refs, controlled/uncontrolled form components, and TypeScript.
 
+## Before You Answer
+
+- Do not guess package names or import paths from memory.
+- First identify the component family, then read the relevant reference files from the Content Guide below.
+- Check `package.json` and keep public or licensed package names consistent.
+- If the required package is not present in `package.json`, add or install the correct Ignite UI dependency first. Absence from `package.json` does not mean the package is invalid.
+
+### Package Routing
+
+| Component family | Install packages | Import from |
+|---|---|---|
+| Core UI components | `igniteui-react` | `igniteui-react` |
+| Advanced grids | `igniteui-react-grids` (trial) `@infragistics/igniteui-react-grids` (licensed) | `igniteui-react-grids` |
+| Grid Lite | `igniteui-react`, `igniteui-grid-lite` | `igniteui-react`, `igniteui-grid-lite` |
+| Charts | `igniteui-react-charts` (trial) `@infragistics/igniteui-react-charts` (licensed) | `igniteui-react-charts` |
+| Gauges | `igniteui-react-gauges` (trial) `@infragistics/igniteui-react-gauges` (licensed) | `igniteui-react-gauges` |
+| Maps | `igniteui-react-maps` (trial) `@infragistics/igniteui-react-maps` (licensed) | `igniteui-react-maps` |
+
 ## Example Usage
 
 - "What component should I use to display a list of items with actions?"
@@ -58,9 +76,11 @@ This skill is organized into focused reference files. Load the appropriate file
 
 ---
 
-## Quick Start
+## Quick Start (Core UI Example)
+
+This example uses the core UI package `igniteui-react`. For grids, Grid Lite, charts, gauges, and maps, use the package routing table above first.
 
-### 1. Install
+### 1. Install Core UI Package
 
 ```bash
 npm install igniteui-react
@@ -143,7 +163,7 @@ Use [COMPONENT-CATALOGUE.md](./reference/COMPONENT-CATALOGUE.md) to map any UI n
 
 ## Best Practices
 
-1. **Start with the MIT package** (`igniteui-react`) — it covers most common UI needs
+1. **Use the package routing table first**
 2. **Import theme CSS first** — components need it to render correctly
 3. **Register chart/gauge/map modules** — call `.register()` at module level
 4. **Wrap charts/gauges/maps in sized containers** — they need explicit dimensions

package/templates/react/igr-ts/projects/_base/index.d.ts

@@ -7,6 +7,7 @@ export declare class BaseIgrTsProject implements ProjectTemplate {
     projectType: string;
     dependencies: string[];
     hasExtraConfiguration: boolean;
+    isHidden: boolean;
     delimiters: import("@igniteui/cli-core").TemplateDelimiters;
     get templatePaths(): string[];
     generateConfig(name: string, theme: string, ...options: any[]): {

package/templates/react/igr-ts/projects/_base/index.js

@@ -43,6 +43,7 @@ class BaseIgrTsProject {
         this.framework = "react";
         this.projectType = "tsx";
         this.hasExtraConfiguration = false;
+        this.isHidden = true;
         this.delimiters = cli_core_1.defaultDelimiters;
     }
     get templatePaths() {

package/templates/react/igr-ts/projects/_base_with_home/index.d.ts

@@ -8,6 +8,7 @@ export declare class BaseWithHomeIgrTsProject extends BaseIgrTsProject implement
     framework: string;
     projectType: string;
     hasExtraConfiguration: boolean;
+    isHidden: boolean;
     get templatePaths(): string[];
 }
 declare const _default: BaseWithHomeIgrTsProject;

package/templates/react/igr-ts/projects/_base_with_home/index.js

@@ -36,6 +36,7 @@ class BaseWithHomeIgrTsProject extends _base_1.BaseIgrTsProject {
         this.framework = "react";
         this.projectType = "igr-ts";
         this.hasExtraConfiguration = false;
+        this.isHidden = true;
     }
     get templatePaths() {
         return [...super.templatePaths, path.join(__dirname, "files")];

package/templates/react/igr-ts/projects/base/index.d.ts

@@ -8,6 +8,7 @@ export declare class BasePageIgrTsProject extends BaseIgrTsProject implements Pr
     framework: string;
     projectType: string;
     hasExtraConfiguration: boolean;
+    isHidden: boolean;
     get templatePaths(): string[];
 }
 declare const _default: BasePageIgrTsProject;

package/templates/react/igr-ts/projects/base/index.js

@@ -36,6 +36,7 @@ class BasePageIgrTsProject extends _base_1.BaseIgrTsProject {
         this.framework = "react";
         this.projectType = "igr-ts";
         this.hasExtraConfiguration = false;
+        this.isHidden = true;
     }
     get templatePaths() {
         return [...super.templatePaths, path.join(__dirname, "files")];

package/templates/react/igr-ts/projects/empty/index.d.ts

@@ -8,6 +8,7 @@ export declare class EmptyIgrTsProject extends BaseWithHomeIgrTsProject implemen
     framework: string;
     projectType: string;
     hasExtraConfiguration: boolean;
+    isHidden: boolean;
     get templatePaths(): string[];
 }
 declare const _default: EmptyIgrTsProject;

package/templates/react/igr-ts/projects/empty/index.js

@@ -36,6 +36,7 @@ class EmptyIgrTsProject extends _base_with_home_1.BaseWithHomeIgrTsProject {
         this.framework = "react";
         this.projectType = "igr-ts";
         this.hasExtraConfiguration = false;
+        this.isHidden = false;
     }
     get templatePaths() {
         return [...super.templatePaths, path.join(__dirname, "files")];

package/templates/react/igr-ts/projects/top-nav/index.d.ts

@@ -8,6 +8,7 @@ export declare class TopNavIgrTsProject extends BaseWithHomeIgrTsProject impleme
     framework: string;
     projectType: string;
     hasExtraConfiguration: boolean;
+    isHidden: boolean;
     get templatePaths(): string[];
 }
 declare const _default: TopNavIgrTsProject;

package/templates/react/igr-ts/projects/top-nav/index.js

@@ -36,6 +36,7 @@ class TopNavIgrTsProject extends _base_with_home_1.BaseWithHomeIgrTsProject {
         this.framework = "react";
         this.projectType = "igr-ts";
         this.hasExtraConfiguration = false;
+        this.isHidden = false;
     }
     get templatePaths() {
         return [...super.templatePaths, path.join(__dirname, "files")];

package/templates/webcomponents/igc-ts/projects/_base/files/AGENTS.md

@@ -31,3 +31,9 @@ You are an expert in building front-end web applications. You have a strong unde
 ## UI Components
 
 - Use `igniteui-webcomponents`.
+- Use `igniteui-webcomponents-charts` for charts and data visualization.
+- Use `igniteui-webcomponents-grids` for advanced grids.
+- Use `igniteui-grid-lite` for Grid Lite.
+- Use `igniteui-dockmanager` for Dock Manager.
+- For package-specific components such as charts, advanced grids, Grid Lite, and Dock Manager, do not assume they come from `igniteui-webcomponents`; follow `.claude/skills/igniteui-wc-choose-components/SKILL.md` to choose the correct package and `.claude/skills/igniteui-wc-integrate-with-framework/SKILL.md` for setup.
+- If the required Ignite UI package is not present in `package.json`, add or install the correct dependency first.

package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-choose-components/SKILL.md

@@ -8,6 +8,12 @@ user-invocable: true
 
 This skill helps AI agents and developers identify the best Ignite UI components for any UI requirement, then provides direct links to official documentation, usage examples, and API references.
 
+## Before You Answer
+
+- Choose the package before writing imports or install steps.
+- If the required package is not present in `package.json`, add or install the correct Ignite UI dependency first. Absence from `package.json` does not mean the package is invalid.
+- If the user also needs setup or code, then load [igniteui-wc-integrate-with-framework](../igniteui-wc-integrate-with-framework/SKILL.md).
+
 ## Example Usage
 
 - "What component should I use to display a list of items with actions?"
@@ -46,10 +52,31 @@ Ignite UI for Web Components is distributed across several packages depending on
 | [`igniteui-webcomponents-grids`](https://www.npmjs.com/package/igniteui-webcomponents-grids) | Commercial | `npm install igniteui-webcomponents-grids` (trial) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) with many built-in functionalities  |
 | [`igniteui-grid-lite`](https://www.npmjs.com/package/igniteui-grid-lite) | MIT | `npm install igniteui-grid-lite` | Lightweight data grid for simpler tabular data |
 | [`igniteui-dockmanager`](https://www.npmjs.com/package/igniteui-dockmanager) | Commercial | `npm install igniteui-dockmanager` (trial) | Windowing / docking layouts (IDE-style panels) |
+| [`igniteui-webcomponents-grids`](https://www.npmjs.com/package/igniteui-webcomponents-grids) | Commercial | `npm install igniteui-webcomponents-grids` (trial) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) with many built-in functionalities  |
+| [`@infragistics/igniteui-webcomponents-grids`](https://packages.infragistics.com/feeds/js-licensed/@infragistics/igniteui-webcomponents-grids) | Commercial | `npm install @infragistics/igniteui-webcomponents-grids` (licensed) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) with many built-in functionalities  |
+| [`igniteui-grid-lite`](https://www.npmjs.com/package/igniteui-grid-lite) | MIT | `npm install igniteui-grid-lite` | Lightweight data grid for simpler tabular data |
+| [`igniteui-dockmanager`](https://www.npmjs.com/package/igniteui-dockmanager) | Commercial | `npm install igniteui-dockmanager` (trial) | Windowing / docking layouts (IDE-style panels) |
+| [`@infragistics/igniteui-dockmanager`](https://packages.infragistics.com/feeds/js-licensed/@infragistics/igniteui-dockmanager) | Commercial | `npm install @infragistics/igniteui-dockmanager` (licensed) | Windowing / docking layouts (IDE-style panels) |
 | [`igniteui-webcomponents-charts`](https://www.npmjs.com/package/igniteui-webcomponents-charts) | Commercial | `npm install igniteui-webcomponents-core igniteui-webcomponents-charts` (trial) | Charts and data visualizations (65+ chart types) |
+| [`@infragistics/igniteui-webcomponents-charts`](https://packages.infragistics.com/feeds/js-licensed/@infragistics/igniteui-webcomponents-charts) | Commercial | `npm install @infragistics/igniteui-webcomponents-core @infragistics/igniteui-webcomponents-charts` (licensed) | Charts and data visualizations (65+ chart types) |
 
 ---
 
+## Package Routing
+
+| Component family | Package |
+|---|---|
+| General UI components | `igniteui-webcomponents` |
+| Advanced grids | `igniteui-webcomponents-grids` (trial) `@infragistics/igniteui-webcomponents-grids` (licensed) |
+| Grid Lite | `igniteui-grid-lite` |
+| Dock Manager | `igniteui-dockmanager` (trial) `@infragistics/igniteui-dockmanager` (licensed) |
+| Charts | `igniteui-webcomponents-charts` (trial) `@infragistics/igniteui-webcomponents-charts` (licensed) |
+
+If the request only says "grid", choose by features:
+
+- Advanced features such as editing, paging, summaries, grouping, hierarchical data, or pivot behavior -> `igniteui-webcomponents-grids`
+- Lightweight table -> `igniteui-grid-lite`
+
 ## Component Catalogue by UI Pattern
 
 Use the table below to map a UI need to the right component, then follow the documentation link.

package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: igniteui-wc-integrate-with-framework
-description: Integrate igniteui-webcomponents into React, Angular, Vue, or vanilla JS applications with framework-specific configurations
+description: Integrate Ignite UI Web Components packages into React, Angular, Vue, or vanilla JS applications with framework-specific configurations
 user-invocable: true
 ---
 
@@ -8,6 +8,27 @@ user-invocable: true
 
 This skill helps users integrate Ignite UI Web Components into their application. It detects the framework or platform in use and loads the appropriate step-by-step integration reference.
 
+## Before You Answer
+
+- Choose the package first, then load the framework reference.
+- Do not assume every setup flow uses `igniteui-webcomponents`.
+- If the required package is not present in `package.json`, add or install the correct Ignite UI dependency first. Absence from `package.json` does not mean the package is invalid.
+
+### Package Routing
+
+| Component family | Package |
+|---|---|
+| General UI components | `igniteui-webcomponents` |
+| Advanced grids | `igniteui-webcomponents-grids` (trial) `@infragistics/igniteui-webcomponents-grids` (licensed) |
+| Grid Lite | `igniteui-grid-lite` |
+| Dock Manager | `igniteui-dockmanager` (trial) `@infragistics/igniteui-dockmanager` (licensed) |
+| Charts | `igniteui-webcomponents-charts` (trial) `@infragistics/igniteui-webcomponents-charts` (licensed) |
+
+If the request only says "grid", infer the package from the requested features:
+
+- Use `igniteui-webcomponents-grids` for editing, paging, sorting, filtering, summaries, grouping, hierarchical data, or pivot features.
+- Use `igniteui-grid-lite` for lightweight tabular data.
+
 ## Example Usage
 
 - "How do I use igniteui-webcomponents in my React app?"

package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/angular.md

@@ -1,5 +1,7 @@
 # Integrating Ignite UI Web Components — Angular
 
+> Package note: This page shows the default setup for `igniteui-webcomponents`. If the routing step selected `igniteui-webcomponents-charts`, `igniteui-webcomponents-grids`, `igniteui-grid-lite`, or `igniteui-dockmanager`, replace the package-specific install, import, and registration steps below with that package's setup instead of the default one.
+
 ## Installation
 
 ```bash

package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/react.md

@@ -11,6 +11,8 @@ React integration uses the **`igniteui-react`** package, which provides React-na
 
 Components use the `Igr` prefix (e.g. `IgrButton`, `IgrInput`, `IgrCombo`).
 
+> Package note: This page shows the default React wrapper setup for general UI components. If the routing step selected `igniteui-webcomponents-charts`, `igniteui-webcomponents-grids`, `igniteui-grid-lite`, or `igniteui-dockmanager`, do not reuse the `igniteui-react` and `Igr*` guidance below as-is; switch to the selected package's setup instead.
+
 ### Installation
 
 ```bash

package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/vanilla-js.md

@@ -1,5 +1,7 @@
 # Integrating Ignite UI Web Components — Vanilla JavaScript / HTML
 
+> Package note: This page shows the default setup for `igniteui-webcomponents`. If the routing step selected `igniteui-webcomponents-charts`, `igniteui-webcomponents-grids`, `igniteui-grid-lite`, or `igniteui-dockmanager`, replace the package-specific install, import, and registration steps below with that package's setup instead of the default one.
+
 ## Installation
 
 ```bash

package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/vue.md

@@ -1,5 +1,7 @@
 # Integrating Ignite UI Web Components — Vue 3
 
+> Package note: This page shows the default setup for `igniteui-webcomponents`. If the routing step selected `igniteui-webcomponents-charts`, `igniteui-webcomponents-grids`, `igniteui-grid-lite`, or `igniteui-dockmanager`, replace the package-specific install, import, and registration steps below with that package's setup instead of the default one.
+
 ## Installation
 
 ```bash

package/templates/webcomponents/igc-ts/projects/_base/index.d.ts

@@ -7,6 +7,7 @@ export declare class BaseIgcProject implements ProjectTemplate {
     framework: string;
     projectType: string;
     hasExtraConfiguration: boolean;
+    isHidden: boolean;
     delimiters: import("@igniteui/cli-core").TemplateDelimiters;
     get templatePaths(): string[];
     installModules(): void;

package/templates/webcomponents/igc-ts/projects/_base/index.js

@@ -44,6 +44,7 @@ class BaseIgcProject {
         this.framework = "webcomponents";
         this.projectType = "igc-ts";
         this.hasExtraConfiguration = false;
+        this.isHidden = true;
         this.delimiters = cli_core_1.defaultDelimiters;
     }
     get templatePaths() {

package/templates/webcomponents/igc-ts/projects/_base_with_home/index.d.ts

@@ -4,5 +4,6 @@ export declare class BaseWithHomeIgcProject extends BaseIgcProject implements Pr
     id: string;
     name: string;
     description: string;
+    isHidden: boolean;
     get templatePaths(): string[];
 }

package/templates/webcomponents/igc-ts/projects/_base_with_home/index.js

@@ -32,6 +32,7 @@ class BaseWithHomeIgcProject extends _base_1.BaseIgcProject {
         this.id = "base with home";
         this.name = "Base With Home";
         this.description = "Empty project layout structure for Ignite UI for Web Components";
+        this.isHidden = true;
     }
     get templatePaths() {
         return [...super.templatePaths, path.join(__dirname, "files")];

package/templates/webcomponents/igc-ts/projects/base/index.d.ts

@@ -8,6 +8,7 @@ export declare class BasePageTemplate extends BaseIgcProject implements ProjectT
     projectType: string;
     dependencies: string[];
     hasExtraConfiguration: boolean;
+    isHidden: boolean;
     get templatePaths(): string[];
 }
 declare const _default: BasePageTemplate;

package/templates/webcomponents/igc-ts/projects/base/index.js

@@ -35,6 +35,7 @@ class BasePageTemplate extends _base_1.BaseIgcProject {
         this.framework = "webcomponents";
         this.projectType = "igc-ts";
         this.hasExtraConfiguration = false;
+        this.isHidden = true;
     }
     get templatePaths() {
         return [...super.templatePaths, path.join(__dirname, "files")];

package/templates/webcomponents/igc-ts/projects/empty/index.d.ts

@@ -8,6 +8,7 @@ export declare class EmptyPageTemplate extends BaseWithHomeIgcProject implements
     projectType: string;
     dependencies: string[];
     hasExtraConfiguration: boolean;
+    isHidden: boolean;
     get templatePaths(): string[];
 }
 declare const _default: EmptyPageTemplate;

package/templates/webcomponents/igc-ts/projects/empty/index.js

@@ -35,6 +35,7 @@ class EmptyPageTemplate extends _base_with_home_1.BaseWithHomeIgcProject {
         this.framework = "webcomponents";
         this.projectType = "igc-ts";
         this.hasExtraConfiguration = false;
+        this.isHidden = false;
     }
     get templatePaths() {
         return [...super.templatePaths, path.join(__dirname, "files")];

package/templates/webcomponents/igc-ts/projects/side-nav/index.d.ts

@@ -8,6 +8,7 @@ export declare class SideNavProject extends BaseWithHomeIgcProject implements Pr
     projectType: string;
     dependencies: string[];
     hasExtraConfiguration: boolean;
+    isHidden: boolean;
     get templatePaths(): string[];
 }
 declare const _default: SideNavProject;

package/templates/webcomponents/igc-ts/projects/side-nav/index.js

@@ -35,6 +35,7 @@ class SideNavProject extends _base_with_home_1.BaseWithHomeIgcProject {
         this.framework = "webcomponents";
         this.projectType = "igc-ts";
         this.hasExtraConfiguration = false;
+        this.isHidden = false;
     }
     get templatePaths() {
         return [...super.templatePaths, path.join(__dirname, "files")];