From 93297aa0bb679c9ac1e2cc0f5dd8445223548635 Mon Sep 17 00:00:00 2001 From: georgianastasov Date: Tue, 21 Apr 2026 23:32:13 +0300 Subject: [PATCH 1/5] docs(skills): add refs to the igniteui-angular-generate-from-image-design skill --- .github/AGENTS-README.md | 2 ++ .github/copilot-instructions.md | 1 + AGENTS.md | 3 ++- README.md | 1 + 4 files changed, 6 insertions(+), 1 deletion(-) diff --git a/.github/AGENTS-README.md b/.github/AGENTS-README.md index 853f03ba03a..f198b4269cd 100644 --- a/.github/AGENTS-README.md +++ b/.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: diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 888cdd7a2a7..9611fa68e8a 100644 --- a/.github/copilot-instructions.md +++ b/.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 wireframe 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) diff --git a/AGENTS.md b/AGENTS.md index c99b6b497d8..30eae7bc4e4 100644 --- a/AGENTS.md +++ b/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 / ← 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 wireframe 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 | diff --git a/README.md b/README.md index dc4ce76dbe3..0766cc7ac84 100644 --- a/README.md +++ b/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 wireframe using Ignite UI components, theming MCP tools, and image-to-layout/component mapping guidance | #### How It Works From 4f60554245f40485cf8b6365a9596d7c89e7a5e6 Mon Sep 17 00:00:00 2001 From: Georgi Anastasov <48180072+georgianastasov@users.noreply.github.com> Date: Wed, 22 Apr 2026 10:09:26 +0300 Subject: [PATCH 2/5] Update AGENTS.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- AGENTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/AGENTS.md b/AGENTS.md index 30eae7bc4e4..7a00590f79f 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -118,7 +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 wireframe with Ignite UI components | +| 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 | From c7fe8fa30b720570a98a118e8a45a0b97bd7e20e Mon Sep 17 00:00:00 2001 From: Georgi Anastasov <48180072+georgianastasov@users.noreply.github.com> Date: Wed, 22 Apr 2026 10:09:34 +0300 Subject: [PATCH 3/5] Update .github/copilot-instructions.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .github/copilot-instructions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 9611fa68e8a..a25e361e849 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -121,7 +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 wireframe with Ignite UI components and theming guidance +- [`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) From 174ff09ca3191d3e289a8a2b7ab5ca375d931450 Mon Sep 17 00:00:00 2001 From: Georgi Anastasov <48180072+georgianastasov@users.noreply.github.com> Date: Wed, 22 Apr 2026 10:09:41 +0300 Subject: [PATCH 4/5] Update README.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0766cc7ac84..6adaeeaebf0 100644 --- a/README.md +++ b/README.md @@ -49,7 +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 wireframe using Ignite UI components, theming MCP tools, and image-to-layout/component mapping guidance | +| 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 From 9869959faf04317534985173d5e612bd69acb161 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Thu, 23 Apr 2026 11:16:12 +0300 Subject: [PATCH 5/5] feat(*): updating changelog for 21.2.0 --- CHANGELOG.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 62f1182c6f4..822d34d73d9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,18 @@ All notable changes for each version of this project will be documented in this - `IgxOverlayService` - **Deprecation** - The `outlet` property in `OverlaySettings`, `IgxOverlayOutletDirective`, and `igxToggleOutlet` input on `IgxToggleActionDirective` are deprecated and will be removed in a future version. As overlay service now integrates the HTML Popover API and prefers rendering content in place / in the top layer, significantly reducing the need for outlet containers, new code should rely on the default in-place / top-layer rendering behavior instead of custom outlet containers. + +- **AI-Assisted Development - Copilot Skill: Generate from Image Design** + - Added a new `igniteui-angular-generate-from-image-design` Copilot Skill that teaches AI coding assistants/agents (e.g., GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI, etc.) how to implement Angular application views directly from design images (screenshots, mockups, wireframes). + - The skill provides a structured workflow covering image analysis, component discovery via MCP tools (`list_components`, `get_doc`), theme generation (`create_palette`, `create_theme`, `create_component_theme`), layout implementation, and visual refinement (`set_size`, `set_spacing`, `set_roundness`). + - Includes reference files: + - **Component Mapping** - Maps common UI patterns (dashboards, charts, forms, navigation, data display, gauges) to the most appropriate Ignite UI for Angular component with key properties and decision rules. + - **Gotchas** - Documents known pitfalls, component-specific constraints, and corrective patterns to help AI agents avoid common implementation mistakes. + +- **AI-Assisted Development - Copilot Skills improvements** + - `igniteui-angular-grids` skill - Added a new `sizing.md` reference covering grid and column width/height inputs, percentage and auto sizing modes, column sizing (`minWidth`, `maxWidth`, `*` star-sizing, auto-fit), and cell spacing/density control. + - `igniteui-angular-components` skill - Corrected Financial Chart (`IgxFinancialChartComponent`) documentation: updated `chartType` enum values to `Auto`, `Candle`, `Line`, `Bar`, `Column` to match the actual `FinancialChartType` API. + - `igniteui-angular-theming` skill - Minor cleanup to remove stale internal contributing reference. ## 21.1.3