Add Skills by zdrawku · Pull Request #16942 · IgniteUI/igniteui-angular

zdrawku · 2026-02-20T12:33:31Z

Add Ignite UI for Angular skills: Components, Grids (structure), Grids (Data Operations) and Theming

Components
Introduced a comprehensive skill for Ignite UI for Angular Data Grids, covering grid types, configuration, sorting, filtering, selection, editing, and advanced features.
Added a skill for theming Ignite UI for Angular applications, detailing the theming architecture, pre-built themes, custom Sass themes, component-level theming, and usage of the Theming MCP server.
Updated the copilot-instructions.md to include detailed descriptions for the new Grid Data Operations skill.
Added a new skill file igniteui-angular-grid-data-operations/SKILL.md covering data manipulation patterns including sorting, filtering, grouping, paging, and remote data operations.
Revised the existing igniteui-angular-grids/SKILL.md to reference the new Grid Data Operations skill and clarify the focus of each skill.
Enhance Ignite UI Angular Grids documentation with detailed grid selection guide, feature comparisons, and improved examples for Tree Grid and Hierarchical Grid. Introduce Grid Lite specifics and clarify Pivot Grid functionality. Update key rules for grid usage and data operations.

Note:

Other skills that may follow:
- Skill: Performance Optimization - Virtual scrolling configuration, change detection strategies with Ignite UI components, OnPush compatibility, lazy loading component modules, and row/column virtualization tuning. Enterprise apps hit performance walls quickly and agents tend to generate naive implementations without this guidance.
- Skill: Form Integration & Validation - How Ignite UI components integrate with Angular Reactive Forms and Template-driven Forms — things like using IgxInput inside FormGroups, custom validators with Ignite UI form controls, masked inputs, combo/select binding to form state. This is one of the highest-frequency pain points for Angular developers day-to-day
- Skill: Data Visualization & Charts - You already identified this one. Ignite UI has a rich charting library (category charts, financial charts, geographic maps) with complex configuration around data binding, series types, axes, and animations. Agents frequently get chart configuration wrong without guidance, making this high value.

skills/igniteui-angular-theming/SKILL.md

…d theming

…into add-user-skills

…opment

…e and avoid hardcoded colors

- Updated the `copilot-instructions.md` to include detailed descriptions for the new Grid Data Operations skill. - Added a new skill file `igniteui-angular-grid-data-operations/SKILL.md` covering data manipulation patterns including sorting, filtering, grouping, paging, and remote data operations. - Revised the existing `igniteui-angular-grids/SKILL.md` to reference the new Grid Data Operations skill and clarify the focus of each skill.

…ction guide, feature comparisons, and improved examples for Tree Grid and Hierarchical Grid. Introduce Grid Lite specifics and clarify Pivot Grid functionality. Update key rules for grid usage and data operations.

gedinakova · 2026-02-23T12:32:24Z

@zdrawku The licensed packages should also be mentioned so agents know that this guidance applies to both.

Steps to reproduce:

Open an app with our licensed package
Using Sonnet 4.5, make it create an app with our components (e.g. car rental app)
After creating the forms, imports are missing
[ERROR] NG8001: 'igx-column' is not a known element:
If 'igx-column' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
If 'igx-column' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message. [plugin angular-compiler]
Prompt it to fix the errors

Result: All components are imported from '@infragistics/igniteui-angular' instead of each entry point.

Expected result: Imports for both types of packages should be from the specific entry points.

…I Angular components and theming

zdrawku · 2026-02-23T13:37:51Z

@zdrawku The licensed packages should also be mentioned so agents know that this guidance applies to both.

Steps to reproduce:

Open an app with our licensed package

Using Sonnet 4.5, make it create an app with our components (e.g. car rental app)

After creating the forms, imports are missing
[ERROR] NG8001: 'igx-column' is not a known element:

If 'igx-column' is an Angular component, then verify that it is included in the '@Component.imports' of this component.

If 'igx-column' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message. [plugin angular-compiler]

Prompt it to fix the errors

Result: All components are imported from '@infragistics/igniteui-angular' instead of each entry point.

Expected result: Imports for both types of packages should be from the specific entry points.

thanks @gedinakova, I have addressed your comment

gedinakova · 2026-02-23T13:43:38Z

@zdrawku In an application with a non-editable grid, I prompt it to make it editable (I want to be able to edit available cars (data) through the grid itself). The result was that it read through igniteui-angular-components skill again instead of igniteui-angular-grid-data-operations skill.

igdmdimitrov · 2026-02-23T13:45:57Z

@zdrawku, maybe some additional instructions are needed for providers:

New app created with Ignite UI CLI - Base with home page

Copied copilot-instructions.md and skills folder

Prompt: Create an IgxDialog with a form inside
Result: provideAnimations was not imported in app.config.ts leading to an error.

…ify component styling

zdrawku · 2026-02-23T15:13:50Z

@zdrawku In an application with a non-editable grid, I prompt it to make it editable (I want to be able to edit available cars (data) through the grid itself). The result was that it read through igniteui-angular-components skill again instead of igniteui-angular-grid-data-operations skill.

Addressed, It was missing the editing capabilities from the description:

description: Cell editing, row editing, batch editing, sorting, filtering, grouping, paging, remote data, and virtualization patterns for Ignite UI Angular grids

…viders for Ignite UI Angular components

zdrawku · 2026-02-23T15:20:35Z

@zdrawku, maybe some additional instructions are needed for providers:

New app created with Ignite UI CLI - Base with home page

Copied copilot-instructions.md and skills folder

Prompt: Create an IgxDialog with a form inside Result: provideAnimations was not imported in app.config.ts leading to an error.

Addressed, the skill was missing application setup instructions and required providers for animated components like overlay, combo, data pciker and so on.

…omponents and theming topics

zdrawku · 2026-02-23T16:17:58Z

@damyanpetev, lets approve and merge this PR, and continue with the testing/comments resolution on a new PR. This will help us get going with the docfx PR that provides a walkthrough for how SKILLs can be used:
https://github.com/IgniteUI/igniteui-docfx/pull/6377/changes

README.md

skills/igniteui-angular-components/SKILL.md

damyanpetev · 2026-02-23T17:55:04Z

skills/igniteui-angular-components/SKILL.md

+Key inputs: `[data]`, `[valueKey]`, `[displayKey]`, `[groupKey]`, `[placeholder]`, `[allowCustomValues]`, `[filterFunction]`, `[itemsMaxHeight]`, `[type]`.
+
+Events: `(opening)`, `(opened)`, `(closing)`, `(closed)`, `(selectionChanging)`, `(addition)`, `(searchInputUpdate)`.


Bit much on the combo API listing.. and the combo alone lol. Honestly, the model two-way is probably more than enough for 80-90% of uses anyway.

skills/igniteui-angular-components/SKILL.md

skills/igniteui-angular-grid-data-operations/SKILL.md

damyanpetev · 2026-02-23T18:33:46Z

skills/igniteui-angular-grid-data-operations/SKILL.md

+onSortingDone(event: ISortingEventArgs) {
+  console.log('Sorted by:', event.fieldName, event.dir);
+  // Good place to trigger remote data fetch
+}


Nah, sortingExpressionsChange is quite good for that and that's what the doc samples use, but sure. Arguably, the only sorting event worth mentioning.

skills/igniteui-angular-grid-data-operations/SKILL.md

… removing outdated guidelines and emphasizing the use of igxRipple for feedback

…i-angular into add-user-skills

damyanpetev

Plenty of things to improve, but I agree this can go in now and continue testing after

zdrawku added 2 commits February 20, 2026 14:32

feat(*): Add Ignite UI for Angular skills: Data Grids and Theming

23cba1f

Add MCP theming configuration

2766f85

damyanpetev reviewed Feb 20, 2026

View reviewed changes

skills/igniteui-angular-theming/SKILL.md Show resolved Hide resolved

zdrawku and others added 4 commits February 20, 2026 15:39

feat(skills): Add metadata for Ignite UI Angular skills components an…

1d1ba80

…d theming

Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular …

1116bf1

…into add-user-skills

Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular …

ad269c8

…into add-user-skills

docs(skills): Theming skill MCP server instructions

776ccc2

damyanpetev force-pushed the add-user-skills branch from 939b895 to 776ccc2 Compare February 20, 2026 15:05

zdrawku added 4 commits February 22, 2026 17:45

feat(copilot): Add Copilot Skills documentation for AI-assisted devel…

7748995

…opment

docs(skills): Update theming guidelines to enforce palette token usag…

282f33b

…e and avoid hardcoded colors

gedinakova assigned gedinakova and igdmdimitrov Feb 23, 2026

gedinakova added 💥 status: in-test PRs currently being tested version: 21.1.x labels Feb 23, 2026

docs(skills): Update prerequisites and import guidelines for Ignite U…

c6143a6

…I Angular components and theming

docs(theming): Update description for Ignite UI theming skill to clar…

d5b0b6f

…ify component styling

docs(skills): Enhance application setup instructions and required pro…

3070ded

…viders for Ignite UI Angular components

docs(skills): Add documentation links for various Ignite UI Angular c…

ed9ce1a

…omponents and theming topics

docs(skills): fix grid data op md

759afee

zdrawku removed the 💥 status: in-test PRs currently being tested label Feb 23, 2026

damyanpetev reviewed Feb 23, 2026

View reviewed changes

damyanpetev and others added 4 commits February 23, 2026 20:52

Apply suggestions from code review

f48a6b3

Apply suggestion from @damyanpetev

23a0c07

docs(skills): Update best practices for Ignite UI Angular components,…

425ec8b

… removing outdated guidelines and emphasizing the use of igxRipple for feedback

Merge branch 'add-user-skills' of https://github.com/IgniteUI/igniteu…

788b3dd

…i-angular into add-user-skills

damyanpetev approved these changes Feb 23, 2026

View reviewed changes

damyanpetev merged commit 25d9e2e into master Feb 23, 2026
5 checks passed

damyanpetev deleted the add-user-skills branch February 23, 2026 19:05

		Key inputs: `[data]`, `[valueKey]`, `[displayKey]`, `[groupKey]`, `[placeholder]`, `[allowCustomValues]`, `[filterFunction]`, `[itemsMaxHeight]`, `[type]`.

		Events: `(opening)`, `(opened)`, `(closing)`, `(closed)`, `(selectionChanging)`, `(addition)`, `(searchInputUpdate)`.

Comments

Conversation

zdrawku commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

gedinakova commented Feb 23, 2026

Uh oh!

zdrawku commented Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gedinakova commented Feb 23, 2026

Uh oh!

igdmdimitrov commented Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zdrawku commented Feb 23, 2026

Uh oh!

zdrawku commented Feb 23, 2026

Uh oh!

zdrawku commented Feb 23, 2026

Uh oh!

Uh oh!

Uh oh!

damyanpetev Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

damyanpetev Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

damyanpetev left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

zdrawku commented Feb 20, 2026 •

edited

Loading

zdrawku commented Feb 23, 2026 •

edited

Loading

igdmdimitrov commented Feb 23, 2026 •

edited

Loading