(feat): New skill for generating apps/views from image by dkalinovInfra · Pull Request #17181 · IgniteUI/igniteui-angular

dkalinovInfra · 2026-04-15T08:49:06Z

Add igniteui-angular-generate-from-image-design Copilot Skill

Summary

Introduces a new AI skill that enables Copilot to implement Angular application views directly from design images (screenshots, mockups, wireframes) using Ignite UI Angular components.

What's included

skills/igniteui-angular-from-design/SKILL.md — The main skill definition with a step-by-step workflow: analyze design → detect platform → discover components via MCP → generate theme →
implement → iterate on visual fidelity.
skills/.../references/component-mapping.md — Reference table mapping common UI patterns (charts, maps, gauges, navigation, data display) to their corresponding Ignite UI components,
including package requirements and import patterns.
skills/.../references/gotchas.md — Documented pitfalls and workarounds for Sass conflicts, chart/component property mismatches, DV theming limitations, map dark styling, and dark theme
setup.

How it works

When a user provides a design image and asks Copilot to "implement this design" or "build this UI", the skill guides the agent through:

Analyzing the image for layout, components, colors, and data patterns
Using MCP servers (igniteui, igniteui-theming, angular-cli) for component discovery and theme generation
Building the Angular view with proper standalone components, signals, and OnPush change detection
Iterating on visual fidelity by comparing output against the original design

Notes

No existing files are modified — this is a purely additive change.
No production code, tests, or build configuration is affected.

Copilot

Pull request overview

Adds a new Copilot skill intended to guide implementing Angular views directly from design images using Ignite UI Angular components, plus reference material for common mappings and pitfalls.

Changes:

Added igniteui-angular-from-design skill definition and workflow for image-to-view implementation.
Added component mapping reference for common UI patterns → Ignite UI components/packages.
Added “gotchas” reference covering theming/Sass pitfalls and DV component caveats.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 16 comments.

File	Description
skills/igniteui-angular-from-design/SKILL.md	New skill workflow and MCP-driven process for implementing views from design images.
skills/igniteui-angular-from-design/references/component-mapping.md	Reference tables mapping UI patterns to Ignite UI components, packages, and import patterns.
skills/igniteui-angular-from-design/references/gotchas.md	Reference list of known pitfalls for Sass/theming and DV component usage.

…UI/igniteui-angular into feat/app-from-image-skill

kdinev · 2026-04-21T11:44:29Z

Related to IgniteUI/igniteui-cli#1647

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…gotchas.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…component-mapping.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.

Copilot · 2026-04-21T13:16:23Z

+2. **Confirm package layout if needed** - this skill is Angular-only; check package layout or licensing only when imports, packages, or theming depend on it
+3. **Discover components** - Call `list_components` with targeted filters to find matching components for each UI pattern
+4. **Look up component docs** - Call `get_doc` for every chosen component family before coding
+5. **Generate theme** - (a) To generate a theme, first extract colors and create a color palette using `create_palette` or `create_custom_palette` depending on the scenario. Then extract elevations and call `create_elevations`. Then extract typography and call `create_typography`. Then call `create_theme` with the palette, elevations, and typography. (b) After a theme exists, prefer using design tokens or scoped semantic CSS variables over raw literals. (c) For every Ignite UI component, call `get_component_design_tokens`, map extracted image tokens to token roles, then call `create_component_theme` with the tokens differing from the global theme for the specific component.


The Workflow step 5 references create_elevations and create_typography, but those tools don’t appear anywhere else in this repo (and the theming skill documents create_theme as the tool that generates palette/typography/elevations together). Update this step to match the actual Ignite UI theming MCP toolchain, otherwise agents following this skill will call non-existent tools.

Suggested change

5. **Generate theme** - (a) To generate a theme, first extract colors and create a color palette using `create_palette` or `create_custom_palette` depending on the scenario. Then extract elevations and call `create_elevations`. Then extract typography and call `create_typography`. Then call `create_theme` with the palette, elevations, and typography. (b) After a theme exists, prefer using design tokens or scoped semantic CSS variables over raw literals. (c) For every Ignite UI component, call `get_component_design_tokens`, map extracted image tokens to token roles, then call `create_component_theme` with the tokens differing from the global theme for the specific component.

5. **Generate theme** - (a) Extract the design's colors, typography, and elevation intent from the image. Create a color palette using `create_palette` or `create_custom_palette` when needed, then call `create_theme` using the extracted design inputs and palette so the global Ignite UI theme is generated with palette, typography, and elevations together. (b) After a theme exists, prefer using design tokens or scoped semantic CSS variables over raw literals. (c) For every Ignite UI component, call `get_component_design_tokens`, map extracted image tokens to token roles, then call `create_component_theme` with the tokens differing from the global theme for the specific component.

Copilot · 2026-04-21T13:16:24Z


 ### Chart Type Selection
 - **Category Chart**: `chartType` property (Auto, Area, Column, Line, Point, etc.)
- **Financial Chart**: `chartType` property (Line, Candlestick, OHLC Bar)
+- **Financial Chart**: `chartType` property (Auto, Candle, Line, Bar, Column)
 - **Data Chart**: Configure explicit series (IgxAreaSeriesComponent, IgxBarSeriesComponent, IgxBarSeries, etc.)


PR description states “No existing files are modified”, but this PR updates the existing charts reference file under skills/igniteui-angular-components/. Please update the PR description (or move this change into a separate PR) so the description matches what’s actually being changed.

Copilot · 2026-04-21T13:16:25Z

+[brushes]="'<resolved-series-brush>'"
+[outlines]="'<resolved-series-outline>'"


In the DV theming example, [brushes] / [outlines] are shown as binding to a single string (wrapped in quotes), but elsewhere in this repo they’re documented as string[] inputs (skills/igniteui-angular-components/references/charts.md:246-247). Update the example to bind an array/collection (e.g., a 1+ element array) so it matches the actual API shape and doesn’t mislead readers into passing a string.

Suggested change

[brushes]="'<resolved-series-brush>'"

[outlines]="'<resolved-series-outline>'"

[brushes]="['<resolved-series-brush>']"

[outlines]="['<resolved-series-outline>']"

Copilot · 2026-04-21T13:16:25Z

+| Tabbed content | `IgxBottomNavComponent` or `IgxTabsComponent` | Panel-based or router-based |
+| Accordion sections | `IgxAccordionComponent` | `IgxExpansionPanelComponent` children |
+| Split layouts | `IgxSplitterComponent` | Horizontal/vertical panes |
+| Tile dashboard | `IgxTileManagerComponent` | Drag/resize tiles (Premium) |


The “Tile dashboard” row references IgxTileManagerComponent, but this repo’s established guidance treats Tile Manager as the igc-tile-manager web component shipped via igniteui-webcomponents (see skills/igniteui-angular-components/references/layout-manager.md:417+). To avoid misleading imports/component choices, update this mapping row to match the existing Tile Manager guidance (web component + package), or remove it if out of scope for this skill.

Suggested change

| Tile dashboard | `IgxTileManagerComponent` | Drag/resize tiles (Premium) |

| Tile dashboard | `igc-tile-manager` | Drag/resize tiles via the `igniteui-webcomponents` web component (Premium) |

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

(feat): New skill for generating apps/views from image

5efeacd

dkalinovInfra requested review from Copilot, georgianastasov, kdinev and simeonoff April 15, 2026 08:49

Copilot started reviewing on behalf of dkalinovInfra April 15, 2026 08:49 View session

Copilot AI reviewed Apr 15, 2026

View reviewed changes

kdinev added 2 commits April 16, 2026 11:04

Merge branch 'master' into feat/app-from-image-skill

8baaa90

Merge branch 'master' into feat/app-from-image-skill

d6d3f64

simeonoff reviewed Apr 16, 2026

View reviewed changes

georgianastasov and others added 3 commits April 20, 2026 11:16

Merge branch 'master' into feat/app-from-image-skill

1be560f

feat(skills): improve image-to-app generation skill

aa08763

feat(*): updating the image skill

f2c4c1c

georgianastasov removed their request for review April 21, 2026 10:47

georgianastasov self-assigned this Apr 21, 2026

georgianastasov and others added 6 commits April 21, 2026 13:47

feat(skill): fix description formatting in SKILL.md

06b8a98

feat(*): updating with set_size, set_spacing, set_roundness

0035f12

Merge branch 'feat/app-from-image-skill' of https://github.com/Ignite…

fcede66

…UI/igniteui-angular into feat/app-from-image-skill

Merge branch 'master' into feat/app-from-image-skill

5b789de

chore(*): updating financial chart skills

137b788

Merge branch 'feat/app-from-image-skill' of https://github.com/Ignite…

9b4304d

…UI/igniteui-angular into feat/app-from-image-skill

docs(skill): address simeonoff's review comments

8d2b9ad

georgianastasov requested a review from Copilot April 21, 2026 11:59

Copilot started reviewing on behalf of georgianastasov April 21, 2026 12:00 View session

Copilot AI reviewed Apr 21, 2026

View reviewed changes

georgianastasov and others added 3 commits April 21, 2026 15:05

Update skills/igniteui-angular-generate-from-image-design/SKILL.md

09f441d

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update skills/igniteui-angular-generate-from-image-design/references/…

1ceca02

…gotchas.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update skills/igniteui-angular-generate-from-image-design/references/…

cce0521

…component-mapping.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

kdinev requested a review from Copilot April 21, 2026 13:10

Copilot started reviewing on behalf of kdinev April 21, 2026 13:11 View session

Copilot AI reviewed Apr 21, 2026

View reviewed changes

Update skills/igniteui-angular-generate-from-image-design/SKILL.md

1f72b1f

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

kdinev approved these changes Apr 21, 2026

View reviewed changes

kdinev merged commit 1f0264e into master Apr 21, 2026
6 checks passed

kdinev deleted the feat/app-from-image-skill branch April 21, 2026 13:41

georgianastasov mentioned this pull request Apr 23, 2026

docs(skills): Replace ng-deep with tokens in generate-from-image-design skill #17228

Open

23 tasks

		[brushes]="'<resolved-series-brush>'"
		[outlines]="'<resolved-series-outline>'"

	\| Tile dashboard \| `IgxTileManagerComponent` \| Drag/resize tiles (Premium) \|
	\| Tile dashboard \| `igc-tile-manager` \| Drag/resize tiles via the `igniteui-webcomponents` web component (Premium) \|

Conversation

dkalinovInfra commented Apr 15, 2026 • edited by georgianastasov Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kdinev commented Apr 21, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

dkalinovInfra commented Apr 15, 2026 •

edited by georgianastasov

Loading