igniteui-cli 15.1.0 → 15.2.0

package/lib/PromptSession.d.ts

@@ -4,6 +4,6 @@ export declare class PromptSession extends BasePromptSession {
     protected getProjectLibrary(framework: Framework): Promise<ProjectLibrary>;
     protected completeAndRun(port?: number): Promise<void>;
     protected upgradePackages(): Promise<void>;
-    protected configureAI(): Promise<void>;
+    protected configureAI(frameworkId: string): Promise<void>;
     protected templateSelectedTask(type?: "component" | "view"): Task<PromptTaskContext>;
 }

package/lib/PromptSession.js

@@ -56,9 +56,9 @@ class PromptSession extends cli_core_1.BasePromptSession {
             yield upgrade_1.default.upgrade({ skipInstall: true, _: ["upgrade"], $0: "upgrade" });
         });
     }
-    configureAI() {
+    configureAI(frameworkId) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield (0, ai_config_1.configure)();
+            yield (0, ai_config_1.configure)(frameworkId);
         });
     }
     templateSelectedTask(type = "component") {

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

@@ -1,14 +1,12 @@
-import { AIAgentTarget, AiCodingAssistant } from "@igniteui/cli-core";
+import { type AIAgentTarget, type AiCodingAssistant } from "@igniteui/cli-core";
 import { CommandModule } from "yargs";
 export declare function configureMCP(assistants: AiCodingAssistant[]): void;
-export declare function configureSkills(agents: AIAgentTarget[]): void;
+export declare function configureSkills(agents: AIAgentTarget[], framework: string): void;
 type AIAgentOption = AIAgentTarget | "none";
 type AIAssistantOption = AiCodingAssistant | "none";
-export declare function configure(agents?: AIAgentOption[], assistants?: AIAssistantOption[], skills?: boolean): Promise<{
+export declare function configure(framework: string, agents?: AIAgentOption[], assistants?: AIAssistantOption[], skills?: boolean): Promise<{
     agents: AIAgentTarget[];
     assistants: AiCodingAssistant[];
 }>;
-export declare function promptForAgents(): Promise<AIAgentOption[]>;
-export declare function promptForAssistant(): Promise<AIAssistantOption[]>;
 declare const command: CommandModule;
 export default command;

package/lib/commands/ai-config.js

@@ -12,8 +12,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.configureMCP = configureMCP;
 exports.configureSkills = configureSkills;
 exports.configure = configure;
-exports.promptForAgents = promptForAgents;
-exports.promptForAssistant = promptForAssistant;
 const cli_core_1 = require("@igniteui/cli-core");
 function configureMCP(assistants) {
     for (const assistant of assistants) {
@@ -27,8 +25,8 @@ function configureMCP(assistants) {
         }
     }
 }
-function configureSkills(agents) {
-    const result = (0, cli_core_1.copyAISkillsToProject)(agents);
+function configureSkills(agents, framework) {
+    const result = (0, cli_core_1.copyAISkillsToProject)(agents, framework);
     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");
@@ -44,8 +42,12 @@ function configureSkills(agents) {
         cli_core_1.Util.log(cli_core_1.Util.greenCheck() + ` ${written} AI skill file(s) created or updated.`);
     }
 }
-function configure() {
-    return __awaiter(this, arguments, void 0, function* (agents = [], assistants = [], skills = true) {
+function configure(framework_1) {
+    return __awaiter(this, arguments, void 0, function* (framework, agents = [], assistants = [], skills = true) {
+        if (framework === "jquery") {
+            // currently not supported
+            return { agents: [], assistants: [] };
+        }
         if (!agents.length) {
             agents = yield promptForAgents();
         }
@@ -63,9 +65,9 @@ function configure() {
         }
         else {
             if (skills) {
-                configureSkills(resolvedAgents);
+                configureSkills(resolvedAgents, framework);
             }
-            (0, cli_core_1.copyAgentInstructionFiles)(resolvedAgents);
+            (0, cli_core_1.copyAgentInstructionFiles)(resolvedAgents, framework);
         }
         return { agents: resolvedAgents, assistants: resolvedAssistants };
     });
@@ -116,35 +118,78 @@ function promptForAssistant() {
         return selected;
     });
 }
+/** delayed call so it's not immediate on module import for testing purposes */
+function getTemplateManager() {
+    return cli_core_1.App.container.get(cli_core_1.TEMPLATE_MANAGER);
+}
+/** Separate from the PromptSession prompt due to step by step config w/ jQuery and w/o Blazor */
+function promptForFrameworkId() {
+    return __awaiter(this, void 0, void 0, function* () {
+        const tm = getTemplateManager();
+        const frameRes = yield cli_core_1.InquirerWrapper.select({
+            name: "framework",
+            message: "Choose framework:",
+            choices: tm.getFrameworkNames(true).filter(x => x !== "jQuery"),
+            default: "Angular"
+        });
+        return tm.getFrameworkByName(frameRes).id;
+    });
+}
 const command = {
     command: "ai-config",
     describe: "Configures Ignite UI AI tooling (MCP servers, AI coding skills and instructions)",
-    builder: (yargs) => yargs
-        .usage("")
-        .option("agents", {
-        describe: "AI agents/tools to generate configuration files for",
-        choices: [...cli_core_1.AI_AGENT_CHOICES, "none"],
-        type: "array"
-    })
-        .option("assistants", {
-        describe: "Coding assistant(s) to configure MCP servers for",
-        choices: [...cli_core_1.AI_ASSISTANT_CHOICES, "none"],
-        type: "array"
-    }),
+    builder: (yargs) => {
+        var _a;
+        return yargs
+            .usage("")
+            .option("agents", {
+            describe: "AI agents/tools to generate configuration files for",
+            choices: [...cli_core_1.AI_AGENT_CHOICES, "none"],
+            type: "array"
+        })
+            .option("assistants", {
+            describe: "Coding assistant(s) to configure MCP servers for",
+            choices: [...cli_core_1.AI_ASSISTANT_CHOICES, "none"],
+            type: "array"
+        })
+            .option("framework", {
+            alias: "f",
+            describe: "Manually set project framework to configure AI for.",
+            choices: (_a = getTemplateManager()) === null || _a === void 0 ? void 0 : _a.getFrameworkIds(true).filter(x => x !== "jquery"),
+            type: "string"
+        });
+    },
     handler(argv) {
         return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b;
+            var _a, _b, _c, _d;
             const agents = ((_a = argv.agents) !== null && _a !== void 0 ? _a : []);
             const assistants = ((_b = argv.assistants) !== null && _b !== void 0 ? _b : []);
             cli_core_1.GoogleAnalytics.post({
                 t: "screenview",
                 cd: "Ai Config"
             });
-            const result = yield configure(agents, assistants);
+            let framework = (_c = argv.framework) !== null && _c !== void 0 ? _c : (0, cli_core_1.detectFramework)();
+            if (!framework) {
+                cli_core_1.Util.log("Framework not provided and couldn't detect project from config or structure.");
+                if (cli_core_1.Util.canPrompt()) {
+                    framework = yield promptForFrameworkId();
+                }
+                else {
+                    return cli_core_1.Util.error("Please provide --framework argument.", "red");
+                }
+            }
+            if (!((_d = getTemplateManager()) === null || _d === void 0 ? void 0 : _d.getFrameworkById(framework))) {
+                return cli_core_1.Util.error("Framework not supported", "red");
+            }
+            if (framework === "jquery") {
+                cli_core_1.Util.log("AI Config currently not available for jQuery projects.");
+            }
+            const result = yield configure(framework, agents, assistants);
             cli_core_1.GoogleAnalytics.post({
                 t: "event",
                 ec: "$ig ai-config",
-                ea: `agent: ${result.agents.join(", ") || "none"}; assistant: ${result.assistants.join(", ") || "none"}`
+                ea: `agent: ${result.agents.join(", ") || "none"}; assistant: ${result.assistants.join(", ") || "none"}`,
+                cd1: framework
             });
         });
     }

package/lib/commands/new.js

@@ -174,7 +174,7 @@ const command = {
                 yield cli_core_1.Util.processTemplates(templatePath, path.join(process.cwd(), argv.name), config, projTemplate.delimiters, false);
             }
             process.chdir(argv.name);
-            yield (0, ai_config_1.configure)(argv.agents, argv.assistants);
+            yield (0, ai_config_1.configure)(argv.framework, argv.agents, argv.assistants);
             process.chdir("..");
             cli_core_1.Util.log(cli_core_1.Util.greenCheck() + " Project Created");
             if (!argv.skipInstall) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-cli",
-  "version": "15.1.0",
+  "version": "15.2.0",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -66,9 +66,9 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "~21.2.1510",
-    "@igniteui/cli-core": "~15.1.0",
-    "@igniteui/mcp-server": "~15.1.0",
+    "@igniteui/angular-templates": "~21.2.1520",
+    "@igniteui/cli-core": "~15.2.0",
+    "@igniteui/mcp-server": "~15.2.0",
     "@inquirer/prompts": "^7.9.0",
     "chalk": "^5.3.0",
     "glob": "^11.0.0",

package/templates/blazor/igb/index.d.ts

@@ -0,0 +1 @@
+export {};

package/templates/blazor/igb/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgbBlazorProjectLibrary extends cli_core_1.BaseProjectLibrary {
+    constructor() {
+        super(__dirname);
+        this.name = "Ignite UI for Blazor";
+        this.projectType = "igb";
+        this.themes = ["default"];
+    }
+}
+module.exports = new IgbBlazorProjectLibrary();

package/templates/blazor/igb/projects/ai-config/files/AGENTS.md

@@ -0,0 +1,65 @@
+You are an expert in C#, Blazor, and scalable web application development. You write functional, maintainable, performant, and accessible code following .NET and Blazor best practices. You are currently immersed in the latest .NET and Blazor, adopting modern C# features, component-based architecture with clean separation of concerns, and modern Blazor patterns for reactive UI and dependencygit pull injection.
+
+## Coding Standards
+
+- Use strict type checking and enable nullability (`#nullable enable`)
+- Prefer type inference (`var`) when the type is obvious
+- Avoid `dynamic`; use generics or `object` with pattern matching when type is uncertain
+- Use the latest C# version supported by the project;
+- Prefer modern C# features: record types, pattern matching, global usings, file-scoped namespaces, primary constructors
+- Use PascalCase for public members and component names; camelCase for private fields; prefix interfaces with `I` (e.g., `IUserService`)
+- Follow the official .NET coding conventions: https://learn.microsoft.com/en-us/dotnet/csharp/fundamentals/coding-style/coding-conventions
+
+## Blazor Architecture
+
+- **File separation**: `.razor` (template), `.razor.cs` (logic), `.razor.css` (scoped styles)
+- **Lifecycle**: Use `OnInitializedAsync` / `OnParametersSetAsync` for initialization and parameter changes
+- **Data binding**: Use `@bind` for two-way binding
+- **Component design**: Keep components small and focused on a single responsibility
+- **Component inputs and outputs**: Use `[Parameter]` for component inputs and `EventCallback` for component outputs
+- **Event handling**: Prefer `EventCallback<T>` over `Action<T>` for event handling to integrate with the Blazor render pipeline
+- **DI**: Inject via `[Inject]` property or `@inject` directive; use `async/await` for all I/O
+- **HTTP**: Use `HttpClient` or appropriate services to communicate with external APIs
+- **Rendering**: Override `ShouldRender()` to skip unnecessary re-renders; call `StateHasChanged()` only outside Blazor's event pipeline
+- **Errors**: Wrap components in `ErrorBoundary`; use try-catch for API calls with `ILogger` diagnostics
+- **Validation**: Use `FluentValidation` or `DataAnnotations` for form validation
+
+## State Management
+
+- Basic sharing: Cascading Parameters + `EventCallback`
+- Session state (Server): StateContainer pattern via Scoped Service
+- Persistence (WASM): `Blazored.LocalStorage` / `Blazored.SessionStorage`
+- Complex apps: Fluxor or BlazorState
+
+## Styling
+
+- Use `.razor.css` scoped stylesheets files for component-specific styles; CSS isolation prevents leakage between components
+- Prefer CSS custom properties for themeable values
+- Do NOT use inline styles; extract to `.razor.css` or a shared stylesheet
+
+## Caching
+
+- Use `IMemoryCache` for lightweight server-side caching in Blazor Server apps
+- For Blazor WebAssembly, use `localStorage` or `sessionStorage` to cache state between page reloads
+- Consider distributed cache strategies (Redis, SQL Server Cache) for larger apps requiring shared state across multiple users
+- Cache API responses to avoid redundant calls when data is unlikely to change
+
+## Security
+
+- Use ASP.NET Identity or JWT for auth; always HTTPS with proper CORS
+- Never expose sensitive data in client-side Blazor WebAssembly code
+
+## Testing
+
+- Unit/integration: xUnit or MSTest with Moq or NSubstitute
+- Component tests: bUnit for rendering and interaction verification
+- Use Visual Studio's diagnostics tools for performance profiling
+
+## UI Components
+
+- Use `IgniteUI.Blazor.Lite`, `IgniteUI.Blazor.GridLite` for general purpose components and light-weight grid, and `IgniteUI.Blazor` (trial version available publicly as `IgniteUI.Blazor.Trial`) for specialized feature-rich grids and charts.
+- Components use the `Igb` prefix (e.g., `IgbGrid`, `IgbCombo`, `IgbDatePicker`).
+- Every component requires module registration in `Program.cs`: `builder.Services.AddIgniteUIBlazor(typeof(IgbGridModule))`.
+- Add `@using IgniteUI.Blazor.Controls` to `_Imports.razor`.
+- Link a theme stylesheet in the host page (e.g., `_content/IgniteUI.Blazor/themes/light/bootstrap.css`).
+- If the `IgniteUI.Blazor.Lite`, `IgniteUI.Blazor.GridLite` NuGet packages are not present in the project file, add it first.

package/templates/blazor/igb/projects/ai-config/files/skills/AGENTS.md

@@ -0,0 +1,65 @@
+You are an expert in C#, Blazor, and scalable web application development. You write functional, maintainable, performant, and accessible code following .NET and Blazor best practices. You are currently immersed in the latest .NET and Blazor, adopting modern C# features, component-based architecture with clean separation of concerns, and modern Blazor patterns for reactive UI and dependencygit pull injection.
+
+## Coding Standards
+
+- Use strict type checking and enable nullability (`#nullable enable`)
+- Prefer type inference (`var`) when the type is obvious
+- Avoid `dynamic`; use generics or `object` with pattern matching when type is uncertain
+- Use the latest C# version supported by the project;
+- Prefer modern C# features: record types, pattern matching, global usings, file-scoped namespaces, primary constructors
+- Use PascalCase for public members and component names; camelCase for private fields; prefix interfaces with `I` (e.g., `IUserService`)
+- Follow the official .NET coding conventions: https://learn.microsoft.com/en-us/dotnet/csharp/fundamentals/coding-style/coding-conventions
+
+## Blazor Architecture
+
+- **File separation**: `.razor` (template), `.razor.cs` (logic), `.razor.css` (scoped styles)
+- **Lifecycle**: Use `OnInitializedAsync` / `OnParametersSetAsync` for initialization and parameter changes
+- **Data binding**: Use `@bind` for two-way binding
+- **Component design**: Keep components small and focused on a single responsibility
+- **Component inputs and outputs**: Use `[Parameter]` for component inputs and `EventCallback` for component outputs
+- **Event handling**: Prefer `EventCallback<T>` over `Action<T>` for event handling to integrate with the Blazor render pipeline
+- **DI**: Inject via `[Inject]` property or `@inject` directive; use `async/await` for all I/O
+- **HTTP**: Use `HttpClient` or appropriate services to communicate with external APIs
+- **Rendering**: Override `ShouldRender()` to skip unnecessary re-renders; call `StateHasChanged()` only outside Blazor's event pipeline
+- **Errors**: Wrap components in `ErrorBoundary`; use try-catch for API calls with `ILogger` diagnostics
+- **Validation**: Use `FluentValidation` or `DataAnnotations` for form validation
+
+## State Management
+
+- Basic sharing: Cascading Parameters + `EventCallback`
+- Session state (Server): StateContainer pattern via Scoped Service
+- Persistence (WASM): `Blazored.LocalStorage` / `Blazored.SessionStorage`
+- Complex apps: Fluxor or BlazorState
+
+## Styling
+
+- Use `.razor.css` scoped stylesheets files for component-specific styles; CSS isolation prevents leakage between components
+- Prefer CSS custom properties for themeable values
+- Do NOT use inline styles; extract to `.razor.css` or a shared stylesheet
+
+## Caching
+
+- Use `IMemoryCache` for lightweight server-side caching in Blazor Server apps
+- For Blazor WebAssembly, use `localStorage` or `sessionStorage` to cache state between page reloads
+- Consider distributed cache strategies (Redis, SQL Server Cache) for larger apps requiring shared state across multiple users
+- Cache API responses to avoid redundant calls when data is unlikely to change
+
+## Security
+
+- Use ASP.NET Identity or JWT for auth; always HTTPS with proper CORS
+- Never expose sensitive data in client-side Blazor WebAssembly code
+
+## Testing
+
+- Unit/integration: xUnit or MSTest with Moq or NSubstitute
+- Component tests: bUnit for rendering and interaction verification
+- Use Visual Studio's diagnostics tools for performance profiling
+
+## UI Components
+
+- Use `IgniteUI.Blazor.Lite`, `IgniteUI.Blazor.GridLite` for general purpose components and light-weight grid, and `IgniteUI.Blazor` (trial version available publicly as `IgniteUI.Blazor.Trial`) for specialized feature-rich grids and charts.
+- Components use the `Igb` prefix (e.g., `IgbGrid`, `IgbCombo`, `IgbDatePicker`).
+- Every component requires module registration in `Program.cs`: `builder.Services.AddIgniteUIBlazor(typeof(IgbGridModule))`.
+- Add `@using IgniteUI.Blazor.Controls` to `_Imports.razor`.
+- Link a theme stylesheet in the host page (e.g., `_content/IgniteUI.Blazor/themes/light/bootstrap.css`).
+- If the `IgniteUI.Blazor.Lite`, `IgniteUI.Blazor.GridLite` NuGet packages are not present in the project file, add it first.

package/templates/blazor/igb/projects/ai-config/files/skills/README.md

@@ -0,0 +1,61 @@
+# Ignite UI for Blazor - AI Agent Skills & Instructions
+
+This folder contains a set of **skill files** for AI coding agents and the [`AGENTS.md`](./AGENTS.md) instruction file. Together they give agents the coding standards, Ignite UI Blazor conventions, and structured MCP-backed guidance needed to produce correct code - without hallucinating stale APIs.
+
+---
+
+## Available Skills
+
+Skills are structured `SKILL.md` documents paired with `references/` sub-files. When a request matches a skill's domain, the agent reads the routing hub, reads the relevant reference files in parallel, calls the Ignite UI MCP tools, and produces output based only on that - never from memory.
+
+### [`igniteui-blazor-components`](./igniteui-blazor-components/SKILL.md)
+
+All non-grid IgniteUI.Blazor.Lite components: form controls (Input, Combo, Select, Date Picker, Calendar, Checkbox, Radio, Slider, Rating), layout containers (Tabs, Stepper, Accordion, Navbar, Nav Drawer, Tree), data display (List, Card, Avatar, Badge, Chip, Button, Progress, Dropdown, Tooltip), feedback (Dialog, Snackbar, Toast, Banner), layout managers (Dock Manager, Tile Manager), and visualizations (charts, gauges, maps, sparklines).
+
+### [`igniteui-blazor-grids`](./igniteui-blazor-grids/SKILL.md)
+
+All Ignite UI Blazor data grid types:
+
+| Component | Package | Use case |
+|---|---|---|
+| `IgbGridLite` | `IgniteUI.Blazor.GridLite` (MIT) | Read-only display with sorting, filtering, virtualization |
+| `IgbGrid` | `IgniteUI.Blazor` | Flat tabular data - editing, grouping, paging, export |
+| `IgbTreeGrid` | `IgniteUI.Blazor` | Self-referencing tree data (org charts, BOM) |
+| `IgbHierarchicalGrid` | `IgniteUI.Blazor` | Multi-schema parent-child data |
+| `IgbPivotGrid` | `IgniteUI.Blazor` | Pivot table analytics |
+
+### [`igniteui-blazor-theming`](./igniteui-blazor-theming/SKILL.md)
+
+Theme switching (Bootstrap, Material, Fluent, Indigo - light/dark), color palettes, CSS design tokens, dark mode, CSS shadow parts, and global layout tokens (roundness, spacing, size). All CSS is generated by the `igniteui-theming` MCP server - no token names are written from memory.
+
+### [`igniteui-blazor-generate-from-image-design`](./igniteui-blazor-generate-from-image-design/SKILL.md)
+
+End-to-end workflow for implementing a Blazor view from a design image or mockup. Combines all three skills above: analyzes the image, discovers components via MCP, generates a theme, implements the full view with mock data, and refines visual fidelity.
+
+---
+
+## MCP Servers
+
+Both servers must be configured in your AI tool. Setup instructions are in each skill's `references/mcp-setup.md`.
+
+| Server | Purpose | Key tools |
+|---|---|---|
+| **`igniteui-cli`** | Component docs, API reference, scaffolding | `list_components`, `get_doc`, `search_docs`, `get_api_reference`, `search_api` |
+| **`igniteui-theming`** | CSS palette and token generation | `create_palette`, `get_component_design_tokens`, `create_component_theme`, `set_roundness`, `set_spacing`, `set_size` |
+
+---
+
+## AGENTS.md - What It Is and Where to Put It
+
+[`AGENTS.md`](./AGENTS.md) is a **general-purpose AI agent instruction file** for developers building Blazor applications *with* Ignite UI for Blazor. It is **not** the AGENTS.md for this library's own repository.
+
+Copy it (and optionally the `skills/` folder) into your Blazor application project, then place it in the location your AI tool reads for project-level instructions:
+
+| AI Tool | File to create | Notes |
+|---|---|---|
+| **GitHub Copilot** (VS Code) | `.github/copilot-instructions.md` | Must be named exactly `copilot-instructions.md` inside `.github/` |
+| **Claude Code** | `CLAUDE.md` (project root) | Read automatically on session start; `.claude/` subfolder for extra settings |
+| **Cursor** | `.cursor/rules/igniteui-blazor.mdc` or `.cursorrules` | `.mdc` supports YAML front matter (see below); `.cursorrules` is the legacy path |
+| **Windsurf** | `.windsurfrules` (project root) | Read automatically |
+| **Codex CLI** | `AGENTS.md` (project root) | Read from cwd and parent directories |
+| **Aider** | `CONVENTIONS.md` or `--read AGENTS.md` flag | Pass at startup |

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/SKILL.md

@@ -0,0 +1,118 @@
+---
+name: igniteui-blazor-components
+description: "Covers non-grid Ignite UI for Blazor UI components: application setup, form controls (inputs, combos, selects, date/time pickers, calendar, checkbox, radio, switch, slider, rating), layout containers (tabs, stepper, accordion, expansion panel, navigation drawer, navbar, tree), data-display components (list, card, carousel, avatar, badge, chip, icon, progress indicators, dropdown, tooltip), feedback overlays (dialog, snackbar, toast, banner), layout managers (Dock Manager, Tile Manager); and visualizations (Category Chart, Data Chart, Financial/Stock Chart, Pie/Donut Chart, Sparkline, Treemap, Geographic Map, Gauges, Dashboard Tile) requiring IgniteUI.Blazor or IgniteUI.Blazor.Trial. Use when users ask about any Ignite UI Blazor component that is NOT a data grid. Do NOT use for data grids, tables, or tabular data - use igniteui-blazor-grids instead. Do NOT use for theming or styling - use igniteui-blazor-theming instead."
+user-invocable: true
+---
+
+# Ignite UI for Blazor - UI Components
+
+## Prerequisites
+
+- .NET 8+ Blazor project (Server, WebAssembly, Web App, or MAUI Blazor Hybrid)
+- The correct NuGet package installed: `IgniteUI.Blazor.Lite` (NuGet.org, MIT) for general purpose UI components; `IgniteUI.Blazor.GridLite` (NuGet.org, MIT) for the lightweight grid; `IgniteUI.Blazor` (Infragistics private feed, licensed) for the full suite including charts, maps, gauges, and enterprise grids; or `IgniteUI.Blazor.Trial` (NuGet.org) for evaluation of the full suite
+- `builder.Services.AddIgniteUIBlazor(...)` called in `Program.cs`
+- `@using IgniteUI.Blazor.Controls` added to `_Imports.razor`
+- A theme CSS file linked in the host page (see [`references/setup.md`](./references/setup.md))
+- 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(framework: "blazor")`. 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.
+
+## Setting Up the Ignite UI CLI MCP Server
+
+> **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.
+
+## MANDATORY AGENT PROTOCOL - YOU MUST FOLLOW THIS BEFORE PRODUCING ANY OUTPUT
+
+**This file is a routing hub only. It contains no component examples and no component API details.**
+
+> **DO NOT write any component names, property names, event names, module registration calls, or Razor attributes from memory.**
+> Component APIs change between versions. Anything generated without reading the reference files and Blazor MCP docs 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**. Reference files map components to their MCP doc slugs and explain which MCP calls to make.
+
+**STEP 3 - Extract doc slugs, then call `get_doc` and API tools for each component involved.**
+Use the Ignite UI MCP `get_doc` tool with `framework: "blazor"` and the exact doc slug listed in the reference files you just read. It returns the actual registration pattern, Razor markup, examples, and CSS parts. Do NOT skip this step.
+
+If a reference file does not list a slug for the requested component, call `search_docs(framework: "blazor", query: "<component or feature>")` to find the correct doc. If no Blazor doc exists, say that the component or feature is not covered instead of guessing.
+
+Use `search_api` and `get_api_reference` for Blazor component API details when property names, methods, events, or signatures are needed.
+
+**STEP 4 - Only then produce output.**
+Base your code and explanation exclusively on what you read. If the reference files or MCP docs do not cover something, say so explicitly rather than guessing.
+
+### Task → Reference File
+
+| Task | Reference file to read |
+|---|---|
+| NuGet install, `Program.cs` registration, `_Imports.razor`, CSS/script references, project types (Server, WASM, Web App, MAUI) | [`references/setup.md`](./references/setup.md) |
+| Input, Combo Box, Select, Date Picker, Date Range Picker, Calendar, Date Time Input, Mask Input, Checkbox, Radio / Radio Group, Switch, Slider / Range Slider, Rating, form/value binding | [`references/form-controls.md`](./references/form-controls.md) |
+| Tabs, Stepper, Accordion, Expansion Panel, Navigation Drawer, Navbar, Tree | [`references/layout.md`](./references/layout.md) |
+| List, Card, Carousel, Avatar, Badge, Chip, Icon, Icon Button, Button, Button Group, Circular Progress, Linear Progress, Dropdown, Tooltip, Ripple | [`references/data-display.md`](./references/data-display.md) |
+| Dialog, Snackbar, Toast, Banner | [`references/feedback.md`](./references/feedback.md) |
+| Dock Manager (panes, tabs, floating, serialization), Tile Manager | [`references/layout-manager.md`](./references/layout-manager.md) |
+| Category Chart, Data Chart, Financial / Stock Chart, Pie Chart, Donut Chart, Sparkline, Treemap, Geographic Map, Gauges, Dashboard Tile, visualization features (animations, tooltips, markers, highlighting, zooming, legends, maps, ranges) | [`references/charts.md`](./references/charts.md) |
+
+> **When in doubt, read more rather than fewer reference files.** The cost of an unnecessary file read is negligible; the cost of hallucinated API usage is a broken application.
+
+## Package Variants
+
+| Package | Source | Who uses it |
+|---|---|---|
+| `IgniteUI.Blazor.Lite` | NuGet.org | Open-source / MIT users needing core UI components (forms, layout, navigation, data display, feedback) |
+| `IgniteUI.Blazor.GridLite` | NuGet.org | Open-source / MIT users needing the lightweight `IgbGridLite` data grid |
+| `IgniteUI.Blazor` | Infragistics private NuGet feed (`https://packages.infragistics.com/nuget/licensed/`) | Licensed / enterprise users that need the full component suite (grids, charts, maps, gauges, Dock Manager) |
+| `IgniteUI.Blazor.Trial` | NuGet.org | Evaluation users — same full suite as `IgniteUI.Blazor` but with a trial watermark |
+
+`IgniteUI.Blazor.Lite` contains the open-source UI component set, while `IgniteUI.Blazor.GridLite` contains the free `IgbGridLite` data grid package. Both use the `IgniteUI.Blazor.Controls` namespace. Do **not** mix the licensed `IgniteUI.Blazor` package with `IgniteUI.Blazor.Lite` in the same project; they use the same namespaces and duplicate some components.
+
+## Key Blazor-Specific Notes
+
+> **AGENT INSTRUCTION - Module Registration**
+>
+> Every Ignite UI for Blazor component **and its sub-components** has a corresponding module. Register **all** modules for every component used on the page in `Program.cs`:
+>
+> ```csharp
+> builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule), typeof(IgbDatePickerModule));
+> ```
+>
+> Calling `builder.Services.AddIgniteUIBlazor()` with no arguments registers ALL modules (useful for prototypes but increases bundle size). Prefer explicit module registration in production.
+
+> **AGENT INSTRUCTION - `@ref` and `EnsureReady`**
+>
+> When accessing a component from C# code (e.g., to call `ShowAsync()` on a dialog), use `@ref`:
+>
+> ```razor
+> <IgbDialog @ref="DialogRef" />
+>
+> @code {
+>     public IgbDialog DialogRef { get; set; }
+> }
+> ```
+>
+> Some components (e.g., `IgbIcon`) require `await component.EnsureReady()` before calling async registration methods in `OnAfterRenderAsync(bool firstRender)`.
+
+> **AGENT INSTRUCTION - Forms**
+>
+> Several Ignite UI Blazor components such as `IgbCombo` and `IgbRadio` do **not** work with the standard HTML `<form>` element. Do not assume a universal form pattern. Check the component's MCP doc first, bind component values explicitly (`@bind-Value`, `@bind-Checked`, or documented change events), and only use form integration patterns shown by the current docs.
+
+---
+
+## Related Skills
+
+- [`igniteui-blazor-grids`](../igniteui-blazor-grids/SKILL.md) - Data Grids (Grid, Tree Grid, Hierarchical Grid, Pivot Grid, Grid Lite)
+- [`igniteui-blazor-theming`](../igniteui-blazor-theming/SKILL.md) - Theming & Styling