igniteui-webcomponents 7.0.0-rc.0 → 7.0.0

package/CHANGELOG.md

@@ -4,8 +4,32 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
-## [Unreleased]
+## [7.0.0] - 2026-02-25
 ### Added
+- #### AI-Assisted Development - Copilot Skills
+  - Four end-user skills are now shipped with the package under the `skills/` directory. They provide step-by-step guidance to GitHub Copilot and other LLM agents for common tasks:
+    - **igniteui-wc-choose-components** - Identify the right component for a given UI pattern.
+    - **igniteui-wc-integrate-with-framework** - Set up and use components in React, Angular, Vue, or vanilla JS.
+    - **igniteui-wc-customize-component-theme** - Apply custom styles via CSS custom properties, parts, and the theming system.
+    - **igniteui-wc-optimize-bundle-size** - Reduce production bundle size through selective imports and lazy loading.
+
+  To enable the skills in your project, copy the skill folders into your repository's `.github/skills/` directory so Copilot can automatically discover them:
+
+  **Unix/macOS:**
+  ```sh
+  cp -r node_modules/igniteui-webcomponents/skills/* .github/skills/
+  ```
+
+  **Windows (PowerShell):**
+  ```powershell
+  Copy-Item -Recurse node_modules\igniteui-webcomponents\skills\* .github\skills\
+  ```
+
+  **Windows (Command Prompt):**
+  ```cmd
+  xcopy /E /I node_modules\igniteui-webcomponents\skills .github\skills
+  ```
+  Copilot supports project skills stored in `.github/skills` or `.claude/skills` in your repository, and personal skills stored in `~/.copilot/skills` or `~/.claude/skills` (shared across projects; Copilot coding agent and GitHub Copilot CLI only).
 - #### Chat
   - **adoptRootStyles** can now be toggled on/off at runtime. [#2093](https://github.com/IgniteUI/igniteui-webcomponents/pull/2093)
 
@@ -15,6 +39,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - #### Themes - **Breaking change**
   - Changed global prefixes for CSS custom properties for component themes to align with other Ignite UI component libraries.
 
+### Removed
+- #### Chat
+  - Removed the **typingIndicator** template renderer. Users can use the **typing-indicator** slot instead.
+- #### Tooltip
+  - Removed the **disableArrow** deprecated property.
+
 ### Fixed
 - #### Carousel
   - Context instantiation in Blazor. [#2033](https://github.com/IgniteUI/igniteui-webcomponents/pull/2033)
@@ -23,12 +53,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - #### Textarea
   - Correct cursor style over non input parts. [#2085](https://github.com/IgniteUI/igniteui-webcomponents/pull/2085)
 
-### Removed
-- #### Chat
-  - Removed the **typingIndicator** template renderer. Users can use the **typing-indicator** slot instead.
-- #### Tooltip
-  - Removed the **disableArrow** deprecated property.
-
 ## [6.5.1] - 2026-02-04
 ### Fixed
 - #### Calendar
@@ -1240,6 +1264,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[7.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.5.1...7.0.0
 [6.5.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.5.0...6.5.1
 [6.5.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.4.0...6.5.0
 [6.4.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.3.6...6.4.0

package/README.md

@@ -62,7 +62,6 @@ See the [Storybook Here](https://igniteui.github.io/igniteui-webcomponents)
 | Calendar                |   ✅   |     [Docs][Calendar Docs]      |     [1.0.0]      | [MIT](LICENSE) |
 | Card                    |   ✅   |       [Docs][Card Docs]        |     [1.0.0]      | [MIT](LICENSE) |
 | Checkbox                |   ✅   |     [Docs][Checkbox Docs]      |     [1.0.0]      | [MIT](LICENSE) |
-| Form                    |   ✅   |       [Docs][Form Docs]        |     [1.0.0]      | [MIT](LICENSE) |
 | Icon                    |   ✅   |       [Docs][Icon Docs]        |     [1.0.0]      | [MIT](LICENSE) |
 | Icon Button             |   ✅   |    [Docs][Icon Button Docs]    |     [1.0.0]      | [MIT](LICENSE) |
 | Input                   |   ✅   |       [Docs][Input Docs]       |     [1.0.0]      | [MIT](LICENSE) |
@@ -212,7 +211,7 @@ npm run storybook:build
 [safari_48x48]: https://user-images.githubusercontent.com/2188411/168109527-6c58f2cf-7386-4b97-98b1-cfe0ab4e8626.png
 [Contribution Guidelines]: https://github.com/IgniteUI/igniteui-webcomponents/blob/master/.github/CONTRIBUTING.md
 [Data Grid]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/data-grid
-[Hierarchical Grid]: https://www.infragistics.com/webcomponentssite/components/grids/hierarchical-grid/overview
+[Hierarchical Grid]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/hierarchical-grid/overview
 [Charts]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/chart-overview
 [Dock Manager]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/dock-manager
 [Pivot Grid Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/pivot-grid/overview
@@ -228,7 +227,6 @@ npm run storybook:build
 [Input Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input
 [Icon Button Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/icon-button
 [Icon Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/icon
-[Form Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/form
 [Checkbox Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/checkbox
 [Card Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/card
 [Calendar Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/calendar
@@ -242,7 +240,7 @@ npm run storybook:build
 [Chip Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/chip
 [Circular Progress Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/circular-progress
 [Linear Progress Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/linear-progress
-[Dropdown Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/toast
+[Dropdown Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/dropdown
 [Tree Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/tree
 [Expansion Panel Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/expansion-panel
 [Masked Input Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input
@@ -266,7 +264,7 @@ npm run storybook:build
 [Chat Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/interactivity/chat
 [Commercial License]: https://www.infragistics.com/legal/license
 [Grid Lite]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grid-lite/overview
-[Ignite UI Web Components Grid Lite]: https://www.npmjs.com/package/igniteui-webcomponents-grid-lite
+[Ignite UI Web Components Grid Lite]: https://www.npmjs.com/package/igniteui-grid-lite
 [1.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0
 [2.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.0.0
 [2.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-webcomponents",
-  "version": "7.0.0-rc.0",
+  "version": "7.0.0",
   "description": "Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.",
   "author": "Infragistics",
   "license": "MIT",

package/skills/README.md

@@ -0,0 +1,65 @@
+# LLM Agent Skills for End Users
+
+This directory contains skills for GitHub Copilot and other LLM agents to help developers use Ignite UI Web Components effectively in their applications.
+
+## What are Skills?
+
+Skills are structured instructions that help AI agents understand and execute common tasks consistently. Each skill is a self-contained guide that provides step-by-step instructions, code examples, and best practices.
+
+## Available Skills
+
+| Skill                                                       | Description                                                                        | Use When                              |
+| ----------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------- |
+| [igniteui-wc-choose-components](./igniteui-wc-choose-components/SKILL.md)                   | Identify the right components for a UI pattern and navigate to official docs/demos | Deciding which components to use      |
+| [igniteui-wc-integrate-with-framework](./igniteui-wc-integrate-with-framework/SKILL.md)     | Integrate components into React, Angular, Vue, or vanilla JS applications          | Setting up components in your project |
+| [igniteui-wc-customize-component-theme](./igniteui-wc-customize-component-theme/SKILL.md)   | Customize styling using CSS custom properties, parts, and theming system           | Applying custom brand colors/styles   |
+| [igniteui-wc-optimize-bundle-size](./igniteui-wc-optimize-bundle-size/SKILL.md)             | Reduce bundle size by importing only needed components and lazy loading            | Optimizing production performance     |
+
+## How to Use
+
+When working with an AI agent like GitHub Copilot, reference skills by name or ask questions naturally:
+
+### Natural Questions
+- "How do I integrate igniteui-webcomponents with React?"
+- "Help me customize the button colors to match my brand"
+- "My bundle size is too large, how can I reduce it?"
+- "Show me how to use these components in Vue"
+
+### Direct Skill Reference
+- "Follow the integrate-with-framework skill for my Angular app"
+- "Use the customize-component-theme skill to help me style components"
+- "Apply the optimize-bundle-size skill to reduce my bundle"
+
+## Skill Structure
+
+Each skill contains:
+
+- **Example Usage**: Common questions or scenarios
+- **When to Use**: Situations where the skill applies
+- **Related Skills**: Other relevant skills to explore
+- **Step-by-Step Instructions**: Detailed guidance with code examples
+- **Framework-Specific Examples**: React, Angular, Vue, and vanilla JS patterns
+- **Common Issues & Solutions**: Troubleshooting guidance
+- **Best Practices**: Recommended approaches
+- **Additional Resources**: Further reading and documentation
+
+## Contributing
+
+If you identify gaps in the skills or have suggestions for improvements:
+
+1. [Open an issue](https://github.com/IgniteUI/igniteui-webcomponents/issues) describing the improvement
+2. Submit a pull request with the proposed changes
+3. Follow the skill format and structure of existing skills
+
+For skills related to **contributing to the library itself** (creating components, reviewing PRs, etc.), see [`.github/skills/`](../.github/skills/).
+
+## Additional Resources
+
+- [Component Documentation](https://igniteui.github.io/igniteui-webcomponents)
+- [Project README](../README.md)
+- [Code Examples & Storybook](https://igniteui.github.io/igniteui-webcomponents)
+- [GitHub Repository](https://github.com/IgniteUI/igniteui-webcomponents)
+
+## License
+
+These skills are provided under the same license as the Ignite UI Web Components library. See [LICENSE](../LICENSE) for details.

package/skills/igniteui-wc-choose-components/SKILL.md

@@ -0,0 +1,358 @@
+---
+name: igniteui-wc-choose-components
+description: Identify and select the right Ignite UI Web Components for your app UI, then navigate to official docs, usage examples, and API references
+user-invokable: true
+---
+
+# Choose the Right Ignite UI Components
+
+This skill helps AI agents and developers identify the best Ignite UI components for any UI requirement, then provides direct links to official documentation, usage examples, and API references.
+
+## Example Usage
+
+- "What component should I use to display a list of items with actions?"
+- "I need a date picker for a booking form"
+- "How do I show file upload progress?"
+- "What's the best component for a navigation sidebar?"
+- "I need a searchable dropdown with multi-select"
+- "Build a dashboard layout with cards and a data grid"
+- "I want to display hierarchical/tree data"
+- "Show me components for notifications and alerts"
+
+## Related Skills
+
+- [igniteui-wc-integrate-with-framework](../igniteui-wc-integrate-with-framework/SKILL.md) — Set up chosen components in React, Angular, Vue, or vanilla JS
+- [igniteui-wc-customize-component-theme](../igniteui-wc-customize-component-theme/SKILL.md) — Style and theme the components you select
+- [igniteui-wc-optimize-bundle-size](../igniteui-wc-optimize-bundle-size/SKILL.md) — Import only the components you actually use
+
+## When to Use
+
+- Agent or user needs to decide which component fits a UI requirement
+- User describes a UI pattern and needs a matching component name
+- User wants to explore what components are available
+- User needs links to official docs or live examples for a specific component
+- Starting a new feature and mapping requirements to components
+- Reworking existing UI with new or different component requirements
+
+---
+
+## Available Packages
+
+Ignite UI for Web Components is distributed across several packages depending on your needs:
+
+| Package | License | Install | Best For |
+|---|---|---|---|
+| [`igniteui-webcomponents`](https://www.npmjs.com/package/igniteui-webcomponents) | MIT | `npm install igniteui-webcomponents` | General UI components (inputs, layouts, notifications, scheduling) |
+| [`igniteui-webcomponents-grids`](https://www.npmjs.com/package/igniteui-webcomponents-grids) | Commercial | `npm install igniteui-webcomponents-grids` (trial) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) with many built-in functionalities  |
+| [`igniteui-grid-lite`](https://www.npmjs.com/package/igniteui-grid-lite) | MIT | `npm install igniteui-grid-lite` | Lightweight data grid for simpler tabular data |
+| [`igniteui-dockmanager`](https://www.npmjs.com/package/igniteui-dockmanager) | Commercial | `npm install igniteui-dockmanager` (trial) | Windowing / docking layouts (IDE-style panels) |
+
+---
+
+## Component Catalogue by UI Pattern
+
+Use the table below to map a UI need to the right component, then follow the documentation link.
+
+### Inputs & Forms
+
+All inputs are form-associated and integrate natively with `<form>`.
+
+| UI Need | Component | Tag | Docs |
+|---|---|---|---|
+| Text field / text input | Input | `<igc-input>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input) |
+| Multi-line text | Textarea | `<igc-textarea>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/text-area) |
+| Checkbox | Checkbox | `<igc-checkbox>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/checkbox) |
+| On/off toggle | Switch | `<igc-switch>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/switch) |
+| Single choice from a list | Radio / Radio Group | `<igc-radio>` / `<igc-radio-group>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/radio) |
+| Star / score rating | Rating | `<igc-rating>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/rating) |
+| Formatted / masked text input | Mask Input | `<igc-mask-input>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input) |
+| Date and time input | Date Time Input | `<igc-date-time-input>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/date-time-input) |
+| File upload | File Input | `<igc-file-input>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/file-input) |
+| Simple dropdown / select | Select | `<igc-select>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/select) |
+| Searchable dropdown, single or multi-select | Combo | `<igc-combo>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/combo/overview) |
+| Grouped toggle buttons | Button Group | `<igc-button-group>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/button-group) |
+| Range / numeric slider | Slider | `<igc-slider>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/slider) |
+| Range slider (two handles) | Range Slider | `<igc-range-slider>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/slider) |
+
+### Buttons & Actions
+
+| UI Need | Component | Tag | Docs |
+|---|---|---|---|
+| Standard clickable button | Button | `<igc-button>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/button) |
+| Icon-only button | Icon Button | `<igc-icon-button>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/icon-button) |
+| Click ripple effect | Ripple | `<igc-ripple>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/ripple) |
+| Removable tag / filter chip | Chip | `<igc-chip>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/chip) |
+
+### Scheduling & Date Pickers
+
+| UI Need | Component | Tag | Docs |
+|---|---|---|---|
+| Full calendar view | Calendar | `<igc-calendar>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/calendar) |
+| Date picker (popup calendar) | Date Picker | `<igc-datepicker>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/date-picker) |
+| Date range selection | Date Range Picker | `<igc-date-range-picker>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/date-range-picker) |
+
+### Notifications & Feedback
+
+| UI Need | Component | Tag | Docs |
+|---|---|---|---|
+| Brief auto-dismiss notification | Toast | `<igc-toast>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/toast) |
+| Actionable dismissible notification bar | Snackbar | `<igc-snackbar>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/snackbar) |
+| Persistent status banner (e.g. warning, error) | Banner | `<igc-banner>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/banner) |
+| Modal confirmation or content dialog | Dialog | `<igc-dialog>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/dialog) |
+| Tooltip on hover | Tooltip | `<igc-tooltip>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/tooltip) |
+| Small count / status indicator | Badge | `<igc-badge>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/badge) |
+
+### Progress Indicators
+
+| UI Need | Component | Tag | Docs |
+|---|---|---|---|
+| Horizontal progress bar | Linear Progress | `<igc-linear-progress>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/linear-progress) |
+| Circular / spinner progress | Circular Progress | `<igc-circular-progress>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/circular-progress) |
+
+### Layouts & Containers
+
+| UI Need | Component | Tag | Docs |
+|---|---|---|---|
+| Generic content card | Card | `<igc-card>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/card) |
+| User avatar / profile image | Avatar | `<igc-avatar>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/avatar) |
+| Icon display | Icon | `<igc-icon>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/icon) |
+| Horizontal or vertical divider line | Divider | `<igc-divider>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/divider) |
+| Collapsible section | Expansion Panel | `<igc-expansion-panel>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/expansion-panel) |
+| Multiple collapsible sections (accordion) | Accordion | `<igc-accordion>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/accordion) |
+| Tabbed content panels | Tabs | `<igc-tabs>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tabs) |
+| Image / content slideshow | Carousel | `<igc-carousel>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/carousel) |
+| Multi-step wizard / onboarding flow | Stepper | `<igc-stepper>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/stepper) |
+| Resizable, draggable dashboard tiles | Tile Manager | `<igc-tile-manager>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tile-manager) |
+| IDE-style docking / floating panels | Dock Manager | `<igc-dockmanager>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/dock-manager) |
+
+### Navigation
+
+| UI Need | Component | Tag | Docs |
+|---|---|---|---|
+| Top application bar / toolbar | Navbar | `<igc-navbar>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/menus/navbar) |
+| Side navigation drawer | Navigation Drawer | `<igc-nav-drawer>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/menus/navigation-drawer) |
+| Context menu / actions dropdown | Drop Down | `<igc-dropdown>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/dropdown) |
+
+### Lists & Data Display
+
+| UI Need | Component | Tag | Docs |
+|---|---|---|---|
+| Simple scrollable list | List | `<igc-list>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/list) |
+| Hierarchical / tree data | Tree | `<igc-tree>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/tree) |
+| Tabular data (MIT, lightweight) | Grid Lite | `<igc-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grid-lite/overview) |
+| Full-featured tabular data grid | Data Grid | `<igc-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/grid/overview) |
+| Nested / master-detail grid | Hierarchical Grid | `<igc-hierarchical-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/hierarchical-grid/overview) |
+| Parent-child relational tree grid | Tree Grid | `<igc-tree-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/tree-grid/overview) |
+| Cross-tabulation / BI pivot table | Pivot Grid | `<igc-pivot-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/web-components/components/grids/pivot-grid/overview) |
+
+### Conversational / AI
+
+| UI Need | Component | Tag | Docs |
+|---|---|---|---|
+| Chat / AI assistant message thread | Chat | `<igc-chat>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/interactivity/chat) |
+
+---
+
+## Step-by-Step: Choosing Components for a UI
+
+Follow these steps when an agent or user describes a UI requirement:
+
+### Step 1 — Identify UI patterns
+
+Break the described UI into atomic patterns. Examples:
+- "A booking form" → date input, text inputs, button, maybe a calendar picker
+- "An admin dashboard" → navbar, nav drawer, cards, data grid, charts
+- "A notification center" → snackbar or toast, badge, list
+- "A settings page" → tabs or accordion, switch, input, select, button
+
+### Step 2 — Map patterns to components
+
+Use the **Component Catalogue** tables above to find matching components. When in doubt:
+
+| If the user needs… | Prefer… | Over… |
+|---|---|---|
+| Simple static list | `<igc-list>` | Data Grid |
+| Basic dropdown | `<igc-select>` | `<igc-combo>` |
+| Searchable or multi-select dropdown | `<igc-combo>` | `<igc-select>` |
+| Tabular data with basic display and functionality | Grid Lite | Data Grid (commercial) |
+| Tabular data, advanced features needed | Data Grid | Grid Lite |
+| Single dismissible message | Toast | Snackbar |
+| Message requiring user action | Snackbar | Toast |
+| Collapsible single section | Expansion Panel | Accordion |
+| Multiple collapsible sections | Accordion | Expansion Panel |
+| Stepped wizard UI | Stepper | Tabs |
+| Content tabs / view switching | Tabs | Stepper |
+
+### Step 3 — Check the package
+
+Confirm which package provides the component:
+
+- **MIT components** (inputs, layout, notifications, scheduling, chat) → `igniteui-webcomponents`
+- **Advanced grids** (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) → `igniteui-webcomponents-grids` *(commercial)*
+- **Lightweight grid** (Grid Lite) → `igniteui-grid-lite` *(MIT)*
+- **Docking layout** → `igniteui-dockmanager` *(commercial)*
+
+### Step 4 — Link to official resources
+
+Always direct the user to the official documentation linked in the tables above. Key entry points:
+
+- **Component overview**: [Ignite UI Web Components Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started)
+- **Live Storybook demos**: [https://igniteui.github.io/igniteui-webcomponents](https://igniteui.github.io/igniteui-webcomponents)
+- **npm package**: [https://www.npmjs.com/package/igniteui-webcomponents](https://www.npmjs.com/package/igniteui-webcomponents)
+- **GitHub repository**: [https://github.com/IgniteUI/igniteui-webcomponents](https://github.com/IgniteUI/igniteui-webcomponents)
+- **Changelog / releases**: [https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md)
+
+### Step 5 — Provide a starter code snippet
+
+Once components are identified, give the user a minimal working snippet. Example for an admin dashboard shell:
+
+```typescript
+import {
+  defineComponents,
+  IgcNavbarComponent,
+  IgcNavDrawerComponent,
+  IgcCardComponent,
+  IgcIconComponent,
+  IgcButtonComponent,
+  registerIconFromText,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcNavbarComponent,
+  IgcNavDrawerComponent,
+  IgcCardComponent,
+  IgcIconComponent,
+  IgcButtonComponent
+);
+
+registerIconFromText('menu', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>', 'material');
+registerIconFromText('home', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>', 'material');
+registerIconFromText('build', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>', 'material');
+```
+
+```html
+<igc-navbar>
+  <igc-icon name="menu" collection="material" slot="start"></igc-icon>
+  <h1>My Dashboard</h1>
+</igc-navbar>
+
+<igc-nav-drawer>
+  <igc-nav-drawer-item>
+    <igc-icon name="home" collection="material" slot="icon"></igc-icon>
+    <span slot="content">Home</span>
+  </igc-nav-drawer-item>
+  <igc-nav-drawer-item>
+    <igc-icon name="build" collection="material" slot="icon"></igc-icon>
+    <span slot="content">Settings</span>
+  </igc-nav-drawer-item>
+</igc-nav-drawer>
+
+<igc-card>
+  <igc-card-header>
+    <h3 slot="title">Summary</h3>
+  </igc-card-header>
+  <igc-card-content>Dashboard content here</igc-card-content>
+</igc-card>
+```
+
+---
+
+## Common UI Scenarios → Recommended Component Sets
+
+### Login / Authentication Form
+- `<igc-input>` — email and password fields
+- `<igc-checkbox>` — "Remember me"
+- `<igc-button>` — submit
+- `<igc-snackbar>` — error/success feedback
+- **Docs**: [Input](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input) · [Button](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/button) · [Snackbar](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/snackbar)
+
+### User Profile / Settings Page
+- `<igc-avatar>` — profile picture
+- `<igc-tabs>` — section navigation (Profile, Security, Notifications)
+- `<igc-input>` / `<igc-textarea>` — editable fields
+- `<igc-switch>` — feature toggles
+- `<igc-select>` — preference dropdowns
+- `<igc-button>` — save/cancel actions
+- **Docs**: [Avatar](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/avatar) · [Tabs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tabs) · [Switch](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/switch)
+
+### Data Table / Admin List View
+- `<igc-input>` — search bar
+- `<igc-combo>` — filter dropdowns
+- `<igc-grid>` (Grid Lite) or Data Grid — tabular data
+- `<igc-button>` / `<igc-icon-button>` — actions
+- `<igc-dialog>` — confirm delete modal
+- `<igc-badge>` — status indicators
+- **Docs**: [Grid Lite](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grid-lite/overview) · [Data Grid](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/grid/overview) · [Dialog](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/dialog)
+
+### Booking / Reservation Form
+- `<igc-date-range-picker>` — check-in / check-out
+- `<igc-input>` — guest details
+- `<igc-select>` — room type
+- `<igc-stepper>` — multi-step booking flow
+- `<igc-button>` — next / confirm
+- `<igc-toast>` — booking confirmation
+- **Docs**: [Date Range Picker](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/date-range-picker) · [Stepper](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/stepper)
+
+### Analytics / Reporting Dashboard
+- `<igc-navbar>` — top bar
+- `<igc-nav-drawer>` — side navigation
+- `<igc-card>` — KPI summary cards
+- `<igc-tabs>` or `<igc-tile-manager>` — section layout
+- Data Grid or Pivot Grid — detailed data tables
+- `<igc-linear-progress>` / `<igc-circular-progress>` — loading states
+- **Docs**: [Tile Manager](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tile-manager) · [Pivot Grid](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/pivot-grid/overview)
+
+### Notification / Activity Feed
+- `<igc-list>` — activity items
+- `<igc-avatar>` — user avatars in each item
+- `<igc-badge>` — unread count
+- `<igc-snackbar>` — real-time alerts
+- `<igc-chip>` — filter tags (All, Mentions, Replies)
+- **Docs**: [List](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/list) · [Badge](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/badge) · [Chip](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/chip)
+
+### AI / Chatbot Interface
+- `<igc-chat>` — full chat UI with message threading
+- `<igc-input>` or `<igc-textarea>` — message input
+- `<igc-icon-button>` — send button
+- `<igc-avatar>` — bot and user avatars
+- `<igc-circular-progress>` — "thinking" indicator
+- **Docs**: [Chat](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/interactivity/chat) · [Avatar](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/avatar)
+
+---
+
+## Common Issues & Solutions
+
+### "I can't find a component for X"
+
+1. Check the [full component list](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started) in the official docs
+2. Consider composing two simpler components (e.g., `<igc-card>` + `<igc-list>` for a list card)
+
+### "Which grid should I use?"
+
+| Scenario | Component | Package | License |
+|---|---|---|---|
+| Simple table with basic features | Grid Lite | `igniteui-grid-lite` | MIT |
+| Advanced/excel-style filtering, paging, editing | Data Grid | `igniteui-webcomponents-grids` | Commercial |
+| Master-detail / nested rows | Hierarchical Grid | `igniteui-webcomponents-grids` | Commercial |
+| Parent-child with shared columns | Tree Grid | `igniteui-webcomponents-grids` | Commercial |
+| Cross-tabulation / OLAP analysis | Pivot Grid | `igniteui-webcomponents-grids` | Commercial |
+
+### "I need React support"
+
+Use the [`igniteui-react`](https://www.npmjs.com/package/igniteui-react) package. Components are wrapped with React-friendly event bindings and props. See the [igniteui-wc-integrate-with-framework](../igniteui-wc-integrate-with-framework/SKILL.md) skill for setup.
+
+### "How do I get commercial components?"
+
+Visit [https://www.infragistics.com/products/ignite-ui-web-components](https://www.infragistics.com/products/ignite-ui-web-components) or contact [Infragistics sales](https://www.infragistics.com/about-us/contact-us) for licensing information.
+
+---
+
+## Additional Resources
+
+| Resource | Link |
+|---|---|
+| Getting started guide | [https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started) |
+| GitHub repository | [https://github.com/IgniteUI/igniteui-webcomponents](https://github.com/IgniteUI/igniteui-webcomponents) |
+| Changelog | [https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md) |
+| Discord community | [https://discord.gg/39MjrTRqds](https://discord.gg/39MjrTRqds) |
+| Infragistics contact | [https://www.infragistics.com/about-us/contact-us](https://www.infragistics.com/about-us/contact-us) |