| name | igniteui-wc-integrate-with-framework |
| description | Integrate Ignite UI Web Components packages into React, Angular, Vue, or vanilla JS applications with framework-specific configurations |
| user-invocable | true |
Integrate with Framework
This skill helps users integrate Ignite UI Web Components into their application. It detects the framework or platform in use and loads the appropriate step-by-step integration reference.
Before You Answer
- Choose the package first, then load the framework reference.
- Do not assume every setup flow uses
igniteui-webcomponents.
- If the required package is not present in
package.json, add or install the correct Ignite UI dependency first. Absence from package.json does not mean the package is invalid.
Package Routing
| Component family | Package |
|---|
| General UI components | igniteui-webcomponents |
| Advanced grids | igniteui-webcomponents-grids (trial) @infragistics/igniteui-webcomponents-grids (licensed) |
| Grid Lite | igniteui-grid-lite |
| Dock Manager | igniteui-dockmanager (trial) @infragistics/igniteui-dockmanager (licensed) |
| Charts | igniteui-webcomponents-charts (trial) @infragistics/igniteui-webcomponents-charts (licensed) |
If the request only says "grid", infer the package from the requested features:
- Use
igniteui-webcomponents-grids for editing, paging, sorting, filtering, summaries, grouping, hierarchical data, or pivot features.
- Use
igniteui-grid-lite for lightweight tabular data.
Example Usage
- "How do I use igniteui-webcomponents in my React app?"
- "Integrate the button component in Angular"
- "Set up igniteui-webcomponents in Vue 3"
- "Help me add web components to my vanilla JS project"
Related Skills
When to Use
- User wants to add igniteui-webcomponents to a framework project
- User is experiencing framework-specific integration issues
- User needs help with component imports and registration
- User asks about React, Angular, Vue, or vanilla JS setup
Framework Detection
Before loading a reference, identify the target framework from the project context. Check the following signals in order:
1. Detect React
Evidence to look for:
package.json contains "react" or "react-dom" in dependencies or devDependencies- Files with
.tsx or .jsx extensions exist in src/
- Entry point imports
ReactDOM or createRoot
vite.config.ts uses @vitejs/plugin-react or @vitejs/plugin-react-swc
→ Load: react.md
2. Detect Angular
Evidence to look for:
package.json contains "@angular/core" in dependenciesangular.json file exists in the workspace root- Files with
.component.ts, .module.ts, or .component.html patterns exist
- Entry point calls
bootstrapApplication or platformBrowserDynamic
→ Load: angular.md
3. Detect Vue 3
Evidence to look for:
package.json contains "vue" in dependencies or devDependencies- Files with
.vue extensions exist in src/
vite.config.ts uses @vitejs/plugin-vue- Entry point calls
createApp
→ Load: vue.md
4. Vanilla JavaScript / HTML (fallback)
Evidence to look for:
- No major framework found in
package.json
- Plain
.html files reference a <script type="module">
- Entry point is a plain
.js or .ts file with no framework imports
package.json contains "lit" — start with the vanilla JS reference; if using Shadow DOM, follow the Shadow root theming note for grids- User explicitly asks for vanilla JS, HTML, or LitElement integration
→ Load: vanilla-js.md
If the Framework Cannot Be Determined
Ask the user directly:
"What framework or platform are you using? (React, Angular, Vue 3, Vanilla JS / HTML, or LitElement)"
Then load the matching reference from the options above.
Framework Reference Files
Each reference covers:
- Installation
- Theme import (required for styling)
- Component registration
- Usage examples
- TypeScript support
- Platform-specific considerations
- Common issues and solutions
