igniteui-wc-integrate-with-framework

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

• igniteui-wc-optimize-bundle-size - Reduce bundle size after integration
• igniteui-wc-customize-component-theme - Style components after setup

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 dependencies
• angular.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
• User explicitly asks for vanilla JS or HTML 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, or Vanilla JS / HTML)"

Then load the matching reference from the options above.

---

Framework Reference Files

Framework / Platform	Reference
React	react.md
Angular	angular.md
Vue 3	vue.md
Vanilla JS / HTML	vanilla-js.md

Each reference covers:

• Installation
• Theme import (required for styling)
• Component registration
• Usage examples
• TypeScript support
• Platform-specific considerations
• Common issues and solutions