Split skill files to follow 500-line best practice with proper cross-references

Co-authored-by: zdrawku <11193764+zdrawku@users.noreply.github.com>

Author: Copilot

.github/copilot-instructions.md

@@ -118,8 +118,11 @@ Here is a link to the most recent Angular style guide https://angular.dev/style-
 
 Domain-specific skills for AI-assisted development are located in the [`skills/`](../skills/) directory. Each sub-folder contains a `SKILL.md` file that teaches agents how to work with a particular area of the library:
 
-- [`skills/igniteui-angular-components`](../skills/igniteui-angular-components/SKILL.md) — Components & Layout
-- [`skills/igniteui-angular-grids`](../skills/igniteui-angular-grids/SKILL.md) — Data Grids (structure, columns, templates, layout)
+- [`skills/igniteui-angular-components`](../skills/igniteui-angular-components/SKILL.md) — Components — Form Controls (Input Group, Combo, Select, Date/Time Pickers, Calendar, forms integration)
+- [`skills/igniteui-angular-components-layout`](../skills/igniteui-angular-components-layout/SKILL.md) — Components — Layout & Display (Tabs, Stepper, Accordion, List, Card, Dialog, Snackbar, directives)
+- [`skills/igniteui-angular-grids`](../skills/igniteui-angular-grids/SKILL.md) — Data Grids — Structure (grid type selection, column configuration, sorting, filtering, selection)
+- [`skills/igniteui-angular-grids-features`](../skills/igniteui-angular-grids-features/SKILL.md) — Data Grids — Features (editing, grouping, summaries, toolbar, export, row drag, master-detail)
+- [`skills/igniteui-angular-grids-types`](../skills/igniteui-angular-grids-types/SKILL.md) — Data Grids — Grid Types (Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid specifics)
 - [`skills/igniteui-angular-grid-data-operations`](../skills/igniteui-angular-grid-data-operations/SKILL.md) — Grid Data Operations (sorting, filtering, grouping, canonical grid import patterns)
 - [`skills/igniteui-angular-grid-paging-remote`](../skills/igniteui-angular-grid-paging-remote/SKILL.md) — Grid Paging & Remote (paging, remote data operations, virtualization, multi-grid coordination)
 - [`skills/igniteui-angular-grid-editing`](../skills/igniteui-angular-grid-editing/SKILL.md) — Grid Editing (cell editing, row editing, batch editing, validation, summaries)

README.md

@@ -46,12 +46,15 @@ This repository ships with **Copilot Skills** — structured knowledge files tha
 
 | Skill | Path | Description |
 |:------|:-----|:------------|
-| Components & Layout | [`skills/igniteui-angular-components/SKILL.md`](skills/igniteui-angular-components/SKILL.md) | Standalone components, form controls, overlays, layout |
-| Data Grids | [`skills/igniteui-angular-grids/SKILL.md`](skills/igniteui-angular-grids/SKILL.md) | Grid, Tree Grid, Hierarchical Grid, Pivot Grid |
-| Grid Data Operations | [`skills/igniteui-angular-grid-data-operations/SKILL.md`](skills/igniteui-angular-grid-data-operations/SKILL.md) | Sorting, filtering, grouping, and canonical grid import patterns |
+| Components — Form Controls | [`skills/igniteui-angular-components/SKILL.md`](skills/igniteui-angular-components/SKILL.md) | Input Group, Combo, Select, Date/Time Pickers, Calendar, forms integration |
+| Components — Layout & Display | [`skills/igniteui-angular-components-layout/SKILL.md`](skills/igniteui-angular-components-layout/SKILL.md) | Tabs, Stepper, Accordion, List, Card, Dialog, Snackbar, directives |
+| Data Grids — Structure | [`skills/igniteui-angular-grids/SKILL.md`](skills/igniteui-angular-grids/SKILL.md) | Grid type selection, column configuration, sorting, filtering, selection |
+| Data Grids — Features | [`skills/igniteui-angular-grids-features/SKILL.md`](skills/igniteui-angular-grids-features/SKILL.md) | Editing, grouping, summaries, toolbar, export, row drag, master-detail |
+| Data Grids — Grid Types | [`skills/igniteui-angular-grids-types/SKILL.md`](skills/igniteui-angular-grids-types/SKILL.md) | Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid specifics |
+| Grid Data Operations | [`skills/igniteui-angular-grid-data-operations/SKILL.md`](skills/igniteui-angular-grid-data-operations/SKILL.md) | Sorting, filtering, grouping, canonical grid import patterns |
 | Grid Paging & Remote | [`skills/igniteui-angular-grid-paging-remote/SKILL.md`](skills/igniteui-angular-grid-paging-remote/SKILL.md) | Paging, remote data operations, virtualization, multi-grid coordination |
 | Grid Editing | [`skills/igniteui-angular-grid-editing/SKILL.md`](skills/igniteui-angular-grid-editing/SKILL.md) | Cell editing, row editing, batch editing, validation, summaries |
-| Grid State | [`skills/igniteui-angular-grid-state/SKILL.md`](skills/igniteui-angular-grid-state/SKILL.md) | State persistence, Tree Grid / Hierarchical Grid / Pivot Grid / Grid Lite operations |
+| Grid State | [`skills/igniteui-angular-grid-state/SKILL.md`](skills/igniteui-angular-grid-state/SKILL.md) | State persistence, Tree / Hierarchical / Pivot Grid / Grid Lite operations |
 | Theming & Styling | [`skills/igniteui-angular-theming/SKILL.md`](skills/igniteui-angular-theming/SKILL.md) | Palettes, typography, elevations, component themes, MCP server |
 
 #### How It Works

skills/igniteui-angular-components-layout/SKILL.md

@@ -378,6 +378,6 @@ constructor() {
 
 ## Related Skills
 
-- **igniteui-angular-components** — Form controls (Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider), application setup, architecture, and multi-entry-point import patterns
-- **igniteui-angular-grids** — Data Grid, Tree Grid, Hierarchical Grid, and Pivot Grid components
-- **igniteui-angular-theming** — Theming and styling with Ignite UI design tokens and component themes
+- [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md) — Form controls (Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider), application setup, architecture, and multi-entry-point import patterns
+- [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) — Data Grid, Tree Grid, Hierarchical Grid, and Pivot Grid components
+- [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md) — Theming and styling with Ignite UI design tokens and component themes

skills/igniteui-angular-components/SKILL.md

@@ -303,6 +303,6 @@ export class MyFormComponent {
 
 ## Related Skills
 
-- **igniteui-angular-components-layout** — Layout components (Tabs, Stepper, Accordion, Splitter, Navigation Drawer), data display (List, Tree, Card), feedback/overlays (Dialog, Snackbar, Toast, Banner), and directives (Buttons, Ripple, Tooltip, Drag and Drop)
-- **igniteui-angular-grids** — Data Grid, Tree Grid, Hierarchical Grid, and Pivot Grid components
-- **igniteui-angular-theming** — Theming and styling with Ignite UI design tokens and component themes
+- [`igniteui-angular-components-layout`](../igniteui-angular-components-layout/SKILL.md) — Layout components (Tabs, Stepper, Accordion, Splitter, Navigation Drawer), data display (List, Tree, Card), feedback/overlays (Dialog, Snackbar, Toast, Banner), and directives (Buttons, Ripple, Tooltip, Drag and Drop)
+- [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) — Data Grid, Tree Grid, Hierarchical Grid, and Pivot Grid components
+- [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md) — Theming and styling with Ignite UI design tokens and component themes

skills/igniteui-angular-theming/SKILL.md

@@ -521,3 +521,10 @@ If using the licensed `@infragistics/igniteui-angular` package, set `licensed: t
 7. **Component themes use `@include tokens($theme)`** inside a selector to emit CSS custom properties
 8. **For compound components**, follow the full checklist returned by `get_component_design_tokens` — theme each child component with its scoped selector
 9. **Never hardcode colors after palette generation** — once a palette is created, every color in component themes, custom CSS, and Sass variables must use `var(--ig-<family>-<shade>)` palette tokens (e.g., `var(--ig-primary-500)`, `var(--ig-gray-200)`). Raw hex/RGB/HSL values are only acceptable in the initial `palette()` seed call. This ensures themes remain consistent, switchable (light/dark), and maintainable
+
+## Related Skills
+
+- [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md) — Form controls, application setup, architecture, and import patterns
+- [`igniteui-angular-components-layout`](../igniteui-angular-components-layout/SKILL.md) — Layout, data display, feedback/overlay components, and directives
+- [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) — Data Grid structure, column configuration, sorting, filtering, selection
+- [`igniteui-angular-grids-types`](../igniteui-angular-grids-types/SKILL.md) — Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid specifics