Agent Skills › IgniteUI/igniteui-webcomponents › igniteui-wc-integrate-with-framework

igniteui-wc-integrate-with-framework

GitHub

协助用户将 Ignite UI Web Components 集成至 React、Angular、Vue 3 或原生 JS 项目。自动检测框架并指导包选择、组件注册及配置，解决集成报错。

skills/igniteui-wc-integrate-with-framework/SKILL.md IgniteUI/igniteui-webcomponents

Trigger Scenarios

在项目中添加 Ignite UI Web Components 解决框架特定的集成或注册错误询问 React/Angular/Vue 的初始化设置

Install

npx skills add IgniteUI/igniteui-webcomponents --skill igniteui-wc-integrate-with-framework -g -y

More Options

Use without installing

npx skills use IgniteUI/igniteui-webcomponents@igniteui-wc-integrate-with-framework

指定 Agent (Claude Code)

npx skills add IgniteUI/igniteui-webcomponents --skill igniteui-wc-integrate-with-framework -a claude-code -g -y

安装 repo 全部 skill

npx skills add IgniteUI/igniteui-webcomponents --all -g -y

预览 repo 内 skill

npx skills add IgniteUI/igniteui-webcomponents --list

SKILL.md

Frontmatter

{
    "name": "igniteui-wc-integrate-with-framework",
    "license": "MIT",
    "description": "Install and integrate Ignite UI Web Components packages into React, Angular, Vue 3, LitElement, or vanilla JS\/HTML apps, detecting the framework and applying framework-specific setup (package choice, component registration, theme imports, schemas\/config, events and property binding). WHEN TO USE: the user wants to add Ignite UI Web Components or igniteui-react to a project, set up a new app with them, fix registration\/'unknown element' errors, or needs framework-specific wiring for templates, events, or forms. WHEN NOT TO USE: picking which components to use (use choose-components), customizing themes or styles (use customize-component-theme), trimming bundle size or import granularity (use optimize-bundle-size), building a view from a design (use generate-from-image-design or figma-to-app), or projects using Ignite UI for Angular\/Blazor native packages instead of Web Components.",
    "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
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