Merge branch '21.2.x' into ganastasov/fix-17212-21.2.x

Author: ddaribo

.github/AGENTS-README.md

@@ -408,6 +408,7 @@ The system also relies on repository-specific guidance and internal operational
 skills/igniteui-angular-components/SKILL.md
 skills/igniteui-angular-grids/SKILL.md
 skills/igniteui-angular-theming/SKILL.md
+skills/igniteui-angular-generate-from-image-design/SKILL.md
 .github/skills/igniteui-angular-build/SKILL.md
 .github/skills/igniteui-angular-testing/SKILL.md
 .github/skills/igniteui-angular-linting/SKILL.md
@@ -418,6 +419,7 @@ Repository-specific skills for implementation guidance:
 - `igniteui-angular-components` — shared guidance for general component patterns, structure, and repository conventions.
 - `igniteui-angular-grids` — shared guidance for grid architecture, patterns, and grid-specific implementation work.
 - `igniteui-angular-theming` — shared guidance for SCSS structure, theme wiring, and style-system conventions.
+- `igniteui-angular-generate-from-image-design` — shared guidance for turning screenshots and mockups into Angular views with Ignite UI components and theming workflow.
 
 The internal operational skills are shared references for repository commands and validation flow:
 

.github/copilot-instructions.md

@@ -121,6 +121,7 @@ Domain-specific skills for AI-assisted development are located in the [`skills/`
 - [`skills/igniteui-angular-components`](../skills/igniteui-angular-components/SKILL.md) — UI Components (form controls, layout, data display, feedback/overlays, directives — Input Group, Combo, Select, Date/Time Pickers, Calendar, Tabs, Stepper, Accordion, List, Card, Dialog, Snackbar, Button, Ripple, Tooltip, Drag and Drop, Layout Manager, Dock Manager) and Charts (Area Chart, Bar Chart, Column Chart, Stock/Financial Chart, Pie Chart)
 - [`skills/igniteui-angular-grids`](../skills/igniteui-angular-grids/SKILL.md) — Data Grids (grid type selection, column config, sorting, filtering, selection, editing, grouping, paging, remote data, state persistence, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid)
 - [`skills/igniteui-angular-theming`](../skills/igniteui-angular-theming/SKILL.md) — Theming & Styling (includes MCP server setup)
+- [`skills/igniteui-angular-generate-from-image-design`](../skills/igniteui-angular-generate-from-image-design/SKILL.md) — Generate Angular views from screenshots, mockups, and wireframes with Ignite UI components and theming guidance
 - [`.github/skills/igniteui-angular-build`](skills/igniteui-angular-build/SKILL.md) — Building the library (full build, `build:lib`, partial builds for styles, migrations, schematics, i18n, elements)
 - [`.github/skills/igniteui-angular-testing`](skills/igniteui-angular-testing/SKILL.md) — Testing (choosing the right test suite, grid vs non-grid, watch mode, schematics/styles/i18n tests)
 - [`.github/skills/igniteui-angular-linting`](skills/igniteui-angular-linting/SKILL.md) — Linting (ESLint + Stylelint, `lint:lib`, configuration files)

AGENTS.md

@@ -39,7 +39,7 @@ projects/
   igniteui-angular-i18n/           ← i18n package/resources
   igniteui-angular-performance/    ← performance-focused project
 scripts/                           ← build, docs, packaging, and style scripts
-skills/                            ← AI skill guides for components, grids, and theming
+skills/                            ← AI skill guides for components, grids, theming, and image-to-app generation
 src/app/                           ← demo application
   <component>/                     ← existing demo/sample areas reused for user-visible changes
 CHANGELOG.md                       ← release notes
@@ -118,6 +118,7 @@ Domain-specific knowledge for AI assistants:
 | Components | [`skills/igniteui-angular-components/SKILL.md`](skills/igniteui-angular-components/SKILL.md) | Working on non-grid UI components, charts |
 | Grids | [`skills/igniteui-angular-grids/SKILL.md`](skills/igniteui-angular-grids/SKILL.md) | Working on grid, tree-grid, hierarchical-grid, pivot-grid |
 | Theming | [`skills/igniteui-angular-theming/SKILL.md`](skills/igniteui-angular-theming/SKILL.md) | Working on styles, themes, palettes |
+| Generate From Image Design | [`skills/igniteui-angular-generate-from-image-design/SKILL.md`](skills/igniteui-angular-generate-from-image-design/SKILL.md) | Building Angular views from screenshots, mockups, or wireframes with Ignite UI components |
 | Build | [`.github/skills/igniteui-angular-build/SKILL.md`](.github/skills/igniteui-angular-build/SKILL.md) | Building the library, producing dist output, compiling migrations/schematics |
 | Testing | [`.github/skills/igniteui-angular-testing/SKILL.md`](.github/skills/igniteui-angular-testing/SKILL.md) | Running test suites, choosing the right Karma config |
 | Linting | [`.github/skills/igniteui-angular-linting/SKILL.md`](.github/skills/igniteui-angular-linting/SKILL.md) | Running ESLint and Stylelint, fixing lint errors |

README.md

@@ -49,6 +49,7 @@ This repository ships with **Copilot Skills** — structured knowledge files tha
 | Components | [`skills/igniteui-angular-components/SKILL.md`](skills/igniteui-angular-components/SKILL.md) | UI Components (form controls, layout, data display, feedback/overlays, directives — Input Group, Combo, Select, Date/Time Pickers, Calendar, Tabs, Stepper, Accordion, List, Card, Dialog, Snackbar, Button, Ripple, Tooltip, Drag and Drop, Layout Manager, Dock Manager and Charts (Area Chart, Bar Chart, Column Chart, Stock/Financial Chart, Pie Chart)) |
 | Data Grids | [`skills/igniteui-angular-grids/SKILL.md`](skills/igniteui-angular-grids/SKILL.md) | Data Grids (grid type selection, column config, sorting, filtering, selection, editing, grouping, paging, remote data, state persistence, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid) |
 | Theming & Styling | [`skills/igniteui-angular-theming/SKILL.md`](skills/igniteui-angular-theming/SKILL.md) | Theming & Styling (includes MCP server setup) |
+| Generate From Image Design | [`skills/igniteui-angular-generate-from-image-design/SKILL.md`](skills/igniteui-angular-generate-from-image-design/SKILL.md) | Build Angular views from screenshots, mockups, and wireframes using Ignite UI components, theming MCP tools, and image-to-layout/component mapping guidance |
 
 #### How It Works
 

projects/igniteui-angular/badge/src/badge/badge.component.ts

@@ -32,9 +32,11 @@ export type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType];
  *
  * @example
  * ```html
- * <igx-avatar>
- *   <igx-badge icon="check" type="success"></igx-badge>
- * </igx-avatar>
+ * <div class="avatar-badge-container">
+ *  <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
+ *  <igx-badge icon="check" type="success" shape="square"></igx-badge>
+ * </div>
+ * ```
  */
 @Component({
     selector: 'igx-badge',

skills/igniteui-angular-components/SKILL.md

@@ -6,6 +6,29 @@ user-invocable: true
 
 # Ignite UI for Angular — UI Components
 
+## Prerequisites
+- Angular 20+ project
+- `@angular/cli` installed
+- `igniteui-angular` or `@infragistics/igniteui-angular` added to the project via `ng add igniteui-angular` (or the `@infragistics` variant) or `npm install` — see [Package Variants](#package-variants) below.
+- A theme applied to the application (see [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md)).
+- `provideAnimations()` in `app.config.ts` — **required before using any overlay or animated component**
+- The **Ignite UI CLI MCP server** (`igniteui-cli`) is available as a tool provider
+
+> **AGENT INSTRUCTION — MCP Server Setup (REQUIRED)**
+>
+> Before using any Ignite UI CLI MCP tools, you MUST verify the MCP server is available
+> by calling `list_components`. If the tool is not available or the call fails,
+> you MUST automatically configure it by following the setup process steps described below.
+>
+> After writing the file, inform the user that the MCP server has been
+> configured and they may need to reload the editor for the tools to activate.
+> Start the MCP server and wait for that MCP server to start before continuing the component-related work.
+> Do NOT skip this step or ask the user to do it manually.
+
+## 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 code examples and NO API details.**
@@ -41,15 +64,6 @@ Base your code and explanation exclusively on what you read. If the reference fi
 
 ---
 
-## Prerequisites
-
-- Angular 20+ project
-- `@angular/cli` installed
-- `igniteui-angular` or `@infragistics/igniteui-angular` added to the project via `ng add igniteui-angular` (or the `@infragistics` variant) or `npm install` — see [Package Variants](#package-variants) below.
-- A theme applied to the application (see [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md)).
-- `provideAnimations()` in `app.config.ts` — **required before using any overlay or animated component**
-
-
 ## Package Variants
 
 | Package | Install | Who uses it |

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

@@ -15,6 +15,7 @@
 ## Overview
 
 Ignite UI for Angular Charts provides 65+ chart types for data visualization. Charts are packaged separately in `igniteui-angular-charts` (or `@infragistics/igniteui-angular-charts` for licensed users).
+This reference gives high-level guidance on when to use each chart type, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific chart component or feature you're interested in.
 
 ### Chart Component packages
 - `igniteui-angular-charts` — Category Chart, Financial Chart, Data Chart, and Pie Chart components (NPM)

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

@@ -16,6 +16,9 @@
 - [Progress Indicators](#progress-indicators)
 - [Chat (AI Chat Component)](#chat-ai-chat-component)
 
+## Overview
+This reference gives high-level guidance on when to use each data display component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in.
+
 ## List
 
 > **Docs:** [List Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/list)
@@ -133,9 +136,10 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
 
 ```html
 <!-- Image avatar with badge overlay -->
-<igx-avatar [src]="user.photo" shape="circle" size="large">
-  <igx-badge igxAvatarBadge [type]="'success'" [icon]="'check'"></igx-badge>
-</igx-avatar>
+<div class="avatar-badge-container">
+  <igx-avatar [src]="user.photo" shape="circle" size="large"></igx-avatar>
+  <igx-badge [type]="'success'" [icon]="'check'"></igx-badge>
+</div>
 
 <!-- Initials avatar -->
 <igx-avatar initials="JD" shape="circle"></igx-avatar>
@@ -147,8 +151,23 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
 <igx-badge [type]="'error'" [value]="unreadCount"></igx-badge>
 ```
 
+```scss
+// Required styles to position the badge as an overlay on the avatar
+.avatar-badge-container {
+  position: relative;
+  display: inline-flex;
+
+  igx-badge {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    transform: translate(25%, 25%);
+  }
+}
+```
+
 Avatar shapes: `'circle'`, `'rounded'`, `'square'`. Sizes: `'small'`, `'medium'`, `'large'`, or custom CSS.
-Badge types: `'default'`, `'info'`, `'success'`, `'warning'`, `'error'`.
+Badge types: `'primary'`, `'info'`, `'success'`, `'warning'`, `'error'`.
 
 ## Icon
 

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

@@ -11,6 +11,9 @@
 - [Tooltip](#tooltip)
 - [Drag and Drop](#drag-and-drop)
 
+## Overview
+This reference gives high-level guidance on when to use each directive, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific directive or feature you're interested in.
+
 ## Button & Icon Button
 
 > **Docs:** [Button Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/button)

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

@@ -13,6 +13,9 @@
 - [Banner](#banner)
 - [Key Rules](#key-rules)
 
+## Overview
+This reference gives high-level guidance on when to use each feedback and overlay component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in.
+
 ## Dialog
 
 > **Docs:** [Dialog Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dialog)