Merge pull request #17213 from IgniteUI/ganastasov/update-skill-refs

docs(skills): add refs to the igniteui-angular-generate-from-image-design skill

Author: kdinev

.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 |

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
 

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