From 711871725fe5d29f63745835843b0edf32ac4002 Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Fri, 20 Feb 2026 12:24:53 +0200
Subject: [PATCH 01/17] feat: Add end-user skills guides for framework
 integration, theming, and bundle optimization

---
 skills/README.md                          |  64 ++
 skills/customize-component-theme/SKILL.md | 534 ++++++++++++++++
 skills/integrate-with-framework/SKILL.md  | 619 +++++++++++++++++++
 skills/optimize-bundle-size/SKILL.md      | 709 ++++++++++++++++++++++
 4 files changed, 1926 insertions(+)
 create mode 100644 skills/README.md
 create mode 100644 skills/customize-component-theme/SKILL.md
 create mode 100644 skills/integrate-with-framework/SKILL.md
 create mode 100644 skills/optimize-bundle-size/SKILL.md

diff --git a/skills/README.md b/skills/README.md
new file mode 100644
index 000000000..f2792ca8f
--- /dev/null
+++ b/skills/README.md
@@ -0,0 +1,64 @@
+# 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                              |
+| ----------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------- |
+| [integrate-with-framework](./integrate-with-framework/)     | Integrate components into React, Angular, Vue, or vanilla JS applications          | Setting up components in your project |
+| [customize-component-theme](./customize-component-theme/)   | Customize styling using CSS custom properties, parts, and theming system           | Applying custom brand colors/styles   |
+| [optimize-bundle-size](./optimize-bundle-size/)             | 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.
diff --git a/skills/customize-component-theme/SKILL.md b/skills/customize-component-theme/SKILL.md
new file mode 100644
index 000000000..d386d7ca0
--- /dev/null
+++ b/skills/customize-component-theme/SKILL.md
@@ -0,0 +1,534 @@
+---
+name: customize-component-theme
+description: Customize Ignite UI Web Components styling using the igniteui-theming MCP server for AI-assisted theming
+user-invokable: true
+---
+
+# Customize Component Theme
+
+This skill helps you customize the appearance of Ignite UI Web Components by connecting you with the **igniteui-theming MCP server** - a specialized AI assistant for theming and styling these components.
+
+## What is the igniteui-theming MCP?
+
+The igniteui-theming MCP (Model Context Protocol) server is a specialized tool that provides AI assistants like GitHub Copilot with deep knowledge about:
+
+- 🎨 Component theming system and CSS custom properties
+- 🎯 Available CSS parts for styling Shadow DOM internals
+- 🌗 Light/dark mode theming strategies
+- 🔧 Framework-specific styling patterns
+- 📚 Complete theming API documentation
+- 🎭 Pre-built theme configurations (Material, Fluent, Bootstrap, Indigo)
+
+Instead of manually searching documentation, the MCP server gives your AI assistant direct access to theming expertise.
+
+## Example Usage
+
+- "How do I change the button colors?"
+- "Customize the input component styling"
+- "Apply my brand colors to all components"
+- "Create a dark mode theme"
+- "Style the internal parts of a component"
+- "What CSS custom properties are available for the card component?"
+
+## Related Skills
+
+- [integrate-with-framework](../integrate-with-framework/) - Set up components first
+- [optimize-bundle-size](../optimize-bundle-size/) - Optimize after theming
+
+## When to Use
+
+- User wants to apply custom colors or styling
+- User needs to match components to their brand
+- User asks about theming or styling components
+- User wants to override default component styles
+- User needs guidance on CSS custom properties or CSS parts
+
+## Setup: Connect to the igniteui-theming MCP Server
+
+To enable AI-assisted theming, you need to configure your AI assistant (like GitHub Copilot, Claude Desktop, or other MCP-compatible tools) to connect to the igniteui-theming MCP server.
+
+The MCP server is included in the `igniteui-theming` package and provides tools for theme generation, color system management, and component styling guidance.
+
+### Prerequisites
+
+- **Node.js** v18 or later installed
+- **npm** or **npx** available
+- An MCP-compatible AI tool (Claude Desktop, GitHub Copilot with MCP support, etc.)
+
+### For Claude Desktop
+
+1. **Download and install Claude Desktop** from [claude.ai](https://claude.ai/download)
+
+2. **Configure the MCP server** by editing Claude's configuration file:
+
+   **On macOS:**
+   ```bash
+   code ~/Library/Application\ Support/Claude/claude_desktop_config.json
+   ```
+
+   **On Windows:**
+   ```bash
+   code %APPDATA%\Claude\claude_desktop_config.json
+   ```
+
+   **On Linux:**
+   ```bash
+   code ~/.config/Claude/claude_desktop_config.json
+   ```
+
+3. **Add the igniteui-theming MCP configuration:**
+
+   ```json
+   {
+     "mcpServers": {
+       "igniteui-theming": {
+         "command": "npx",
+         "args": [
+           "-y",
+           "igniteui-theming@latest",
+           "node_modules/igniteui-theming/dist/mcp/index.js"
+         ]
+       }
+     }
+   }
+   ```
+
+   **Alternative: Use local installation**
+
+   If you prefer to install the package locally first:
+
+   ```bash
+   npm install -g igniteui-theming
+   ```
+
+   Then configure Claude Desktop to use the installed package:
+
+   ```json
+   {
+     "mcpServers": {
+       "igniteui-theming": {
+         "command": "node",
+         "args": [
+           "/usr/local/lib/node_modules/igniteui-theming/dist/mcp/index.js"
+         ]
+       }
+     }
+   }
+   ```
+
+   **For project-local installation:**
+
+   Install in your project:
+   ```bash
+   npm install igniteui-theming
+   ```
+
+   Configure with relative path:
+   ```json
+   {
+     "mcpServers": {
+       "igniteui-theming": {
+         "command": "node",
+         "args": [
+           "node_modules/igniteui-theming/dist/mcp/index.js"
+         ],
+         "cwd": "/path/to/your/project"
+       }
+     }
+   }
+   ```
+
+4. **Restart Claude Desktop** to load the MCP server
+
+5. **Verify the connection:**
+   - Open Claude Desktop
+   - Look for a hammer icon (🔨) or MCP indicator in the interface
+   - Ask: "What theming tools are available?"
+   - Claude should respond with information about available tools like:
+     - `generate_theme` - Generate complete theme configurations
+     - `get_color_palette` - Get color palettes for themes
+     - `get_component_info` - Get component styling information
+     - And more...
+
+### For GitHub Copilot in VS Code
+
+**Note:** GitHub Copilot's MCP support may vary by version. Check the [latest Copilot documentation](https://code.visualstudio.com/docs/copilot/chat) for current MCP support status.
+
+If MCP support is available, configure it similarly to Claude Desktop using VS Code's MCP settings.
+
+### For Other MCP-Compatible Tools
+
+Consult your tool's documentation for MCP server configuration. Use these connection details:
+
+- **Package:** `igniteui-theming`
+- **MCP Server Path:** `node_modules/igniteui-theming/dist/mcp/index.js`
+- **Installation:** `npm install igniteui-theming`
+- **Source:** [GitHub - IgniteUI/igniteui-theming](https://github.com/IgniteUI/igniteui-theming)
+- **MCP Documentation:** [MCP README](https://github.com/IgniteUI/igniteui-theming/blob/master/src/mcp/README.md)
+
+## How to Use the MCP Server for Theming
+
+Once connected, your AI assistant has access to specialized theming tools through the MCP server. The server provides several tools that can be invoked to help with theming tasks:
+
+### Available Tools
+
+- **`generate_theme`** - Creates complete theme configurations based on your requirements
+- **`get_color_palette`** - Retrieves color palettes and provides color system guidance
+- **`get_component_info`** - Returns styling information for specific components
+
+### Getting Started with Basic Theming
+
+**Ask natural questions:**
+
+```
+"Generate a theme with primary color #FF5733"
+
+"How do I change the primary color of all Ignite UI components to #FF5733?"
+
+"Show me how to create a custom theme with my brand colors"
+
+"What CSS custom properties control the button appearance?"
+
+"How do I make all inputs larger?"
+```
+
+**The MCP server provides:**
+- ✅ Complete theme generation using the `generate_theme` tool
+- ✅ Exact CSS custom property names
+- ✅ Complete code examples
+- ✅ HSL color conversion help
+- ✅ Component-specific styling guidance
+
+### Working with Specific Components
+
+**Ask component-specific questions:**
+
+```
+"Get component info for igc-button"
+
+"How do I style the igc-button component?"
+
+"What CSS parts are available for igc-input?"
+
+"Show me all theming options for igc-card"
+
+"How do I customize the igc-select dropdown?"
+```
+
+**The MCP server knows:**
+- All available CSS custom properties per component (via `get_component_info`)
+- CSS part names and their purpose
+- Component-specific theming patterns
+- Common customization scenarios
+
+### Creating Complete Themes
+
+**Request theme generation:**
+
+```
+"Generate a dark mode theme for my app"
+
+"Create a Material Design theme with purple as primary color"
+
+"Generate a theme matching these brand colors: #1E3A8A (primary), #10B981 (success)"
+
+"Generate a Fluent-style theme configuration"
+
+"Create a custom theme with these HSL values: h=211, s=100%, l=50%"
+```
+
+**The MCP server can:**
+- Generate complete theme configurations using the `generate_theme` tool
+- Provide light and dark mode variants with the `get_color_palette` tool
+- Create themed component examples
+- Suggest complementary color palettes
+- Output ready-to-use CSS custom properties
+
+### Framework-Specific Theming
+
+**Get framework-tailored advice:**
+
+```
+"How do I apply custom CSS properties to components in React?"
+
+"Show me Angular template syntax for theming components"
+
+"What's the best way to theme components in Vue 3?"
+
+"Help me set up dynamic theming in my Next.js app"
+```
+
+**The MCP server provides:**
+- Framework-specific code examples
+- Integration patterns
+- Dynamic theming strategies
+- Best practices per framework
+
+## Common Theming Workflows
+
+### Workflow 1: Brand Color Application
+
+1. **Ask the MCP:** "Generate a theme with primary color #0066CC for Ignite UI components"
+
+2. **The MCP uses its tools** to:
+   - Use `generate_theme` to create a complete theme configuration
+   - Convert hex to HSL automatically
+   - Generate CSS custom properties
+   - Provide implementation guidance
+
+3. **Receive complete code** including:
+   - CSS custom property definitions
+   - Where to place the theme CSS
+   - How to test the changes
+
+4. **Apply the theme** using the provided code
+
+5. **Iterate** by asking follow-up questions like:
+   - "How do I make it darker for hover states?"
+   - "Generate success and error colors to match this theme"
+
+### Workflow 2: Component-Specific Customization
+
+1. **Ask the MCP:** "Get styling information for igc-card component"
+
+2. **The MCP uses `get_component_info`** to provide:
+   - Available CSS custom properties
+   - CSS parts for styling with `::part()`
+   - Example customizations
+   - Browser compatibility notes
+
+3. **Ask for customization:** "I want rounded corners and a shadow on the card"
+
+4. **Receive specific code** for your requirement
+
+5. **Implement and refine** using the guidance
+
+### Workflow 3: Dark Mode Implementation
+
+1. **Ask the MCP:** "Generate a dark mode theme for my Ignite UI components"
+
+2. **The MCP uses `generate_theme`** to provide:
+   - Complete dark mode configuration
+   - CSS custom property setup for light/dark variants
+   - Media query patterns with `prefers-color-scheme`
+   - JavaScript toggle implementation (if needed)
+   - Framework integration examples
+
+3. **Receive a complete implementation:**
+   - Light and dark theme CSS
+   - Toggle mechanism code
+   - Best practices for theme switching
+
+4. **Deploy** with confidence using tested patterns
+
+### Workflow 4: Debugging Styles
+
+1. **Ask the MCP:** "Why isn't my CSS applying to the button's text?"
+
+2. **Get diagnostic help:**
+   - Shadow DOM explanation
+   - Correct selector syntax (use `::part()` or CSS custom properties)
+   - Available styling approaches
+   - Browser DevTools tips
+
+3. **Ask for component details:** "Get component info for igc-button to see available parts"
+
+4. **Resolve the issue** with expert guidance
+
+## What the MCP Server Knows
+
+The igniteui-theming MCP server (located at `igniteui-theming/dist/mcp/index.js`) provides specialized tools and comprehensive knowledge for theming Ignite UI Web Components:
+
+### Available MCP Tools
+
+- **`generate_theme`** - Generate complete theme configurations with custom colors and styles
+- **`get_color_palette`** - Retrieve color palettes and color system information
+- **`get_component_info`** - Get detailed styling information for specific components
+- **Theme analysis tools** - Analyze and optimize theme configurations
+- **CSS custom property lookup** - Find available CSS variables for components
+
+### CSS Custom Properties (Design Tokens)
+
+### CSS Custom Properties (Design Tokens)
+
+- **Color system:**
+  - `--ig-primary-h/s/l` - Primary color (HSL)
+  - `--ig-surface-h/s/l` - Surface color
+  - `--ig-error-h/s/l`, `--ig-success-h/s/l`, `--ig-warning-h/s/l`, `--ig-info-h/s/l`
+  - And many more semantic colors
+
+- **Typography:**
+  - `--ig-font-family` - Base font
+  - `--ig-body-1-font-size`, `--ig-h1-font-size`, etc.
+  - Font weight and line height tokens
+
+- **Spacing & Layout:**
+  - `--ig-spacing` - Base spacing unit
+  - `--ig-size` - Component size variants
+  - `--ig-radius` - Border radius
+
+### CSS Parts (Shadow DOM Styling)
+
+- Part names for all components
+- Which parts control which visual elements
+- How to style parts with `::part()` selector
+- Common part styling patterns
+
+### Pre-Built Themes
+
+- Material Design theme
+- Fluent Design theme
+- Bootstrap theme
+- Indigo theme
+- Custom theme creation patterns
+
+### Advanced Theming
+
+- Dynamic theme switching
+- CSS-in-JS theming
+- Theme generation from brand guidelines
+- Color palette generation
+- Accessibility considerations (WCAG contrast)
+
+## Benefits of Using the MCP Server
+
+### For Developers
+
+✅ **Instant answers** - No documentation searching needed
+✅ **Context-aware** - Knows your framework and setup
+✅ **Code examples** - Get working code immediately
+✅ **Best practices** - Learn proper patterns as you go
+✅ **Error prevention** - Avoid common pitfalls
+
+### For Teams
+
+✅ **Consistent theming** - Everyone uses the same patterns
+✅ **Faster onboarding** - New team members get guided help
+✅ **Knowledge sharing** - AI assistant knows team conventions
+✅ **Documentation as code** - Themes are self-documenting
+
+## Troubleshooting MCP Connection
+
+### Issue: MCP server not showing up
+
+**Check:**
+1. Configuration file syntax is valid JSON
+2. File is saved in the correct location
+3. Claude Desktop (or your tool) has been restarted
+4. You have internet connection (for npx download)
+5. Node.js v18+ is installed
+
+**Solution:**
+```bash
+# Verify Node.js version
+node --version
+
+# Test running the MCP server directly
+npm install igniteui-theming
+node node_modules/igniteui-theming/dist/mcp/index.js
+```
+
+### Issue: "Cannot find module" errors
+
+**Solution:**
+```bash
+# Install the package locally
+npm install igniteui-theming
+
+# Update your config to use the local path
+{
+  "mcpServers": {
+    "igniteui-theming": {
+      "command": "node",
+      "args": ["node_modules/igniteui-theming/dist/mcp/index.js"]
+    }
+  }
+}
+```
+
+### Issue: "Permission denied" errors
+
+**On macOS/Linux:**
+```bash
+# Ensure the config file is readable
+chmod 644 ~/.config/Claude/claude_desktop_config.json
+
+# Ensure the MCP server file is executable
+chmod +x node_modules/igniteui-theming/dist/mcp/index.js
+```
+
+### Issue: MCP server crashes or disconnects
+
+**Check:**
+1. Node.js is installed (v18 or later recommended)
+2. The `igniteui-theming` package is properly installed
+3. Firewall isn't blocking the connection
+4. Check Claude Desktop logs for error messages
+
+**Debug with verbose output:**
+```bash
+# Run the server manually to see error messages
+node node_modules/igniteui-theming/dist/mcp/index.js
+```
+
+### Issue: Tools not appearing in Claude
+
+**Solution:**
+After configuring the server, restart Claude Desktop completely (quit and reopen). The MCP tools should appear under the hammer icon (🔨) in the chat interface.
+
+**Available tools should include:**
+- `generate_theme` - Generate theme configurations
+- `get_color_palette` - Retrieve color palettes
+- `get_component_info` - Get component styling details
+- Additional theming tools
+
+For more detailed troubleshooting, see the [MCP documentation](https://github.com/IgniteUI/igniteui-theming/blob/master/src/mcp/README.md).
+
+## Alternative: Manual Theming Reference
+
+If you cannot use the MCP server, here are the basic theming approaches:
+
+### CSS Custom Properties
+
+```css
+:root {
+  --ig-primary-h: 211deg;
+  --ig-primary-s: 100%;
+  --ig-primary-l: 50%;
+}
+```
+
+### CSS Parts
+
+```css
+igc-button::part(base) {
+  padding: 12px 24px;
+}
+```
+
+### For complete theming documentation
+Visit the [official documentation](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/themes/overview).
+
+However, we **strongly recommend using the MCP server** for:
+- Interactive guidance
+- Context-aware help
+- Framework-specific examples
+- Real-time problem solving
+
+## Next Steps
+
+1. **Set up the MCP server** using the instructions above
+2. **Ask your AI assistant** theming questions naturally
+3. **Iterate quickly** with instant feedback
+4. **Share your theme** configurations with your team
+
+For component integration, see the [integrate-with-framework](../integrate-with-framework/) skill.
+
+## Additional Resources
+
+- [igniteui-theming Package on GitHub](https://github.com/IgniteUI/igniteui-theming)
+- [igniteui-theming MCP Documentation](https://github.com/IgniteUI/igniteui-theming/blob/master/src/mcp/README.md)
+- [Model Context Protocol Documentation](https://modelcontextprotocol.io/)
+- [Claude Desktop Download](https://claude.ai/download)
+- [Ignite UI Theming Documentation](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/themes/overview)
+- [igniteui-webcomponents on npm](https://www.npmjs.com/package/igniteui-webcomponents)
diff --git a/skills/integrate-with-framework/SKILL.md b/skills/integrate-with-framework/SKILL.md
new file mode 100644
index 000000000..71e653d05
--- /dev/null
+++ b/skills/integrate-with-framework/SKILL.md
@@ -0,0 +1,619 @@
+---
+name: integrate-with-framework
+description: Integrate igniteui-webcomponents into React, Angular, Vue, or vanilla JS applications with framework-specific configurations
+user-invokable: true
+---
+
+# Integrate with Framework
+
+This skill helps users integrate Ignite UI Web Components into their preferred framework or vanilla JavaScript application.
+
+## 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
+
+- [optimize-bundle-size](../optimize-bundle-size/) - Reduce bundle size after integration
+- [customize-component-theme](../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
+
+## Prerequisites
+
+Before starting, ensure:
+
+- [ ] Framework or vanilla JS is identified
+- [ ] Package manager (npm, yarn, pnpm) is available
+- [ ] Project is already initialized
+
+## Common Integration Patterns
+
+### 1. Vanilla JavaScript / HTML
+
+**Installation:**
+
+```bash
+npm install igniteui-webcomponents
+```
+
+**Import and register components (in your main JS file):**
+
+```typescript
+// Option 1: Import specific components (recommended)
+import { defineComponents, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcButtonComponent, IgcInputComponent);
+
+// Option 2: Import all components (larger bundle)
+import { defineAllComponents } from 'igniteui-webcomponents';
+
+defineAllComponents();
+```
+
+**Usage in HTML:**
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <script type="module" src="./main.js"></script>
+</head>
+<body>
+  <igc-button variant="contained">Click me</igc-button>
+  <igc-input label="Name" placeholder="Enter your name"></igc-input>
+</body>
+</html>
+```
+
+### 2. React
+
+#### Option A: Using igniteui-react (Recommended)
+
+For React applications, we provide a dedicated **`igniteui-react`** package that wraps the web components with React-specific bindings. This package addresses React's pain points with web components, including:
+
+- ✅ Proper event handling (no need for `addEventListener`)
+- ✅ TypeScript support with full type definitions
+- ✅ Automatic global type declarations (`HTMLElementTagNameMap`)
+- ✅ React-friendly props (camelCase instead of kebab-case)
+- ✅ Automatic property binding for complex data
+- ✅ Better integration with React DevTools
+
+**Installation:**
+
+```bash
+npm install igniteui-react
+```
+
+**Usage:**
+
+```tsx
+import { IgrButton, IgrInput } from 'igniteui-react';
+
+function MyComponent() {
+  const handleClick = (event: CustomEvent) => {
+    console.log('Button clicked', event.detail);
+  };
+
+  const handleChange = (event: CustomEvent) => {
+    console.log('Input changed', event.detail);
+  };
+
+  return (
+    <div>
+      {/* Use PascalCase components with proper event props */}
+      <IgrButton variant="contained" onClick={handleClick}>
+        Click me
+      </IgrButton>
+
+      {/* Props work naturally */}
+      <IgrInput
+        label="Name"
+        placeholder="Enter your name"
+        required
+        onChange={handleChange}
+      />
+    </div>
+  );
+}
+```
+
+**Complex data example:**
+
+```tsx
+import { IgrCombo } from 'igniteui-react';
+
+function MyComponent() {
+  const data = [
+    { value: 1, label: 'Item 1' },
+    { value: 2, label: 'Item 2' }
+  ];
+
+  return <IgrCombo data={data} />;
+}
+```
+
+For more information, see the [igniteui-react documentation](https://www.npmjs.com/package/igniteui-react).
+
+---
+
+#### Option B: Using Web Components Directly
+
+If you prefer or need to use the web components directly without the React wrapper:
+
+**Installation:**
+
+```bash
+npm install igniteui-webcomponents
+```
+
+**Create a setup file (e.g., `src/igniteui-setup.ts`):**
+
+```typescript
+import { defineComponents, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents';
+
+// Register components once at app startup
+defineComponents(IgcButtonComponent, IgcInputComponent);
+```
+
+**Import in your main entry point (`src/main.tsx` or `src/index.tsx`):**
+
+```typescript
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './igniteui-setup'; // Import before App
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+```
+
+**Usage in React components:**
+
+```tsx
+import React, { useRef, useEffect } from 'react';
+
+function MyComponent() {
+  const buttonRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const button = buttonRef.current;
+
+    // Handle custom events with addEventListener
+    const handleClick = (event: CustomEvent) => {
+      console.log('Button clicked', event.detail);
+    };
+
+    button?.addEventListener('igcClick', handleClick as EventListener);
+
+    return () => {
+      button?.removeEventListener('igcClick', handleClick as EventListener);
+    };
+  }, []);
+
+  return (
+    <div>
+      {/* Use lowercase for web components in JSX */}
+      <igc-button ref={buttonRef} variant="contained">
+        Click me
+      </igc-button>
+
+      {/* Pass primitives as attributes */}
+      <igc-input
+        label="Name"
+        placeholder="Enter your name"
+        required
+      />
+    </div>
+  );
+}
+```
+
+**Important Considerations When Using Web Components Directly:**
+
+1. **Event Handling**: React's synthetic events don't work with custom events. Use `addEventListener` with refs.
+2. **Attribute Naming**: Use lowercase kebab-case for attributes (React converts them properly).
+3. **Boolean Attributes**: Pass boolean values directly: `required` or `disabled`.
+4. **Complex Data**: For objects/arrays, use refs to set properties directly:
+
+```tsx
+const comboRef = useRef<any>(null);
+
+useEffect(() => {
+  if (comboRef.current) {
+    comboRef.current.data = [{ value: 1, label: 'Item 1' }];
+  }
+}, []);
+
+return <igc-combo ref={comboRef}></igc-combo>;
+```
+
+### 3. Angular
+
+**Installation:**
+
+```bash
+npm install igniteui-webcomponents
+```
+
+**Enable custom elements schema in your module or component:**
+
+For standalone components (`app.config.ts` or component file):
+
+```typescript
+import { ApplicationConfig, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ... other providers
+  ],
+  // Add schema
+};
+
+// In your standalone component:
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+@Component({
+  selector: 'app-my-component',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <igc-button variant="contained">Click me</igc-button>
+  `
+})
+export class MyComponent {}
+```
+
+For NgModule-based apps (`app.module.ts`):
+
+```typescript
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+@NgModule({
+  declarations: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  // ...
+})
+export class AppModule {}
+```
+
+**Register components in `main.ts`:**
+
+```typescript
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+import { defineComponents, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents';
+
+// Register components before bootstrapping
+defineComponents(IgcButtonComponent, IgcInputComponent);
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));
+```
+
+**Usage in Angular templates:**
+
+```typescript
+import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+
+@Component({
+  selector: 'app-my-component',
+  template: `
+    <igc-button
+      #myButton
+      variant="contained"
+      (igcClick)="handleClick($event)">
+      Click me
+    </igc-button>
+
+    <igc-input
+      [label]="inputLabel"
+      [placeholder]="'Enter your name'"
+      [required]="true"
+      (igcChange)="handleChange($event)">
+    </igc-input>
+  `
+})
+export class MyComponent implements AfterViewInit {
+  @ViewChild('myButton') buttonRef!: ElementRef;
+
+  inputLabel = 'Name';
+
+  ngAfterViewInit() {
+    // Access element directly if needed
+    const button = this.buttonRef.nativeElement;
+    console.log(button);
+  }
+
+  handleClick(event: CustomEvent) {
+    console.log('Button clicked', event.detail);
+  }
+
+  handleChange(event: CustomEvent) {
+    console.log('Input changed', event.detail);
+  }
+}
+```
+
+**Important Angular Considerations:**
+
+1. **CUSTOM_ELEMENTS_SCHEMA**: Required to use web components in templates.
+2. **Event Binding**: Use Angular's event binding syntax `(eventName)="handler($event)"`.
+3. **Property Binding**: Use `[property]="value"` for complex data.
+4. **Form Integration**: Web components work with Angular Forms using `ngModel` or form controls.
+
+### 4. Vue 3
+
+**Installation:**
+
+```bash
+npm install igniteui-webcomponents
+```
+
+**Configure Vue to recognize custom elements (`vite.config.ts` or `vue.config.js`):**
+
+For Vite:
+
+```typescript
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          // Treat all tags starting with 'igc-' as custom elements
+          isCustomElement: (tag) => tag.startsWith('igc-')
+        }
+      }
+    })
+  ]
+});
+```
+
+For Vue CLI (`vue.config.js`):
+
+```javascript
+module.exports = {
+  chainWebpack: config => {
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .tap(options => ({
+        ...options,
+        compilerOptions: {
+          isCustomElement: tag => tag.startsWith('igc-')
+        }
+      }));
+  }
+};
+```
+
+**Register components in `main.ts`:**
+
+```typescript
+import { createApp } from 'vue';
+import App from './App.vue';
+import { defineComponents, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents';
+
+// Register components
+defineComponents(IgcButtonComponent, IgcInputComponent);
+
+createApp(App).mount('#app');
+```
+
+**Usage in Vue components:**
+
+```vue
+<template>
+  <div>
+    <!-- Use kebab-case for web components -->
+    <igc-button
+      variant="contained"
+      @igcClick="handleClick">
+      Click me
+    </igc-button>
+
+    <!-- Bind properties with : or v-bind -->
+    <igc-input
+      :label="inputLabel"
+      placeholder="Enter your name"
+      :required="true"
+      @igcChange="handleChange">
+    </igc-input>
+
+    <!-- For complex data, set via ref -->
+    <igc-combo ref="comboRef"></igc-combo>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const inputLabel = ref('Name');
+const comboRef = ref<HTMLElement | null>(null);
+
+const handleClick = (event: CustomEvent) => {
+  console.log('Button clicked', event.detail);
+};
+
+const handleChange = (event: CustomEvent) => {
+  console.log('Input changed', event.detail);
+};
+
+onMounted(() => {
+  // Set complex properties via ref
+  if (comboRef.value) {
+    (comboRef.value as any).data = [
+      { value: 1, label: 'Item 1' },
+      { value: 2, label: 'Item 2' }
+    ];
+  }
+});
+</script>
+```
+
+**Important Vue Considerations:**
+
+1. **isCustomElement**: Must configure Vue to recognize web components prefix.
+2. **Event Binding**: Use `@eventName` for custom events.
+3. **Property Binding**: Use `:property` or `v-bind:property` for reactive data.
+4. **Complex Data**: Use refs to access and set complex properties.
+
+## TypeScript Support
+
+### Using igniteui-react
+
+The `igniteui-react` package automatically provides:
+
+- ✅ **Full TypeScript type definitions** for all components and props
+- ✅ **Automatic global type declarations** for HTML elements (`HTMLElementTagNameMap`)
+- ✅ **IntelliSense support** out of the box
+
+No additional TypeScript configuration is needed!
+
+```tsx
+import { IgrButton } from 'igniteui-react';
+
+// TypeScript knows about IgrButton props automatically
+function MyComponent() {
+  return <IgrButton variant="contained">Click</IgrButton>;
+}
+
+// DOM queries are also typed automatically
+const button = document.querySelector('igc-button'); // Typed as IgcButtonComponent | null
+```
+
+---
+
+### Using Web Components Directly
+
+The `igniteui-webcomponents` package **automatically provides global type declarations** for all HTML elements via `HTMLElementTagNameMap`. You don't need to manually declare types!
+
+**Import types for better IntelliSense:**
+
+```typescript
+import type {
+  IgcButtonComponent,
+  IgcInputComponent
+} from 'igniteui-webcomponents';
+
+// Use in type annotations
+const buttonElement: IgcButtonComponent = document.querySelector('igc-button')!;
+```
+
+**DOM queries are automatically typed:**
+
+```typescript
+import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcButtonComponent);
+
+// TypeScript automatically knows the type - no manual declarations needed!
+const button = document.querySelector('igc-button'); // Typed as IgcButtonComponent | null
+
+// IntelliSense works automatically
+button?.setAttribute('variant', 'contained');
+```
+
+The package exports type definitions and registers all component types in the global `HTMLElementTagNameMap` interface, so your IDE will provide full autocomplete and type checking without any additional configuration.
+
+## Common Issues and Solutions
+
+### Issue: Components not rendering
+
+**Solution:** Ensure components are registered before they're used in the DOM:
+
+```typescript
+// ❌ Wrong - component used before registration
+document.body.innerHTML = '<igc-button>Click</igc-button>';
+defineComponents(IgcButtonComponent);
+
+// ✅ Correct - register first
+defineComponents(IgcButtonComponent);
+document.body.innerHTML = '<igc-button>Click</igc-button>';
+```
+
+### Issue: Events not firing in React
+
+**Best Solution:** Use the `igniteui-react` package which handles events properly:
+
+```tsx
+import { IgrButton } from 'igniteui-react';
+
+// ✅ Events work naturally with igniteui-react
+<IgrButton onIgcClick={handleClick}>Click</IgrButton>
+```
+
+**Alternative Solution (using web components directly):** Use `addEventListener` with refs:
+
+```tsx
+// ❌ Wrong - React synthetic events don't work with web components
+<igc-button onClick={handleClick}>Click</igc-button>
+
+// ✅ Correct - use addEventListener with web components
+const buttonRef = useRef<HTMLElement>(null);
+useEffect(() => {
+  const handler = (e: Event) => handleClick(e);
+  buttonRef.current?.addEventListener('igcClick', handler);
+  return () => buttonRef.current?.removeEventListener('igcClick', handler);
+}, []);
+return <igc-button ref={buttonRef}>Click</igc-button>;
+```
+
+### Issue: Vue warns about unknown custom element
+
+**Solution:** Configure `isCustomElement` in Vue config (see Vue section above).
+
+### Issue: Angular template errors
+
+**Solution:** Add `CUSTOM_ELEMENTS_SCHEMA` to your component or module (see Angular section above).
+
+### Issue: Complex properties not updating
+
+**Solution:** Set complex properties (objects, arrays) via DOM properties, not attributes:
+
+```typescript
+// ❌ Wrong - attributes only accept strings
+<igc-combo data="[{...}]"></igc-combo>
+
+// ✅ Correct - set via property
+const combo = document.querySelector('igc-combo');
+combo.data = [{ value: 1, label: 'Item' }];
+```
+
+## Testing Integration
+
+Verify your integration by checking:
+
+1. Components render in the DOM
+2. Events fire and are handled correctly
+3. Properties update reactively
+4. No console errors or warnings
+
+## Next Steps
+
+After integration:
+
+- [Optimize bundle size](../optimize-bundle-size/) - Import only needed components
+- [Customize themes](../customize-component-theme/) - Apply your brand colors
+- Review [component documentation](https://igniteui.github.io/igniteui-webcomponents) for specific component APIs
+
+## Additional Resources
+
+- [igniteui-react Package](https://www.npmjs.com/package/igniteui-react) - React wrapper for Ignite UI Web Components
+- [Lit Documentation - Using Lit with frameworks](https://lit.dev/docs/frameworks/overview/)
+- [Web Components Best Practices](https://web.dev/custom-elements-best-practices/)
diff --git a/skills/optimize-bundle-size/SKILL.md b/skills/optimize-bundle-size/SKILL.md
new file mode 100644
index 000000000..9de0ed30e
--- /dev/null
+++ b/skills/optimize-bundle-size/SKILL.md
@@ -0,0 +1,709 @@
+---
+name: optimize-bundle-size
+description: Optimize application bundle size by importing only necessary components and using tree-shaking effectively
+user-invokable: true
+---
+
+# Optimize Bundle Size
+
+This skill helps users minimize their application's bundle size when using Ignite UI Web Components by importing only the components they need and following best practices for tree-shaking.
+
+## Example Usage
+
+- "My bundle size is too large"
+- "How do I reduce the size of igniteui-webcomponents?"
+- "Import only the components I need"
+- "Tree-shake unused components"
+- "Optimize imports for production"
+
+## Related Skills
+
+- [integrate-with-framework](../integrate-with-framework/) - Proper integration setup
+- [customize-component-theme](../customize-component-theme/) - Theming after optimization
+
+## When to Use
+
+- User's bundle size is too large
+- User wants to optimize for production
+- User is importing more components than needed
+- User asks about tree-shaking or optimization
+- User wants to improve load times
+
+## Key Principles
+
+1. **Import only what you use** - Don't use `defineAllComponents()`
+2. **Use named imports** - Enable tree-shaking
+3. **Analyze your bundle** - Identify what's being included
+4. **Lazy load when possible** - Load components on demand
+
+## Import Strategies
+
+### ❌ Bad: Import Everything
+
+```typescript
+// DON'T DO THIS - imports ALL components (~500KB+)
+import { defineAllComponents } from 'igniteui-webcomponents';
+
+defineAllComponents();
+```
+
+**Impact:** Includes all 60+ components whether you use them or not.
+
+### ✅ Good: Import Specific Components
+
+```typescript
+// DO THIS - import only what you need
+import {
+  defineComponents,
+  IgcButtonComponent,
+  IgcInputComponent,
+  IgcCardComponent
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcButtonComponent, IgcInputComponent, IgcCardComponent);
+```
+
+**Impact:** Bundle includes only 3 components and their dependencies.
+
+## React Applications
+
+If you're using React, consider using the **`igniteui-react`** package instead of `igniteui-webcomponents`. It provides the same components with React-friendly wrappers and typically results in better tree-shaking:
+
+```bash
+npm install igniteui-react
+```
+
+```tsx
+import { IgrButton, IgrInput, IgrCard } from 'igniteui-react';
+
+// No need to call defineComponents - components register automatically
+function MyComponent() {
+  return (
+    <div>
+      <IgrButton variant="contained">Click me</IgrButton>
+      <IgrInput label="Name" />
+      <IgrCard>Content</IgrCard>
+    </div>
+  );
+}
+```
+
+**Benefits for bundle size:**
+- Automatic tree-shaking (only imported components are included)
+- No need for component registration overhead
+- Better integration with React build tools
+
+For more details, see the [integrate-with-framework](../integrate-with-framework/) skill.
+
+## Analyzing Your Bundle
+
+### Using Webpack Bundle Analyzer
+
+**Installation:**
+
+```bash
+npm install --save-dev webpack-bundle-analyzer
+```
+
+**Configuration (`webpack.config.js`):**
+
+```javascript
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+
+module.exports = {
+  plugins: [
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      openAnalyzer: false,
+      reportFilename: 'bundle-report.html'
+    })
+  ]
+};
+```
+
+**Run analysis:**
+
+```bash
+npm run build
+# Open bundle-report.html to see what's included
+```
+
+### Using Vite Bundle Analyzer
+
+**Installation:**
+
+```bash
+npm install --save-dev rollup-plugin-visualizer
+```
+
+**Configuration (`vite.config.ts`):**
+
+```typescript
+import { defineConfig } from 'vite';
+import { visualizer } from 'rollup-plugin-visualizer';
+
+export default defineConfig({
+  plugins: [
+    visualizer({
+      open: true,
+      gzipSize: true,
+      brotliSize: true,
+    })
+  ]
+});
+```
+
+**Run analysis:**
+
+```bash
+npm run build
+# Opens stats.html automatically
+```
+
+### Using source-map-explorer
+
+**Installation:**
+
+```bash
+npm install --save-dev source-map-explorer
+```
+
+**Package.json:**
+
+```json
+{
+  "scripts": {
+    "analyze": "source-map-explorer 'dist/**/*.js'"
+  }
+}
+```
+
+**Run:**
+
+```bash
+npm run build
+npm run analyze
+```
+
+## Audit Your Component Usage
+
+### 1. Find What Components You're Actually Using
+
+Search your codebase for component usage:
+
+```bash
+# Search for component tags in templates
+grep -r "igc-" src/ --include="*.html" --include="*.tsx" --include="*.vue"
+
+# List unique components
+grep -roh "igc-[a-z-]*" src/ | sort | uniq
+```
+
+### 2. Compare with Your Imports
+
+Check what you're importing vs what you're using:
+
+```typescript
+// Find in your code
+import {
+  defineComponents,
+  IgcButtonComponent,
+  IgcInputComponent,
+  IgcCardComponent,
+  IgcSelectComponent,  // ← Are you using this?
+  IgcComboComponent,   // ← Are you using this?
+} from 'igniteui-webcomponents';
+```
+
+### 3. Remove Unused Imports
+
+Remove components you're not using:
+
+```typescript
+// Before: 5 components imported
+import {
+  defineComponents,
+  IgcButtonComponent,
+  IgcInputComponent,
+  IgcCardComponent,
+  IgcSelectComponent,
+  IgcComboComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcButtonComponent,
+  IgcInputComponent,
+  IgcCardComponent,
+  IgcSelectComponent,
+  IgcComboComponent
+);
+
+// After: Only 3 components needed
+import {
+  defineComponents,
+  IgcButtonComponent,
+  IgcInputComponent,
+  IgcCardComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcButtonComponent, IgcInputComponent, IgcCardComponent);
+```
+
+## Lazy Loading Components
+
+Load components only when needed to reduce initial bundle size.
+
+### Vanilla JavaScript / TypeScript
+
+```typescript
+// Load immediately (increases initial bundle)
+import { defineComponents, IgcDialogComponent } from 'igniteui-webcomponents';
+defineComponents(IgcDialogComponent);
+
+// Lazy load (smaller initial bundle)
+async function showDialog() {
+  const { defineComponents, IgcDialogComponent } = await import('igniteui-webcomponents');
+  defineComponents(IgcDialogComponent);
+
+  const dialog = document.createElement('igc-dialog');
+  // ... use dialog
+}
+```
+
+### React (using igniteui-react)
+
+```tsx
+import React, { lazy, Suspense } from 'react';
+
+// Lazy load the dialog component
+const IgrDialog = lazy(() =>
+  import('igniteui-react').then(module => ({ default: module.IgrDialog }))
+);
+
+function MyComponent() {
+  const [showDialog, setShowDialog] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setShowDialog(true)}>Open Dialog</button>
+      {showDialog && (
+        <Suspense fallback={<div>Loading...</div>}>
+          <IgrDialog open>
+            <h2>Dialog Content</h2>
+          </IgrDialog>
+        </Suspense>
+      )}
+    </>
+  );
+}
+```
+
+### React (using web components directly)
+
+```tsx
+import React, { useEffect, useState } from 'react';
+
+// Lazy load component registration
+const lazyLoadDialog = async () => {
+  const { defineComponents, IgcDialogComponent } = await import('igniteui-webcomponents');
+  defineComponents(IgcDialogComponent);
+};
+
+function MyComponent() {
+  const [dialogReady, setDialogReady] = useState(false);
+
+  const openDialog = async () => {
+    if (!dialogReady) {
+      await lazyLoadDialog();
+      setDialogReady(true);
+    }
+    // Show dialog
+  };
+
+  return (
+    <button onClick={openDialog}>Open Dialog</button>
+  );
+}
+```
+
+### Vue 3
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const dialogReady = ref(false);
+
+async function openDialog() {
+  if (!dialogReady.value) {
+    const { defineComponents, IgcDialogComponent } = await import('igniteui-webcomponents');
+    defineComponents(IgcDialogComponent);
+    dialogReady.value = true;
+  }
+  // Show dialog
+}
+</script>
+
+<template>
+  <button @click="openDialog">Open Dialog</button>
+  <igc-dialog v-if="dialogReady" open>
+    <h2>Dialog Content</h2>
+  </igc-dialog>
+</template>
+```
+
+### Angular
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-my-component',
+  template: `
+    <button (click)="openDialog()">Open Dialog</button>
+    <igc-dialog *ngIf="dialogReady" [open]="true">
+      <h2>Dialog Content</h2>
+    </igc-dialog>
+  `
+})
+export class MyComponent {
+  dialogReady = false;
+
+  async openDialog() {
+    if (!this.dialogReady) {
+      const { defineComponents, IgcDialogComponent } = await import('igniteui-webcomponents');
+      defineComponents(IgcDialogComponent);
+      this.dialogReady = true;
+    }
+  }
+}
+```
+
+## Route-Based Code Splitting
+
+Load components only for specific routes.
+
+### React Router
+
+```tsx
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { lazy, Suspense } from 'react';
+
+// Lazy load route components
+const HomePage = lazy(() => import('./pages/Home'));
+const DashboardPage = lazy(() => import('./pages/Dashboard'));
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/dashboard" element={<DashboardPage />} />
+        </Routes>
+      </Suspense>
+    </BrowserRouter>
+  );
+}
+```
+
+**In route component (`pages/Dashboard.tsx`):**
+
+```tsx
+import { IgrCard, IgrButton } from 'igniteui-react';
+
+function Dashboard() {
+  return (
+    <div>
+      <IgrCard>
+        <h2>Dashboard</h2>
+        <p>Dashboard content here</p>
+      </IgrCard>
+    </div>
+  );
+}
+```
+
+### Vue Router
+
+```typescript
+// router/index.ts
+import { createRouter, createWebHistory } from 'vue-router';
+
+const routes = [
+  {
+    path: '/',
+    component: () => import('../views/Home.vue') // Lazy load
+  },
+  {
+    path: '/dashboard',
+    component: () => import('../views/Dashboard.vue') // Lazy load
+  }
+];
+
+export default createRouter({
+  history: createWebHistory(),
+  routes
+});
+```
+
+**In route component (`views/Dashboard.vue`):**
+
+```vue
+<script setup lang="ts">
+import { onMounted } from 'vue';
+
+onMounted(async () => {
+  // Load components only for this route
+  const { defineComponents, IgcCardComponent } = await import('igniteui-webcomponents');
+  defineComponents(IgcCardComponent);
+});
+</script>
+```
+
+### Angular
+
+```typescript
+// app-routing.module.ts
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: 'dashboard',
+    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}
+```
+
+## Build Configuration Optimizations
+
+### Vite Configuration
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    // Enable minification
+    minify: 'terser',
+    terserOptions: {
+      compress: {
+        drop_console: true, // Remove console.logs
+        drop_debugger: true
+      }
+    },
+
+    // Optimize chunk splitting
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          // Separate vendor chunks
+          'vendor': ['igniteui-webcomponents'],
+        }
+      }
+    },
+
+    // Set chunk size warning limit
+    chunkSizeWarningLimit: 600,
+  },
+
+  // Optimize deps
+  optimizeDeps: {
+    include: ['igniteui-webcomponents']
+  }
+});
+```
+
+### Webpack Configuration
+
+```javascript
+// webpack.config.js
+module.exports = {
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          priority: 10,
+        },
+        igniteui: {
+          test: /[\\/]node_modules[\\/]igniteui-webcomponents[\\/]/,
+          name: 'igniteui',
+          priority: 20,
+        }
+      }
+    },
+    minimize: true,
+  },
+
+  // Tree shaking
+  mode: 'production',
+};
+```
+
+## Size Comparison
+
+Here's what you can expect in terms of bundle size:
+
+| Import Strategy | Approximate Size (gzipped) | Components Included |
+|----------------|---------------------------|---------------------|
+| `defineAllComponents()` | ~500KB+ | All 60+ components |
+| 10 components via `defineComponents()` | ~150-200KB | 10 components + deps |
+| 5 components via `defineComponents()` | ~100-150KB | 5 components + deps |
+| 3 components via `defineComponents()` | ~80-120KB | 3 components + deps |
+| 1 component via `defineComponents()` | ~50-80KB | 1 component + deps |
+
+**Note:** Sizes vary based on which components you import (some have more dependencies than others).
+
+## Best Practices Checklist
+
+- [ ] **Never use `defineAllComponents()`** unless you truly need every component
+- [ ] **Use `defineComponents()` with specific components** you need
+- [ ] **Audit your imports regularly** - remove unused components
+- [ ] **Lazy load rarely-used components** (dialogs, modals, etc.)
+- [ ] **Split by routes** - load components only for active routes
+- [ ] **Analyze your bundle** - use bundle analyzer tools
+- [ ] **Enable tree-shaking** - use named imports, not side-effect imports
+- [ ] **Minify in production** - ensure build tool minification is enabled
+- [ ] **Use compression** - enable gzip/brotli on your server
+
+## Common Issues and Solutions
+
+### Issue: Bundle still large after following best practices
+
+**Investigate:**
+
+1. Check if you're importing many components at once
+2. Verify tree-shaking is working (check build output)
+3. Look for duplicate dependencies
+4. Check if source maps are included in production
+5. For React, ensure you're using `igniteui-react` instead of `igniteui-webcomponents`
+
+**Solutions:**
+
+```typescript
+// Review your imports - are you using all of these?
+import {
+  defineComponents,
+  IgcButtonComponent,
+  IgcInputComponent,
+  IgcSelectComponent,
+  IgcComboComponent,
+  IgcDatePickerComponent
+} from 'igniteui-webcomponents';
+
+// Consider lazy loading components you don't need immediately
+async function loadDialog() {
+  const { defineComponents, IgcDialogComponent } = await import('igniteui-webcomponents');
+  defineComponents(IgcDialogComponent);
+}
+```
+
+### Issue: Components not working after optimizing imports
+
+**Cause:** Forgot to import a component you're using
+
+**Solution:**
+
+```typescript
+// Error: <igc-button> not working
+// You're using igc-button but didn't import it
+
+import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents';
+defineComponents(IgcButtonComponent); // Add this
+```
+
+### Issue: TypeScript errors after changing imports
+
+**Solution:** Update type imports:
+
+```typescript
+// Import types separately if needed
+import type { IgcButtonComponent } from 'igniteui-webcomponents';
+```
+
+## Monitoring Bundle Size
+
+### Set up bundle size monitoring in CI/CD
+
+**Using bundlesize (for any build tool):**
+
+```bash
+npm install --save-dev bundlesize
+```
+
+**Package.json:**
+
+```json
+{
+  "scripts": {
+    "test:size": "bundlesize"
+  },
+  "bundlesize": [
+    {
+      "path": "./dist/**/*.js",
+      "maxSize": "300 kB"
+    }
+  ]
+}
+```
+
+**Run in CI:**
+
+```bash
+npm run build
+npm run test:size
+```
+
+### GitHub Actions Example
+
+```yaml
+name: Bundle Size Check
+
+on: [pull_request]
+
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - run: npm ci
+      - run: npm run build
+      - run: npm run test:size
+```
+
+## Expected Results
+
+After optimization, you should see:
+
+- **Initial load time reduced** by 40-60%
+- **Bundle size reduced** by 50-80%
+- **Better Core Web Vitals** scores
+- **Faster time to interactive**
+- **Lower bandwidth usage** for users
+
+## Next Steps
+
+- Profile your application with Chrome DevTools Performance tab
+- Implement lazy loading for heavy components
+- Consider using CDN for static assets
+- Enable HTTP/2 for better resource loading
+- Check [integrate-with-framework](../integrate-with-framework/) for proper setup
+
+## Additional Resources
+
+- [Webpack Tree Shaking](https://webpack.js.org/guides/tree-shaking/)
+- [Vite Build Optimizations](https://vitejs.dev/guide/build.html)
+- [Web Performance Optimization](https://web.dev/fast/)
+- [Bundle Size Analysis Tools](https://bundlephobia.com/)

From b9260827a78a63ba2c331e833531bb9de1c6f355 Mon Sep 17 00:00:00 2001
From: damyanpetev <damyanpetev@users.noreply.github.com>
Date: Fri, 20 Feb 2026 17:54:31 +0200
Subject: [PATCH 02/17] docs(readme): remove obsolete form info

---
 README.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/README.md b/README.md
index fb6b30ed9..f7936d615 100644
--- a/README.md
+++ b/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) |
@@ -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

From d867953e33a15f316b2aa90a75bc44fac821fd6b Mon Sep 17 00:00:00 2001
From: damyanpetev <damyanpetev@users.noreply.github.com>
Date: Fri, 20 Feb 2026 18:10:22 +0200
Subject: [PATCH 03/17] docs(skills): add theming MCP setup step instruction

---
 skills/customize-component-theme/SKILL.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/skills/customize-component-theme/SKILL.md b/skills/customize-component-theme/SKILL.md
index d386d7ca0..282e10263 100644
--- a/skills/customize-component-theme/SKILL.md
+++ b/skills/customize-component-theme/SKILL.md
@@ -43,6 +43,22 @@ Instead of manually searching documentation, the MCP server gives your AI assist
 - User wants to override default component styles
 - User needs guidance on CSS custom properties or CSS parts
 
+## Prerequisites
+
+- A project with `igniteui-webcomponents` & `igniteui-theming` installed
+- The **Ignite UI Theming MCP server** (`igniteui-theming`) available as a tool provider
+
+> **AGENT INSTRUCTION — MCP Server Setup (REQUIRED)**
+>
+> Before using any theming tools, you MUST verify the MCP server is available
+> by calling `detect_platform`. If the tool is not available or the call fails,
+> you MUST automatically configure it by following the setup process steps described below.
+>
+> After writing the file, inform the user that the MCP server has been
+> configured and they may need to reload the editor for the tools to activate.
+> Start the MCP server and wait for that MCP server to start before continuing the theming related work.
+> Do NOT skip this step or ask the user to do it manually.
+
 ## Setup: Connect to the igniteui-theming MCP Server
 
 To enable AI-assisted theming, you need to configure your AI assistant (like GitHub Copilot, Claude Desktop, or other MCP-compatible tools) to connect to the igniteui-theming MCP server.

From f9cdf6cbae20cf1d1d58e82a5ded222c630358fb Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Mon, 23 Feb 2026 10:05:39 +0200
Subject: [PATCH 04/17] fix: Updated the integrate-with-framework skill

- Make sure to include a default prebuilt CSS theme
with the components
---
 skills/integrate-with-framework/SKILL.md | 35 ++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/skills/integrate-with-framework/SKILL.md b/skills/integrate-with-framework/SKILL.md
index 71e653d05..715c6edc8 100644
--- a/skills/integrate-with-framework/SKILL.md
+++ b/skills/integrate-with-framework/SKILL.md
@@ -35,6 +35,25 @@ Before starting, ensure:
 - [ ] Package manager (npm, yarn, pnpm) is available
 - [ ] Project is already initialized
 
+## Theming
+
+Ignite UI Web Components require a theme CSS file to render correctly. The package ships with four themes in both light and dark variants:
+
+| Theme | Light | Dark |
+|-------|-------|------|
+| Bootstrap | `igniteui-webcomponents/themes/light/bootstrap.css` | `igniteui-webcomponents/themes/dark/bootstrap.css` |
+| Material | `igniteui-webcomponents/themes/light/material.css` | `igniteui-webcomponents/themes/dark/material.css` |
+| Fluent | `igniteui-webcomponents/themes/light/fluent.css` | `igniteui-webcomponents/themes/dark/fluent.css` |
+| Indigo | `igniteui-webcomponents/themes/light/indigo.css` | `igniteui-webcomponents/themes/dark/indigo.css` |
+
+Import the theme in your application's entry point:
+
+```typescript
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+```
+
+All framework sections below include this step.
+
 ## Common Integration Patterns
 
 ### 1. Vanilla JavaScript / HTML
@@ -45,9 +64,12 @@ Before starting, ensure:
 npm install igniteui-webcomponents
 ```
 
-**Import and register components (in your main JS file):**
+**Import and register components, and import a theme (in your main JS file):**
 
 ```typescript
+// Import a theme (required for correct styling)
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
 // Option 1: Import specific components (recommended)
 import { defineComponents, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents';
 
@@ -90,7 +112,13 @@ For React applications, we provide a dedicated **`igniteui-react`** package that
 **Installation:**
 
 ```bash
-npm install igniteui-react
+npm install igniteui-react igniteui-webcomponents
+```
+
+**Import a theme in your entry point (`src/main.tsx` or `src/index.tsx`):**
+
+```typescript
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 ```
 
 **Usage:**
@@ -158,6 +186,7 @@ npm install igniteui-webcomponents
 **Create a setup file (e.g., `src/igniteui-setup.ts`):**
 
 ```typescript
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineComponents, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents';
 
 // Register components once at app startup
@@ -294,6 +323,7 @@ export class AppModule {}
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineComponents, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents';
 
 // Register components before bootstrapping
@@ -407,6 +437,7 @@ module.exports = {
 ```typescript
 import { createApp } from 'vue';
 import App from './App.vue';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import { defineComponents, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents';
 
 // Register components

From 1907784a2db34af64e09aa95469b8c223be5ab7c Mon Sep 17 00:00:00 2001
From: damyanpetev <damyanpetev@users.noreply.github.com>
Date: Mon, 23 Feb 2026 10:15:51 +0200
Subject: [PATCH 05/17] docs(readme): fix Grid Lite package link

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f7936d615..b6a2c3a6d 100644
--- a/README.md
+++ b/README.md
@@ -264,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

From 982b938f468514c10868ae0d42b64b17c469109b Mon Sep 17 00:00:00 2001
From: damyanpetev <damyanpetev@users.noreply.github.com>
Date: Mon, 23 Feb 2026 12:16:16 +0200
Subject: [PATCH 06/17] docs(skills): add a component pick/list skill

---
 skills/README.md                  |   1 +
 skills/choose-components/SKILL.md | 353 ++++++++++++++++++++++++++++++
 2 files changed, 354 insertions(+)
 create mode 100644 skills/choose-components/SKILL.md

diff --git a/skills/README.md b/skills/README.md
index f2792ca8f..32d8ab5dc 100644
--- a/skills/README.md
+++ b/skills/README.md
@@ -10,6 +10,7 @@ Skills are structured instructions that help AI agents understand and execute co
 
 | Skill                                                       | Description                                                                        | Use When                              |
 | ----------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------- |
+| [choose-components](./choose-components/)                   | Identify the right components for a UI pattern and navigate to official docs/demos | Deciding which components to use      |
 | [integrate-with-framework](./integrate-with-framework/)     | Integrate components into React, Angular, Vue, or vanilla JS applications          | Setting up components in your project |
 | [customize-component-theme](./customize-component-theme/)   | Customize styling using CSS custom properties, parts, and theming system           | Applying custom brand colors/styles   |
 | [optimize-bundle-size](./optimize-bundle-size/)             | Reduce bundle size by importing only needed components and lazy loading            | Optimizing production performance     |
diff --git a/skills/choose-components/SKILL.md b/skills/choose-components/SKILL.md
new file mode 100644
index 000000000..9a1125433
--- /dev/null
+++ b/skills/choose-components/SKILL.md
@@ -0,0 +1,353 @@
+---
+name: 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
+
+- [integrate-with-framework](../integrate-with-framework/) — Set up chosen components in React, Angular, Vue, or vanilla JS
+- [customize-component-theme](../customize-component-theme/) — Style and theme the components you select
+- [optimize-bundle-size](../optimize-bundle-size/) — 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 functionaries  |
+| [`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/notifications/toast) |
+
+### 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/webcomponentssite/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/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,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcNavbarComponent,
+  IgcNavDrawerComponent,
+  IgcCardComponent,
+  IgcIconComponent,
+  IgcButtonComponent
+);
+```
+
+```html
+<igc-navbar>
+  <igc-icon name="menu" slot="start"></igc-icon>
+  <h1>My Dashboard</h1>
+</igc-navbar>
+
+<igc-nav-drawer>
+  <igc-nav-drawer-item>
+    <igc-icon name="home" slot="icon"></igc-icon>
+    <span slot="content">Home</span>
+  </igc-nav-drawer-item>
+  <igc-nav-drawer-item>
+    <igc-icon name="settings" 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
+3. 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 [integrate-with-framework](../integrate-with-framework/) 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) |

From ec2b9a9895441fa983c7a12e45b0c21b8e7b00fc Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Mon, 23 Feb 2026 14:29:54 +0200
Subject: [PATCH 07/17] docs: Updated integrate-with-framework skill

- Changed incorrect event binding for code snippet
---
 skills/integrate-with-framework/SKILL.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/skills/integrate-with-framework/SKILL.md b/skills/integrate-with-framework/SKILL.md
index 715c6edc8..29a205370 100644
--- a/skills/integrate-with-framework/SKILL.md
+++ b/skills/integrate-with-framework/SKILL.md
@@ -586,7 +586,7 @@ document.body.innerHTML = '<igc-button>Click</igc-button>';
 import { IgrButton } from 'igniteui-react';
 
 // ✅ Events work naturally with igniteui-react
-<IgrButton onIgcClick={handleClick}>Click</IgrButton>
+<IgrButton onClick={handleClick}>Click</IgrButton>
 ```
 
 **Alternative Solution (using web components directly):** Use `addEventListener` with refs:

From 3f662b169ebce62ba6819194f0fe7c03e5fe168c Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Mon, 23 Feb 2026 15:10:48 +0200
Subject: [PATCH 08/17] docs: Updated integrate-with-framework skill

- Split framework references into separate files for better organization
---
 skills/integrate-with-framework/SKILL.md      | 646 ++----------------
 .../references/angular.md                     | 185 +++++
 .../references/react.md                       | 116 ++++
 .../references/vanilla-js.md                  | 118 ++++
 .../references/vue.md                         | 181 +++++
 5 files changed, 654 insertions(+), 592 deletions(-)
 create mode 100644 skills/integrate-with-framework/references/angular.md
 create mode 100644 skills/integrate-with-framework/references/react.md
 create mode 100644 skills/integrate-with-framework/references/vanilla-js.md
 create mode 100644 skills/integrate-with-framework/references/vue.md

diff --git a/skills/integrate-with-framework/SKILL.md b/skills/integrate-with-framework/SKILL.md
index 29a205370..4e9b95ff9 100644
--- a/skills/integrate-with-framework/SKILL.md
+++ b/skills/integrate-with-framework/SKILL.md
@@ -6,7 +6,7 @@ user-invokable: true
 
 # Integrate with Framework
 
-This skill helps users integrate Ignite UI Web Components into their preferred framework or vanilla JavaScript application.
+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.
 
 ## Example Usage
 
@@ -27,624 +27,86 @@ This skill helps users integrate Ignite UI Web Components into their preferred f
 - User needs help with component imports and registration
 - User asks about React, Angular, Vue, or vanilla JS setup
 
-## Prerequisites
-
-Before starting, ensure:
-
-- [ ] Framework or vanilla JS is identified
-- [ ] Package manager (npm, yarn, pnpm) is available
-- [ ] Project is already initialized
-
-## Theming
-
-Ignite UI Web Components require a theme CSS file to render correctly. The package ships with four themes in both light and dark variants:
-
-| Theme | Light | Dark |
-|-------|-------|------|
-| Bootstrap | `igniteui-webcomponents/themes/light/bootstrap.css` | `igniteui-webcomponents/themes/dark/bootstrap.css` |
-| Material | `igniteui-webcomponents/themes/light/material.css` | `igniteui-webcomponents/themes/dark/material.css` |
-| Fluent | `igniteui-webcomponents/themes/light/fluent.css` | `igniteui-webcomponents/themes/dark/fluent.css` |
-| Indigo | `igniteui-webcomponents/themes/light/indigo.css` | `igniteui-webcomponents/themes/dark/indigo.css` |
-
-Import the theme in your application's entry point:
-
-```typescript
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
-```
-
-All framework sections below include this step.
-
-## Common Integration Patterns
-
-### 1. Vanilla JavaScript / HTML
-
-**Installation:**
-
-```bash
-npm install igniteui-webcomponents
-```
-
-**Import and register components, and import a theme (in your main JS file):**
-
-```typescript
-// Import a theme (required for correct styling)
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
-
-// Option 1: Import specific components (recommended)
-import { defineComponents, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents';
-
-defineComponents(IgcButtonComponent, IgcInputComponent);
-
-// Option 2: Import all components (larger bundle)
-import { defineAllComponents } from 'igniteui-webcomponents';
-
-defineAllComponents();
-```
-
-**Usage in HTML:**
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <script type="module" src="./main.js"></script>
-</head>
-<body>
-  <igc-button variant="contained">Click me</igc-button>
-  <igc-input label="Name" placeholder="Enter your name"></igc-input>
-</body>
-</html>
-```
-
-### 2. React
-
-#### Option A: Using igniteui-react (Recommended)
-
-For React applications, we provide a dedicated **`igniteui-react`** package that wraps the web components with React-specific bindings. This package addresses React's pain points with web components, including:
-
-- ✅ Proper event handling (no need for `addEventListener`)
-- ✅ TypeScript support with full type definitions
-- ✅ Automatic global type declarations (`HTMLElementTagNameMap`)
-- ✅ React-friendly props (camelCase instead of kebab-case)
-- ✅ Automatic property binding for complex data
-- ✅ Better integration with React DevTools
-
-**Installation:**
-
-```bash
-npm install igniteui-react igniteui-webcomponents
-```
-
-**Import a theme in your entry point (`src/main.tsx` or `src/index.tsx`):**
-
-```typescript
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
-```
-
-**Usage:**
-
-```tsx
-import { IgrButton, IgrInput } from 'igniteui-react';
-
-function MyComponent() {
-  const handleClick = (event: CustomEvent) => {
-    console.log('Button clicked', event.detail);
-  };
-
-  const handleChange = (event: CustomEvent) => {
-    console.log('Input changed', event.detail);
-  };
-
-  return (
-    <div>
-      {/* Use PascalCase components with proper event props */}
-      <IgrButton variant="contained" onClick={handleClick}>
-        Click me
-      </IgrButton>
-
-      {/* Props work naturally */}
-      <IgrInput
-        label="Name"
-        placeholder="Enter your name"
-        required
-        onChange={handleChange}
-      />
-    </div>
-  );
-}
-```
-
-**Complex data example:**
-
-```tsx
-import { IgrCombo } from 'igniteui-react';
-
-function MyComponent() {
-  const data = [
-    { value: 1, label: 'Item 1' },
-    { value: 2, label: 'Item 2' }
-  ];
-
-  return <IgrCombo data={data} />;
-}
-```
-
-For more information, see the [igniteui-react documentation](https://www.npmjs.com/package/igniteui-react).
-
 ---
 
-#### Option B: Using Web Components Directly
-
-If you prefer or need to use the web components directly without the React wrapper:
-
-**Installation:**
-
-```bash
-npm install igniteui-webcomponents
-```
-
-**Create a setup file (e.g., `src/igniteui-setup.ts`):**
-
-```typescript
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
-import { defineComponents, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents';
-
-// Register components once at app startup
-defineComponents(IgcButtonComponent, IgcInputComponent);
-```
-
-**Import in your main entry point (`src/main.tsx` or `src/index.tsx`):**
-
-```typescript
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './igniteui-setup'; // Import before App
-import App from './App';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-```
+## Framework Detection
 
-**Usage in React components:**
+Before loading a reference, identify the target framework from the project context. Check the following signals in order:
 
-```tsx
-import React, { useRef, useEffect } from 'react';
+### 1. Detect React
 
-function MyComponent() {
-  const buttonRef = useRef<HTMLElement>(null);
+**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`
 
-  useEffect(() => {
-    const button = buttonRef.current;
-
-    // Handle custom events with addEventListener
-    const handleClick = (event: CustomEvent) => {
-      console.log('Button clicked', event.detail);
-    };
-
-    button?.addEventListener('igcClick', handleClick as EventListener);
-
-    return () => {
-      button?.removeEventListener('igcClick', handleClick as EventListener);
-    };
-  }, []);
-
-  return (
-    <div>
-      {/* Use lowercase for web components in JSX */}
-      <igc-button ref={buttonRef} variant="contained">
-        Click me
-      </igc-button>
-
-      {/* Pass primitives as attributes */}
-      <igc-input
-        label="Name"
-        placeholder="Enter your name"
-        required
-      />
-    </div>
-  );
-}
-```
-
-**Important Considerations When Using Web Components Directly:**
-
-1. **Event Handling**: React's synthetic events don't work with custom events. Use `addEventListener` with refs.
-2. **Attribute Naming**: Use lowercase kebab-case for attributes (React converts them properly).
-3. **Boolean Attributes**: Pass boolean values directly: `required` or `disabled`.
-4. **Complex Data**: For objects/arrays, use refs to set properties directly:
-
-```tsx
-const comboRef = useRef<any>(null);
-
-useEffect(() => {
-  if (comboRef.current) {
-    comboRef.current.data = [{ value: 1, label: 'Item 1' }];
-  }
-}, []);
-
-return <igc-combo ref={comboRef}></igc-combo>;
-```
-
-### 3. Angular
-
-**Installation:**
-
-```bash
-npm install igniteui-webcomponents
-```
-
-**Enable custom elements schema in your module or component:**
-
-For standalone components (`app.config.ts` or component file):
-
-```typescript
-import { ApplicationConfig, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    // ... other providers
-  ],
-  // Add schema
-};
-
-// In your standalone component:
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-
-@Component({
-  selector: 'app-my-component',
-  standalone: true,
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <igc-button variant="contained">Click me</igc-button>
-  `
-})
-export class MyComponent {}
-```
-
-For NgModule-based apps (`app.module.ts`):
-
-```typescript
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-
-@NgModule({
-  declarations: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  // ...
-})
-export class AppModule {}
-```
-
-**Register components in `main.ts`:**
-
-```typescript
-import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
-import { AppComponent } from './app/app.component';
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
-import { defineComponents, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents';
-
-// Register components before bootstrapping
-defineComponents(IgcButtonComponent, IgcInputComponent);
-
-bootstrapApplication(AppComponent, appConfig)
-  .catch((err) => console.error(err));
-```
-
-**Usage in Angular templates:**
-
-```typescript
-import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
-
-@Component({
-  selector: 'app-my-component',
-  template: `
-    <igc-button
-      #myButton
-      variant="contained"
-      (igcClick)="handleClick($event)">
-      Click me
-    </igc-button>
-
-    <igc-input
-      [label]="inputLabel"
-      [placeholder]="'Enter your name'"
-      [required]="true"
-      (igcChange)="handleChange($event)">
-    </igc-input>
-  `
-})
-export class MyComponent implements AfterViewInit {
-  @ViewChild('myButton') buttonRef!: ElementRef;
-
-  inputLabel = 'Name';
-
-  ngAfterViewInit() {
-    // Access element directly if needed
-    const button = this.buttonRef.nativeElement;
-    console.log(button);
-  }
-
-  handleClick(event: CustomEvent) {
-    console.log('Button clicked', event.detail);
-  }
-
-  handleChange(event: CustomEvent) {
-    console.log('Input changed', event.detail);
-  }
-}
-```
-
-**Important Angular Considerations:**
-
-1. **CUSTOM_ELEMENTS_SCHEMA**: Required to use web components in templates.
-2. **Event Binding**: Use Angular's event binding syntax `(eventName)="handler($event)"`.
-3. **Property Binding**: Use `[property]="value"` for complex data.
-4. **Form Integration**: Web components work with Angular Forms using `ngModel` or form controls.
-
-### 4. Vue 3
-
-**Installation:**
-
-```bash
-npm install igniteui-webcomponents
-```
-
-**Configure Vue to recognize custom elements (`vite.config.ts` or `vue.config.js`):**
-
-For Vite:
-
-```typescript
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-
-export default defineConfig({
-  plugins: [
-    vue({
-      template: {
-        compilerOptions: {
-          // Treat all tags starting with 'igc-' as custom elements
-          isCustomElement: (tag) => tag.startsWith('igc-')
-        }
-      }
-    })
-  ]
-});
-```
-
-For Vue CLI (`vue.config.js`):
-
-```javascript
-module.exports = {
-  chainWebpack: config => {
-    config.module
-      .rule('vue')
-      .use('vue-loader')
-      .tap(options => ({
-        ...options,
-        compilerOptions: {
-          isCustomElement: tag => tag.startsWith('igc-')
-        }
-      }));
-  }
-};
-```
-
-**Register components in `main.ts`:**
-
-```typescript
-import { createApp } from 'vue';
-import App from './App.vue';
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
-import { defineComponents, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents';
-
-// Register components
-defineComponents(IgcButtonComponent, IgcInputComponent);
-
-createApp(App).mount('#app');
-```
-
-**Usage in Vue components:**
-
-```vue
-<template>
-  <div>
-    <!-- Use kebab-case for web components -->
-    <igc-button
-      variant="contained"
-      @igcClick="handleClick">
-      Click me
-    </igc-button>
-
-    <!-- Bind properties with : or v-bind -->
-    <igc-input
-      :label="inputLabel"
-      placeholder="Enter your name"
-      :required="true"
-      @igcChange="handleChange">
-    </igc-input>
-
-    <!-- For complex data, set via ref -->
-    <igc-combo ref="comboRef"></igc-combo>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-
-const inputLabel = ref('Name');
-const comboRef = ref<HTMLElement | null>(null);
-
-const handleClick = (event: CustomEvent) => {
-  console.log('Button clicked', event.detail);
-};
-
-const handleChange = (event: CustomEvent) => {
-  console.log('Input changed', event.detail);
-};
-
-onMounted(() => {
-  // Set complex properties via ref
-  if (comboRef.value) {
-    (comboRef.value as any).data = [
-      { value: 1, label: 'Item 1' },
-      { value: 2, label: 'Item 2' }
-    ];
-  }
-});
-</script>
-```
-
-**Important Vue Considerations:**
-
-1. **isCustomElement**: Must configure Vue to recognize web components prefix.
-2. **Event Binding**: Use `@eventName` for custom events.
-3. **Property Binding**: Use `:property` or `v-bind:property` for reactive data.
-4. **Complex Data**: Use refs to access and set complex properties.
-
-## TypeScript Support
-
-### Using igniteui-react
-
-The `igniteui-react` package automatically provides:
-
-- ✅ **Full TypeScript type definitions** for all components and props
-- ✅ **Automatic global type declarations** for HTML elements (`HTMLElementTagNameMap`)
-- ✅ **IntelliSense support** out of the box
-
-No additional TypeScript configuration is needed!
-
-```tsx
-import { IgrButton } from 'igniteui-react';
-
-// TypeScript knows about IgrButton props automatically
-function MyComponent() {
-  return <IgrButton variant="contained">Click</IgrButton>;
-}
-
-// DOM queries are also typed automatically
-const button = document.querySelector('igc-button'); // Typed as IgcButtonComponent | null
-```
+→ **Load:** [react.md](./references/react.md)
 
 ---
 
-### Using Web Components Directly
-
-The `igniteui-webcomponents` package **automatically provides global type declarations** for all HTML elements via `HTMLElementTagNameMap`. You don't need to manually declare types!
-
-**Import types for better IntelliSense:**
+### 2. Detect Angular
 
-```typescript
-import type {
-  IgcButtonComponent,
-  IgcInputComponent
-} from 'igniteui-webcomponents';
+**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`
 
-// Use in type annotations
-const buttonElement: IgcButtonComponent = document.querySelector('igc-button')!;
-```
+→ **Load:** [angular.md](./references/angular.md)
 
-**DOM queries are automatically typed:**
-
-```typescript
-import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents';
-
-defineComponents(IgcButtonComponent);
-
-// TypeScript automatically knows the type - no manual declarations needed!
-const button = document.querySelector('igc-button'); // Typed as IgcButtonComponent | null
-
-// IntelliSense works automatically
-button?.setAttribute('variant', 'contained');
-```
-
-The package exports type definitions and registers all component types in the global `HTMLElementTagNameMap` interface, so your IDE will provide full autocomplete and type checking without any additional configuration.
-
-## Common Issues and Solutions
-
-### Issue: Components not rendering
-
-**Solution:** Ensure components are registered before they're used in the DOM:
-
-```typescript
-// ❌ Wrong - component used before registration
-document.body.innerHTML = '<igc-button>Click</igc-button>';
-defineComponents(IgcButtonComponent);
-
-// ✅ Correct - register first
-defineComponents(IgcButtonComponent);
-document.body.innerHTML = '<igc-button>Click</igc-button>';
-```
-
-### Issue: Events not firing in React
-
-**Best Solution:** Use the `igniteui-react` package which handles events properly:
-
-```tsx
-import { IgrButton } from 'igniteui-react';
-
-// ✅ Events work naturally with igniteui-react
-<IgrButton onClick={handleClick}>Click</IgrButton>
-```
-
-**Alternative Solution (using web components directly):** Use `addEventListener` with refs:
+---
 
-```tsx
-// ❌ Wrong - React synthetic events don't work with web components
-<igc-button onClick={handleClick}>Click</igc-button>
+### 3. Detect Vue 3
 
-// ✅ Correct - use addEventListener with web components
-const buttonRef = useRef<HTMLElement>(null);
-useEffect(() => {
-  const handler = (e: Event) => handleClick(e);
-  buttonRef.current?.addEventListener('igcClick', handler);
-  return () => buttonRef.current?.removeEventListener('igcClick', handler);
-}, []);
-return <igc-button ref={buttonRef}>Click</igc-button>;
-```
+**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`
 
-### Issue: Vue warns about unknown custom element
+→ **Load:** [vue.md](./references/vue.md)
 
-**Solution:** Configure `isCustomElement` in Vue config (see Vue section above).
+---
 
-### Issue: Angular template errors
+### 4. Vanilla JavaScript / HTML (fallback)
 
-**Solution:** Add `CUSTOM_ELEMENTS_SCHEMA` to your component or module (see Angular section above).
+**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
 
-### Issue: Complex properties not updating
+→ **Load:** [vanilla-js.md](./references/vanilla-js.md)
 
-**Solution:** Set complex properties (objects, arrays) via DOM properties, not attributes:
+---
 
-```typescript
-// ❌ Wrong - attributes only accept strings
-<igc-combo data="[{...}]"></igc-combo>
+## If the Framework Cannot Be Determined
 
-// ✅ Correct - set via property
-const combo = document.querySelector('igc-combo');
-combo.data = [{ value: 1, label: 'Item' }];
-```
+Ask the user directly:
 
-## Testing Integration
+> "What framework or platform are you using? (React, Angular, Vue 3, or Vanilla JS / HTML)"
 
-Verify your integration by checking:
+Then load the matching reference from the options above.
 
-1. Components render in the DOM
-2. Events fire and are handled correctly
-3. Properties update reactively
-4. No console errors or warnings
+---
 
-## Next Steps
+## Framework Reference Files
 
-After integration:
+| Framework / Platform | Reference |
+|----------------------|-----------|
+| React | [react.md](./references/react.md) |
+| Angular | [angular.md](./references/angular.md) |
+| Vue 3 | [vue.md](./references/vue.md) |
+| Vanilla JS / HTML | [vanilla-js.md](./references/vanilla-js.md) |
 
-- [Optimize bundle size](../optimize-bundle-size/) - Import only needed components
-- [Customize themes](../customize-component-theme/) - Apply your brand colors
-- Review [component documentation](https://igniteui.github.io/igniteui-webcomponents) for specific component APIs
+Each reference covers:
 
-## Additional Resources
+- Installation
+- Theme import (required for styling)
+- Component registration
+- Usage examples
+- TypeScript support
+- Platform-specific considerations
+- Common issues and solutions
 
-- [igniteui-react Package](https://www.npmjs.com/package/igniteui-react) - React wrapper for Ignite UI Web Components
-- [Lit Documentation - Using Lit with frameworks](https://lit.dev/docs/frameworks/overview/)
-- [Web Components Best Practices](https://web.dev/custom-elements-best-practices/)
diff --git a/skills/integrate-with-framework/references/angular.md b/skills/integrate-with-framework/references/angular.md
new file mode 100644
index 000000000..1584e4a8c
--- /dev/null
+++ b/skills/integrate-with-framework/references/angular.md
@@ -0,0 +1,185 @@
+# Integrating Ignite UI Web Components — Angular
+
+## Installation
+
+```bash
+npm install igniteui-webcomponents
+```
+
+## Setup
+
+### Step 1 — Register the theme and components
+
+In `src/main.ts`, import a theme and register the components before bootstrapping:
+
+```typescript
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import { defineComponents, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcButtonComponent, IgcInputComponent);
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));
+```
+
+### Step 2 — Add `CUSTOM_ELEMENTS_SCHEMA`
+
+Angular requires `CUSTOM_ELEMENTS_SCHEMA` to accept custom element tags in templates.
+
+**Standalone components** — add the schema to each component that uses Ignite UI elements:
+
+```typescript
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+@Component({
+  selector: 'app-my-component',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <igc-button variant="contained">Click me</igc-button>
+  `
+})
+export class MyComponent {}
+```
+
+**NgModule-based apps** — add the schema once to `AppModule` (or the relevant module):
+
+```typescript
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}
+```
+
+## Available Themes
+
+| Theme     | Light                                                  | Dark                                                  |
+|-----------|--------------------------------------------------------|-------------------------------------------------------|
+| Bootstrap | `igniteui-webcomponents/themes/light/bootstrap.css`    | `igniteui-webcomponents/themes/dark/bootstrap.css`    |
+| Material  | `igniteui-webcomponents/themes/light/material.css`     | `igniteui-webcomponents/themes/dark/material.css`     |
+| Fluent    | `igniteui-webcomponents/themes/light/fluent.css`       | `igniteui-webcomponents/themes/dark/fluent.css`       |
+| Indigo    | `igniteui-webcomponents/themes/light/indigo.css`       | `igniteui-webcomponents/themes/dark/indigo.css`       |
+
+## Usage in Templates
+
+```typescript
+import { Component, ViewChild, ElementRef, AfterViewInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+@Component({
+  selector: 'app-my-component',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <igc-button
+      #myButton
+      variant="contained"
+      (click)="handleClick($event)">
+      Click me
+    </igc-button>
+
+    <igc-input
+      [label]="inputLabel"
+      [placeholder]="'Enter your name'"
+      [required]="true"
+      (igcChange)="handleChange($event)">
+    </igc-input>
+  `
+})
+export class MyComponent implements AfterViewInit {
+  @ViewChild('myButton') buttonRef!: ElementRef;
+
+  inputLabel = 'Name';
+
+  ngAfterViewInit() {
+    // Access the native element directly if needed
+    const button = this.buttonRef.nativeElement;
+  }
+
+  handleClick(event: PointerEvent) {
+    console.log('Button clicked');
+  }
+
+  handleChange(event: CustomEvent) {
+    console.log('Input changed', event.detail);
+  }
+}
+```
+
+## Working with Complex Properties
+
+Use Angular property binding `[property]` to pass objects and arrays:
+
+```typescript
+@Component({
+  selector: 'app-my-component',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <igc-combo [data]="items"></igc-combo>
+  `
+})
+export class MyComponent {
+  items = [
+    { value: 1, label: 'Item 1' },
+    { value: 2, label: 'Item 2' },
+  ];
+}
+```
+
+## Key Considerations
+
+| Concern | Details |
+|---------|---------|
+| **CUSTOM_ELEMENTS_SCHEMA** | Required in every module or standalone component that uses `igc-*` tags |
+| **Event binding** | Use Angular syntax: `(igcChange)="handler($event)"` |
+| **Property binding** | Use `[property]="value"` for reactive data and complex types |
+| **Form integration** | Web components work with Angular Forms via `ngModel` or reactive form controls |
+
+## TypeScript Support
+
+The `igniteui-webcomponents` package automatically registers all component types in `HTMLElementTagNameMap`. DOM queries are fully typed:
+
+```typescript
+import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcButtonComponent);
+
+// Automatically typed as IgcButtonComponent | null
+const button = document.querySelector('igc-button');
+```
+
+## Common Issues
+
+### Angular template error: "Unknown element"
+
+Add `CUSTOM_ELEMENTS_SCHEMA` to the component's `schemas` array (standalone) or to the module (NgModule).
+
+### Events not firing
+
+Use Angular's event binding syntax `(igcChange)="handler($event)"` — not `(change)`. Ignite UI components emit prefixed custom events (e.g., `igcInput`, `igcChange`).
+
+### No styles applied
+
+Ensure you import a theme CSS file in `main.ts` before bootstrapping.
+
+### Properties not updating
+
+Use `[property]="value"` binding for complex or reactive data. Attribute strings (e.g. `label="Name"`) work for primitive values only.
+
+---
+
+## Next Steps
+
+- [Optimize bundle size](../../optimize-bundle-size/) — import only the components you use
+- [Customize themes](../../customize-component-theme/) — apply your brand colors
+- [Component documentation](https://igniteui.github.io/igniteui-webcomponents) — full API reference
diff --git a/skills/integrate-with-framework/references/react.md b/skills/integrate-with-framework/references/react.md
new file mode 100644
index 000000000..d325ed6fb
--- /dev/null
+++ b/skills/integrate-with-framework/references/react.md
@@ -0,0 +1,116 @@
+# Integrating Ignite UI Web Components — React
+
+React integration uses the **`igniteui-react`** package, which provides React-native wrappers around Ignite UI Web Components:
+
+- ✅ Native React event handling
+- ✅ Full TypeScript types and IntelliSense for all props
+- ✅ Automatic global type declarations (`HTMLElementTagNameMap`)
+- ✅ camelCase props instead of kebab-case attributes
+- ✅ Seamless complex data binding (objects and arrays work as props)
+- ✅ React DevTools integration
+
+Components use the `Igr` prefix (e.g. `IgrButton`, `IgrInput`, `IgrCombo`).
+
+### Installation
+
+```bash
+npm install igniteui-react
+```
+
+### Setup
+
+Import a theme in your application entry point (`src/main.tsx` or `src/index.tsx`):
+
+```typescript
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+```
+
+### Available Themes
+
+| Theme     | Light                                                  | Dark                                                  |
+|-----------|--------------------------------------------------------|-------------------------------------------------------|
+| Bootstrap | `igniteui-webcomponents/themes/light/bootstrap.css`    | `igniteui-webcomponents/themes/dark/bootstrap.css`    |
+| Material  | `igniteui-webcomponents/themes/light/material.css`     | `igniteui-webcomponents/themes/dark/material.css`     |
+| Fluent    | `igniteui-webcomponents/themes/light/fluent.css`       | `igniteui-webcomponents/themes/dark/fluent.css`       |
+| Indigo    | `igniteui-webcomponents/themes/light/indigo.css`       | `igniteui-webcomponents/themes/dark/indigo.css`       |
+
+### Usage
+
+```tsx
+import { IgrButton, IgrInput } from 'igniteui-react';
+
+function MyComponent() {
+  // onClick is a standard React mouse event
+  const handleClick = (e: React.MouseEvent) => console.log('Clicked');
+
+  // onChange receives the component's change event
+  const handleChange = (e: CustomEvent) => console.log(`Changed: ${event.detail}`);
+
+  return (
+    <div>
+      <IgrButton variant="contained" onClick={handleClick}>
+        Click me
+      </IgrButton>
+
+      <IgrInput
+        label="Name"
+        placeholder="Enter your name"
+        required
+        onChange={handleChange}
+      />
+    </div>
+  );
+}
+```
+
+### Complex Data
+
+Objects and arrays bind directly as props with `igniteui-react`:
+
+```tsx
+import { IgrCombo } from 'igniteui-react';
+
+function MyComponent() {
+  const items = [
+    { value: 1, label: 'Item 1' },
+    { value: 2, label: 'Item 2' },
+  ];
+
+  return <IgrCombo data={items} />;
+}
+```
+
+### TypeScript Support
+
+The `igniteui-react` package ships with full type definitions. No extra configuration needed:
+
+```tsx
+import { IgrButton } from 'igniteui-react';
+
+// TypeScript knows about all IgrButton props
+<IgrButton variant="contained">Click</IgrButton>
+
+// DOM queries are also typed automatically (via igniteui-webcomponents peer)
+const button = document.querySelector('igc-button'); // IgcButtonComponent | null
+```
+
+---
+
+## Common Issues
+
+### Components not rendering
+
+The `igniteui-react` package registers components automatically on import. Ensure the package is installed and components are imported before the component tree renders.
+
+### No styles applied
+
+Ensure you import a theme CSS file in your entry point. Without it, components render unstyled.
+
+---
+
+## Next Steps
+
+- [Optimize bundle size](../../optimize-bundle-size/) — import only the components you use
+- [Customize themes](../../customize-component-theme/) — apply your brand colors
+- [igniteui-react on npm](https://www.npmjs.com/package/igniteui-react) — React wrapper documentation
+- [Component documentation](https://igniteui.github.io/igniteui-webcomponents) — full API reference
diff --git a/skills/integrate-with-framework/references/vanilla-js.md b/skills/integrate-with-framework/references/vanilla-js.md
new file mode 100644
index 000000000..f1c7df343
--- /dev/null
+++ b/skills/integrate-with-framework/references/vanilla-js.md
@@ -0,0 +1,118 @@
+# Integrating Ignite UI Web Components — Vanilla JavaScript / HTML
+
+## Installation
+
+```bash
+npm install igniteui-webcomponents
+```
+
+## Setup
+
+In your main JavaScript/TypeScript entry file, import a theme and register the components you need:
+
+```typescript
+// 1. Import a theme (required for correct styling)
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+// 2. Import and register specific components (recommended)
+import { defineComponents, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcButtonComponent, IgcInputComponent);
+```
+
+To register all components at once (increases bundle size):
+
+```typescript
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import { defineAllComponents } from 'igniteui-webcomponents';
+
+defineAllComponents();
+```
+
+## Available Themes
+
+| Theme     | Light                                                  | Dark                                                  |
+|-----------|--------------------------------------------------------|-------------------------------------------------------|
+| Bootstrap | `igniteui-webcomponents/themes/light/bootstrap.css`    | `igniteui-webcomponents/themes/dark/bootstrap.css`    |
+| Material  | `igniteui-webcomponents/themes/light/material.css`     | `igniteui-webcomponents/themes/dark/material.css`     |
+| Fluent    | `igniteui-webcomponents/themes/light/fluent.css`       | `igniteui-webcomponents/themes/dark/fluent.css`       |
+| Indigo    | `igniteui-webcomponents/themes/light/indigo.css`       | `igniteui-webcomponents/themes/dark/indigo.css`       |
+
+## Usage in HTML
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <script type="module" src="./main.js"></script>
+</head>
+<body>
+  <igc-button variant="contained">Click me</igc-button>
+  <igc-input label="Name" placeholder="Enter your name"></igc-input>
+</body>
+</html>
+```
+
+## TypeScript Support
+
+The `igniteui-webcomponents` package automatically provides global type declarations for all components via `HTMLElementTagNameMap`. DOM queries are fully typed without any extra configuration:
+
+```typescript
+import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcButtonComponent);
+
+// Automatically typed as IgcButtonComponent | null
+const button = document.querySelector('igc-button');
+button?.setAttribute('variant', 'outlined');
+```
+
+You can also import component types directly for annotations:
+
+```typescript
+import type { IgcButtonComponent } from 'igniteui-webcomponents';
+
+const button = document.querySelector('igc-button') as IgcButtonComponent;
+```
+
+## Working with Complex Properties
+
+Attributes only accept strings. For objects and arrays, set properties via JavaScript:
+
+```typescript
+// ❌ Wrong — attributes only accept strings
+// <igc-combo data="[{...}]"></igc-combo>
+
+// ✅ Correct — set via DOM property
+const combo = document.querySelector('igc-combo');
+combo.data = [
+  { value: 1, label: 'Item 1' },
+  { value: 2, label: 'Item 2' }
+];
+```
+
+## Common Issues
+
+### Components not rendering
+
+Register components **before** they appear in the DOM:
+
+```typescript
+// ❌ Wrong
+document.body.innerHTML = '<igc-button>Click</igc-button>';
+defineComponents(IgcButtonComponent);
+
+// ✅ Correct
+defineComponents(IgcButtonComponent);
+document.body.innerHTML = '<igc-button>Click</igc-button>';
+```
+
+### No styles applied
+
+Ensure you import a theme CSS file in your entry point. Without it, components render unstyled.
+
+## Next Steps
+
+- [Optimize bundle size](../../optimize-bundle-size/) — import only the components you use
+- [Customize themes](../../customize-component-theme/) — apply your brand colors
+- [Component documentation](https://igniteui.github.io/igniteui-webcomponents) — full API reference
diff --git a/skills/integrate-with-framework/references/vue.md b/skills/integrate-with-framework/references/vue.md
new file mode 100644
index 000000000..acb5b31f6
--- /dev/null
+++ b/skills/integrate-with-framework/references/vue.md
@@ -0,0 +1,181 @@
+# Integrating Ignite UI Web Components — Vue 3
+
+## Installation
+
+```bash
+npm install igniteui-webcomponents
+```
+
+## Setup
+
+### Step 1 — Configure Vue to recognize custom elements
+
+Vue needs to know which tags are custom elements so it does not warn about unknown components.
+
+**With Vite** (`vite.config.ts`):
+
+```typescript
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          // Treat all igc-* tags as custom elements
+          isCustomElement: (tag) => tag.startsWith('igc-')
+        }
+      }
+    })
+  ]
+});
+```
+
+**With Vue CLI** (`vue.config.js`):
+
+```javascript
+module.exports = {
+  chainWebpack: config => {
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .tap(options => ({
+        ...options,
+        compilerOptions: {
+          isCustomElement: tag => tag.startsWith('igc-')
+        }
+      }));
+  }
+};
+```
+
+### Step 2 — Register the theme and components
+
+In `src/main.ts`, import a theme and register the components before mounting:
+
+```typescript
+import { createApp } from 'vue';
+import App from './App.vue';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import { defineComponents, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcButtonComponent, IgcInputComponent);
+
+createApp(App).mount('#app');
+```
+
+## Available Themes
+
+| Theme     | Light                                                  | Dark                                                  |
+|-----------|--------------------------------------------------------|-------------------------------------------------------|
+| Bootstrap | `igniteui-webcomponents/themes/light/bootstrap.css`    | `igniteui-webcomponents/themes/dark/bootstrap.css`    |
+| Material  | `igniteui-webcomponents/themes/light/material.css`     | `igniteui-webcomponents/themes/dark/material.css`     |
+| Fluent    | `igniteui-webcomponents/themes/light/fluent.css`       | `igniteui-webcomponents/themes/dark/fluent.css`       |
+| Indigo    | `igniteui-webcomponents/themes/light/indigo.css`       | `igniteui-webcomponents/themes/dark/indigo.css`       |
+
+## Usage in Components
+
+```vue
+<template>
+  <div>
+    <igc-button variant="contained" @click="handleClick">
+      Click me
+    </igc-button>
+
+    <igc-input
+      :label="inputLabel"
+      placeholder="Enter your name"
+      :required="true"
+      @igcChange="handleChange">
+    </igc-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const inputLabel = ref('Name');
+
+const handleClick = () => {
+  console.log('Button clicked');
+};
+
+const handleChange = (event: CustomEvent) => {
+  console.log('Input changed', event.detail);
+};
+</script>
+```
+
+## Working with Complex Properties
+
+Attributes only accept strings. Pass objects and arrays using a template ref:
+
+```vue
+<template>
+  <igc-combo ref="comboRef"></igc-combo>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const comboRef = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+  if (comboRef.value) {
+    (comboRef.value as any).data = [
+      { value: 1, label: 'Item 1' },
+      { value: 2, label: 'Item 2' },
+    ];
+  }
+});
+</script>
+```
+
+## Key Considerations
+
+| Concern | Details |
+|---------|---------|
+| **isCustomElement** | Required in Vite/CLI config so Vue doesn't treat `igc-*` tags as unresolved components |
+| **Event binding** | Use `@igcInput`, `@igcChange`, etc. — not `@input` or `@change` |
+| **Property binding** | Use `:property="value"` or `v-bind:property="value"` for reactive data |
+| **Complex data** | Use a template ref and set the property in `onMounted` |
+
+## TypeScript Support
+
+The `igniteui-webcomponents` package automatically registers all component types in `HTMLElementTagNameMap`. DOM queries are fully typed:
+
+```typescript
+import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcButtonComponent);
+
+// Automatically typed as IgcButtonComponent | null
+const button = document.querySelector('igc-button');
+```
+
+## Common Issues
+
+### Vue warns "Unknown custom element: igc-button"
+
+Configure `isCustomElement` in `vite.config.ts` (or `vue.config.js`) so Vue skips resolution for `igc-*` tags.
+
+### Events not firing
+
+Use Vue's `@igcInput` / `@igcChange` syntax. Ignite UI components emit prefixed custom events — standard DOM events like `input` or `change` behave differently.
+
+### No styles applied
+
+Ensure you import a theme CSS file in `main.ts` before `createApp`. Without it, components render unstyled.
+
+### Complex data not reflecting
+
+Set objects and arrays via a `ref` in `onMounted`. Do not bind them as HTML attributes — attributes only accept serialized strings.
+
+---
+
+## Next Steps
+
+- [Optimize bundle size](../../optimize-bundle-size/) — import only the components you use
+- [Customize themes](../../customize-component-theme/) — apply your brand colors
+- [Component documentation](https://igniteui.github.io/igniteui-webcomponents) — full API reference

From c6f67d649a6d72400752736746a1f1d186c8bbeb Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Mon, 23 Feb 2026 15:33:46 +0200
Subject: [PATCH 09/17] docs: Updated theming skill

---
 skills/customize-component-theme/SKILL.md | 833 ++++++++++++----------
 1 file changed, 449 insertions(+), 384 deletions(-)

diff --git a/skills/customize-component-theme/SKILL.md b/skills/customize-component-theme/SKILL.md
index 282e10263..547f557c1 100644
--- a/skills/customize-component-theme/SKILL.md
+++ b/skills/customize-component-theme/SKILL.md
@@ -1,52 +1,25 @@
 ---
 name: customize-component-theme
-description: Customize Ignite UI Web Components styling using the igniteui-theming MCP server for AI-assisted theming
+description: Customize Ignite UI Web Components styling using CSS custom properties, optional Sass, and the igniteui-theming MCP server for AI-assisted theming
 user-invokable: true
 ---
 
-# Customize Component Theme
+# Ignite UI Web Components — Theming Skill
 
-This skill helps you customize the appearance of Ignite UI Web Components by connecting you with the **igniteui-theming MCP server** - a specialized AI assistant for theming and styling these components.
+## Description
 
-## What is the igniteui-theming MCP?
+This skill teaches AI agents how to theme Ignite UI Web Components (and React via `igniteui-react`) applications. Two approaches are supported:
 
-The igniteui-theming MCP (Model Context Protocol) server is a specialized tool that provides AI assistants like GitHub Copilot with deep knowledge about:
+- **CSS custom properties** — works in any project without additional build tooling
+- **Sass** — available when the project has Sass configured; provides the full palette/typography/elevation API
 
-- 🎨 Component theming system and CSS custom properties
-- 🎯 Available CSS parts for styling Shadow DOM internals
-- 🌗 Light/dark mode theming strategies
-- 🔧 Framework-specific styling patterns
-- 📚 Complete theming API documentation
-- 🎭 Pre-built theme configurations (Material, Fluent, Bootstrap, Indigo)
-
-Instead of manually searching documentation, the MCP server gives your AI assistant direct access to theming expertise.
-
-## Example Usage
-
-- "How do I change the button colors?"
-- "Customize the input component styling"
-- "Apply my brand colors to all components"
-- "Create a dark mode theme"
-- "Style the internal parts of a component"
-- "What CSS custom properties are available for the card component?"
-
-## Related Skills
-
-- [integrate-with-framework](../integrate-with-framework/) - Set up components first
-- [optimize-bundle-size](../optimize-bundle-size/) - Optimize after theming
-
-## When to Use
-
-- User wants to apply custom colors or styling
-- User needs to match components to their brand
-- User asks about theming or styling components
-- User wants to override default component styles
-- User needs guidance on CSS custom properties or CSS parts
+The skill also covers component-level theming, layout controls (spacing, sizing, roundness), and how to use the **Ignite UI Theming MCP server** for AI-assisted code generation.
 
 ## Prerequisites
 
-- A project with `igniteui-webcomponents` & `igniteui-theming` installed
+- A project with `igniteui-webcomponents` (or `igniteui-react`) installed
 - The **Ignite UI Theming MCP server** (`igniteui-theming`) available as a tool provider
+- **Optional**: Sass configured in the project (enables the Sass-based theming API)
 
 > **AGENT INSTRUCTION — MCP Server Setup (REQUIRED)**
 >
@@ -59,492 +32,584 @@ Instead of manually searching documentation, the MCP server gives your AI assist
 > Start the MCP server and wait for that MCP server to start before continuing the theming related work.
 > Do NOT skip this step or ask the user to do it manually.
 
-## Setup: Connect to the igniteui-theming MCP Server
-
-To enable AI-assisted theming, you need to configure your AI assistant (like GitHub Copilot, Claude Desktop, or other MCP-compatible tools) to connect to the igniteui-theming MCP server.
-
-The MCP server is included in the `igniteui-theming` package and provides tools for theme generation, color system management, and component styling guidance.
-
-### Prerequisites
-
-- **Node.js** v18 or later installed
-- **npm** or **npx** available
-- An MCP-compatible AI tool (Claude Desktop, GitHub Copilot with MCP support, etc.)
-
-### For Claude Desktop
-
-1. **Download and install Claude Desktop** from [claude.ai](https://claude.ai/download)
-
-2. **Configure the MCP server** by editing Claude's configuration file:
+## Setting Up the Theming MCP Server
 
-   **On macOS:**
-   ```bash
-   code ~/Library/Application\ Support/Claude/claude_desktop_config.json
-   ```
-
-   **On Windows:**
-   ```bash
-   code %APPDATA%\Claude\claude_desktop_config.json
-   ```
+The Ignite UI Theming MCP server enables AI assistants to generate production-ready theming code. It must be configured in your editor before the theming tools become available.
 
-   **On Linux:**
-   ```bash
-   code ~/.config/Claude/claude_desktop_config.json
-   ```
+### VS Code
 
-3. **Add the igniteui-theming MCP configuration:**
+Create or edit `.vscode/mcp.json` in your project:
 
-   ```json
-   {
-     "mcpServers": {
-       "igniteui-theming": {
-         "command": "npx",
-         "args": [
-           "-y",
-           "igniteui-theming@latest",
-           "node_modules/igniteui-theming/dist/mcp/index.js"
-         ]
-       }
-     }
-   }
-   ```
+```json
+{
+  "servers": {
+    "igniteui-theming": {
+      "command": "npx",
+      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
+    }
+  }
+}
+```
 
-   **Alternative: Use local installation**
+This works whether `igniteui-theming` is installed locally in `node_modules` or needs to be pulled from the npm registry — `npx -y` handles both cases.
 
-   If you prefer to install the package locally first:
+### Cursor
 
-   ```bash
-   npm install -g igniteui-theming
-   ```
+Create or edit `.cursor/mcp.json`:
 
-   Then configure Claude Desktop to use the installed package:
+```json
+{
+  "mcpServers": {
+    "igniteui-theming": {
+      "command": "npx",
+      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
+    }
+  }
+}
+```
 
-   ```json
-   {
-     "mcpServers": {
-       "igniteui-theming": {
-         "command": "node",
-         "args": [
-           "/usr/local/lib/node_modules/igniteui-theming/dist/mcp/index.js"
-         ]
-       }
-     }
-   }
-   ```
+### Claude Desktop
 
-   **For project-local installation:**
+Edit the Claude Desktop config file:
+- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
+- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
 
-   Install in your project:
-   ```bash
-   npm install igniteui-theming
-   ```
+```json
+{
+  "mcpServers": {
+    "igniteui-theming": {
+      "command": "npx",
+      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
+    }
+  }
+}
+```
 
-   Configure with relative path:
-   ```json
-   {
-     "mcpServers": {
-       "igniteui-theming": {
-         "command": "node",
-         "args": [
-           "node_modules/igniteui-theming/dist/mcp/index.js"
-         ],
-         "cwd": "/path/to/your/project"
-       }
-     }
-   }
-   ```
+### WebStorm / JetBrains IDEs
 
-4. **Restart Claude Desktop** to load the MCP server
+1. Go to **Settings → Tools → AI Assistant → MCP Servers**
+2. Click **+ Add MCP Server**
+3. Set Command to `npx` and Arguments to `igniteui-theming igniteui-theming-mcp`
+4. Click OK and restart the AI Assistant
 
-5. **Verify the connection:**
-   - Open Claude Desktop
-   - Look for a hammer icon (🔨) or MCP indicator in the interface
-   - Ask: "What theming tools are available?"
-   - Claude should respond with information about available tools like:
-     - `generate_theme` - Generate complete theme configurations
-     - `get_color_palette` - Get color palettes for themes
-     - `get_component_info` - Get component styling information
-     - And more...
+### Verifying the Setup
 
-### For GitHub Copilot in VS Code
+After configuring the MCP server, ask your AI assistant:
 
-**Note:** GitHub Copilot's MCP support may vary by version. Check the [latest Copilot documentation](https://code.visualstudio.com/docs/copilot/chat) for current MCP support status.
+> "Detect which Ignite UI platform my project uses"
 
-If MCP support is available, configure it similarly to Claude Desktop using VS Code's MCP settings.
+If the MCP server is running, the `detect_platform` tool will analyze your `package.json` and return the detected platform (e.g., `webcomponents`).
 
-### For Other MCP-Compatible Tools
+## Theming Architecture
 
-Consult your tool's documentation for MCP server configuration. Use these connection details:
+The Ignite UI theming system is built on four pillars:
 
-- **Package:** `igniteui-theming`
-- **MCP Server Path:** `node_modules/igniteui-theming/dist/mcp/index.js`
-- **Installation:** `npm install igniteui-theming`
-- **Source:** [GitHub - IgniteUI/igniteui-theming](https://github.com/IgniteUI/igniteui-theming)
-- **MCP Documentation:** [MCP README](https://github.com/IgniteUI/igniteui-theming/blob/master/src/mcp/README.md)
+| Concept | Purpose |
+|---|---|
+| **Palette** | Color system with primary, secondary, surface, gray, info, success, warn, error families, each with shades 50–900 + accents A100–A700 |
+| **Typography** | Font family, type scale (h1–h6, subtitle, body, button, caption, overline) |
+| **Elevations** | Box-shadow levels 0–24 for visual depth |
+| **Schema** | Per-component recipes mapping palette colors to component tokens |
 
-## How to Use the MCP Server for Theming
+### Design Systems
 
-Once connected, your AI assistant has access to specialized theming tools through the MCP server. The server provides several tools that can be invoked to help with theming tasks:
+Four built-in design systems are available:
 
-### Available Tools
+- **Material** (default) — Material Design 3
+- **Bootstrap** — Bootstrap-inspired
+- **Fluent** — Microsoft Fluent Design
+- **Indigo** — Infragistics Indigo Design
 
-- **`generate_theme`** - Creates complete theme configurations based on your requirements
-- **`get_color_palette`** - Retrieves color palettes and provides color system guidance
-- **`get_component_info`** - Returns styling information for specific components
+Each has light and dark variants (e.g., `$light-material-schema`, `$dark-fluent-schema`).
 
-### Getting Started with Basic Theming
+## Pre-built Themes
 
-**Ask natural questions:**
+The quickest way to theme an app is to import a pre-built CSS file in your entry point:
 
+```typescript
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 ```
-"Generate a theme with primary color #FF5733"
 
-"How do I change the primary color of all Ignite UI components to #FF5733?"
+Available pre-built CSS files:
+
+| Import path | Theme |
+|---|---|
+| `igniteui-webcomponents/themes/light/bootstrap.css` | Bootstrap Light |
+| `igniteui-webcomponents/themes/dark/bootstrap.css` | Bootstrap Dark |
+| `igniteui-webcomponents/themes/light/material.css` | Material Light |
+| `igniteui-webcomponents/themes/dark/material.css` | Material Dark |
+| `igniteui-webcomponents/themes/light/fluent.css` | Fluent Light |
+| `igniteui-webcomponents/themes/dark/fluent.css` | Fluent Dark |
+| `igniteui-webcomponents/themes/light/indigo.css` | Indigo Light |
+| `igniteui-webcomponents/themes/dark/indigo.css` | Indigo Dark |
 
-"Show me how to create a custom theme with my brand colors"
+## Custom Theme via CSS Custom Properties
 
-"What CSS custom properties control the button appearance?"
+> No Sass required. Works in any project after importing a pre-built theme.
 
-"How do I make all inputs larger?"
+After importing a pre-built theme, override individual design tokens with CSS custom properties on `:root` or a scoped selector:
+
+```css
+:root {
+  /* Override palette hue/saturation/lightness channels */
+  --ig-primary-h: 211deg;
+  --ig-primary-s: 100%;
+  --ig-primary-l: 50%;
+
+  --ig-secondary-h: 33deg;
+  --ig-secondary-s: 100%;
+  --ig-secondary-l: 50%;
+}
 ```
 
-**The MCP server provides:**
-- ✅ Complete theme generation using the `generate_theme` tool
-- ✅ Exact CSS custom property names
-- ✅ Complete code examples
-- ✅ HSL color conversion help
-- ✅ Component-specific styling guidance
+To scope overrides to a specific container:
 
-### Working with Specific Components
+```css
+.admin-panel {
+  --ig-primary-h: 260deg;
+  --ig-primary-s: 60%;
+  --ig-primary-l: 45%;
+}
+```
 
-**Ask component-specific questions:**
+For dark mode, either import a dark theme CSS file directly or toggle overrides with a class or media query:
 
+```css
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ig-surface-h: 0deg;
+    --ig-surface-s: 0%;
+    --ig-surface-l: 7%;
+  }
+}
+
+/* Or manually with a class */
+.dark-theme {
+  --ig-surface-h: 0deg;
+  --ig-surface-s: 0%;
+  --ig-surface-l: 7%;
+}
 ```
-"Get component info for igc-button"
 
-"How do I style the igc-button component?"
+## Custom Theme via Sass
 
-"What CSS parts are available for igc-input?"
+> Requires Sass configured in the project. First check whether the project has a Sass setup (e.g., a `styles.scss` entry file, `sass` in `devDependencies`, or a Vite/webpack Sass plugin).
 
-"Show me all theming options for igc-card"
+The Sass API for `igniteui-webcomponents` uses `@use 'igniteui-theming'` with individual mixins — **not** the Angular-specific `core()` / `theme()` combined mixins.
 
-"How do I customize the igc-select dropdown?"
-```
+```scss
+@use 'igniteui-theming' as *;
+
+// 1. Define a palette
+$my-palette: palette(
+  $primary: #1976D2,
+  $secondary: #FF9800,
+  $surface: #FAFAFA
+);
 
-**The MCP server knows:**
-- All available CSS custom properties per component (via `get_component_info`)
-- CSS part names and their purpose
-- Component-specific theming patterns
-- Common customization scenarios
+// 2. Apply the palette
+@include palette($my-palette);
 
-### Creating Complete Themes
+// 3. Optional: Typography
+@include typography($font-family: "'Roboto', sans-serif");
 
-**Request theme generation:**
+// 4. Optional: Elevations
+@include elevations();
 
+// 5. Optional: Spacing
+@include spacing();
 ```
-"Generate a dark mode theme for my app"
 
-"Create a Material Design theme with purple as primary color"
+For dark themes, use a dark surface color and a dark schema:
 
-"Generate a theme matching these brand colors: #1E3A8A (primary), #10B981 (success)"
+```scss
+@use 'igniteui-theming' as *;
 
-"Generate a Fluent-style theme configuration"
+$dark-palette: palette(
+  $primary: #90CAF9,
+  $secondary: #FFB74D,
+  $surface: #121212
+);
 
-"Create a custom theme with these HSL values: h=211, s=100%, l=50%"
+@include palette($dark-palette, $schema: $dark-material-schema);
 ```
 
-**The MCP server can:**
-- Generate complete theme configurations using the `generate_theme` tool
-- Provide light and dark mode variants with the `get_color_palette` tool
-- Create themed component examples
-- Suggest complementary color palettes
-- Output ready-to-use CSS custom properties
+To scope a Sass theme to a container:
 
-### Framework-Specific Theming
+```scss
+.admin-panel {
+  @include palette($admin-palette, $schema: $light-indigo-schema);
+}
+```
 
-**Get framework-tailored advice:**
+## Component-Level Theming
 
+Override individual component appearance using component theme functions and the `tokens` mixin.
+
+> **AGENT INSTRUCTION — No Hardcoded Colors (CRITICAL)**
+>
+> Once a palette has been generated (via `palette()` in Sass or `create_palette` / `create_theme` via MCP),
+> **every color reference MUST come from the generated palette tokens** — never hardcode hex/RGB/HSL values.
+>
+> Use `var(--ig-primary-500)`, `var(--ig-secondary-300)`, `var(--ig-surface-500)`, etc. in CSS,
+> or the `get_color` MCP tool to obtain the correct token reference.
+>
+> **WRONG** (hardcoded hex — breaks theme switching, ignores the palette):
+> ```css
+> igc-avatar {
+>   --ig-avatar-background: #E91E63;  /* ✗ hardcoded */
+>   --ig-avatar-color: #FFFFFF;       /* ✗ hardcoded */
+> }
+> ```
+>
+> **RIGHT — CSS** (palette token — stays in sync with the theme):
+> ```css
+> igc-avatar {
+>   --ig-avatar-background: var(--ig-primary-500);
+>   --ig-avatar-color: var(--ig-primary-500-contrast);
+> }
+> ```
+>
+> **RIGHT — Sass** (when Sass is configured):
+> ```scss
+> $custom-avatar: avatar-theme(
+>   $schema: $light-material-schema,
+>   $background: var(--ig-primary-500),
+>   $color: var(--ig-primary-500-contrast)
+> );
+> ```
+>
+> This applies to **all** style code: component themes, custom CSS rules, and inline styles.
+> The only place raw hex values belong is the **initial `palette()` call** that seeds the color system.
+> Everything downstream must reference the palette.
+
+```css
+igc-avatar {
+  --ig-avatar-background: var(--ig-primary-500);
+  --ig-avatar-color: var(--ig-primary-500-contrast);
+}
 ```
-"How do I apply custom CSS properties to components in React?"
 
-"Show me Angular template syntax for theming components"
+When Sass is available, use the component theme function and `tokens` mixin:
 
-"What's the best way to theme components in Vue 3?"
+```scss
+@use 'igniteui-theming' as *;
 
-"Help me set up dynamic theming in my Next.js app"
-```
+$custom-avatar: avatar-theme(
+  $schema: $light-material-schema,
+  $background: var(--ig-primary-500),
+  $color: var(--ig-primary-500-contrast)
+);
 
-**The MCP server provides:**
-- Framework-specific code examples
-- Integration patterns
-- Dynamic theming strategies
-- Best practices per framework
+igc-avatar {
+  @include tokens($custom-avatar);
+}
+```
 
-## Common Theming Workflows
+### Discovering Available Tokens
 
-### Workflow 1: Brand Color Application
+Each component has its own set of design tokens (themeable CSS custom properties). Before theming a component, you must know which tokens exist. Use the **MCP tool** `get_component_design_tokens` to discover them.
 
-1. **Ask the MCP:** "Generate a theme with primary color #0066CC for Ignite UI components"
+### Compound Components
 
-2. **The MCP uses its tools** to:
-   - Use `generate_theme` to create a complete theme configuration
-   - Convert hex to HSL automatically
-   - Generate CSS custom properties
-   - Provide implementation guidance
+Some components (e.g., `combo`, `grid`, `date-picker`, `select`) are **compound** — they contain internal child components, each requiring their own theme. For example, `date-picker` uses `calendar`, `flat-button`, and `input-group` internally.
 
-3. **Receive complete code** including:
-   - CSS custom property definitions
-   - Where to place the theme CSS
-   - How to test the changes
+Workflow for compound components:
+1. Call `get_component_design_tokens` for the parent (e.g., `date-picker`)
+2. The response lists related themes and scope selectors
+3. Call `create_component_theme` for each child, using the parent's selector as the wrapper
 
-4. **Apply the theme** using the provided code
+## Layout Controls
 
-5. **Iterate** by asking follow-up questions like:
-   - "How do I make it darker for hover states?"
-   - "Generate success and error colors to match this theme"
+### Sizing
 
-### Workflow 2: Component-Specific Customization
+Controls the size of components via `--ig-size` (values: 1 = small, 2 = medium, 3 = large):
 
-1. **Ask the MCP:** "Get styling information for igc-card component"
+```css
+/* Global */
+:root { --ig-size: 2; }
 
-2. **The MCP uses `get_component_info`** to provide:
-   - Available CSS custom properties
-   - CSS parts for styling with `::part()`
-   - Example customizations
-   - Browser compatibility notes
+/* Component-scoped */
+igc-grid { --ig-size: 1; }
+```
 
-3. **Ask for customization:** "I want rounded corners and a shadow on the card"
+### Spacing
 
-4. **Receive specific code** for your requirement
+Controls internal padding via `--ig-spacing` (1 = default, 0.5 = compact, 2 = spacious):
 
-5. **Implement and refine** using the guidance
+```css
+:root { --ig-spacing: 1; }
+.compact-section { --ig-spacing: 0.75; }
+```
 
-### Workflow 3: Dark Mode Implementation
+### Roundness
 
-1. **Ask the MCP:** "Generate a dark mode theme for my Ignite UI components"
+Controls border-radius via `--ig-radius-factor` (0 = square, 1 = maximum radius):
 
-2. **The MCP uses `generate_theme`** to provide:
-   - Complete dark mode configuration
-   - CSS custom property setup for light/dark variants
-   - Media query patterns with `prefers-color-scheme`
-   - JavaScript toggle implementation (if needed)
-   - Framework integration examples
+```css
+:root { --ig-radius-factor: 1; }
+igc-avatar { --ig-radius-factor: 0.5; }
+```
 
-3. **Receive a complete implementation:**
-   - Light and dark theme CSS
-   - Toggle mechanism code
-   - Best practices for theme switching
+## Using the Theming MCP Server
 
-4. **Deploy** with confidence using tested patterns
+The Ignite UI Theming MCP server provides tools for AI-assisted theme code generation.
 
-### Workflow 4: Debugging Styles
+> **IMPORTANT — File Safety Rule**: When generating or updating theme code, **never overwrite existing style files directly**. Instead, always **propose the changes as an update** and let the user review and approve before writing to disk. If a `styles.scss` (or any target file) already exists, show the generated code as a diff or suggestion rather than replacing the file contents. This prevents accidental loss of custom styles the user has already written.
 
-1. **Ask the MCP:** "Why isn't my CSS applying to the button's text?"
+Always follow this workflow:
 
-2. **Get diagnostic help:**
-   - Shadow DOM explanation
-   - Correct selector syntax (use `::part()` or CSS custom properties)
-   - Available styling approaches
-   - Browser DevTools tips
+### Step 1 — Detect Platform
 
-3. **Ask for component details:** "Get component info for igc-button to see available parts"
+```
+Tool: detect_platform
+```
+This auto-detects `webcomponents` from `package.json` and sets the correct import paths.
 
-4. **Resolve the issue** with expert guidance
+### Step 2 — Generate a Full Theme
 
-## What the MCP Server Knows
+```
+Tool: create_theme
+Params: {
+  platform: "webcomponents",
+  designSystem: "material",
+  primaryColor: "#1976D2",
+  secondaryColor: "#FF9800",
+  surfaceColor: "#FAFAFA",
+  variant: "light",
+  fontFamily: "'Roboto', sans-serif",
+  includeTypography: true,
+  includeElevations: true
+}
+```
 
-The igniteui-theming MCP server (located at `igniteui-theming/dist/mcp/index.js`) provides specialized tools and comprehensive knowledge for theming Ignite UI Web Components:
+Generates a complete Sass file with palette, typography, elevations, and the `theme()` mixin call.
 
-### Available MCP Tools
+### Step 3 — Customize Individual Components
 
-- **`generate_theme`** - Generate complete theme configurations with custom colors and styles
-- **`get_color_palette`** - Retrieve color palettes and color system information
-- **`get_component_info`** - Get detailed styling information for specific components
-- **Theme analysis tools** - Analyze and optimize theme configurations
-- **CSS custom property lookup** - Find available CSS variables for components
+```
+Tool: get_component_design_tokens
+Params: { component: "grid" }
+```
 
-### CSS Custom Properties (Design Tokens)
+Then use **palette token references** (not hardcoded hex values) for every color:
 
-### CSS Custom Properties (Design Tokens)
+```
+Tool: create_component_theme
+Params: {
+  platform: "webcomponents",
+  designSystem: "material",
+  variant: "light",
+  component: "grid",
+  tokens: {
+    "header-background": "var(--ig-primary-50)",
+    "header-text-color": "var(--ig-primary-800)"
+  }
+}
+```
 
-- **Color system:**
-  - `--ig-primary-h/s/l` - Primary color (HSL)
-  - `--ig-surface-h/s/l` - Surface color
-  - `--ig-error-h/s/l`, `--ig-success-h/s/l`, `--ig-warning-h/s/l`, `--ig-info-h/s/l`
-  - And many more semantic colors
+> **Reminder**: After a palette is generated, all token values passed to
+> `create_component_theme` must reference palette CSS custom properties
+> (e.g., `var(--ig-primary-500)`, `var(--ig-secondary-A200)`,
+> `var(--ig-gray-100)`). Never pass raw hex values like `"#E3F2FD"`.
 
-- **Typography:**
-  - `--ig-font-family` - Base font
-  - `--ig-body-1-font-size`, `--ig-h1-font-size`, etc.
-  - Font weight and line height tokens
+### Step 4 — Generate a Palette
 
-- **Spacing & Layout:**
-  - `--ig-spacing` - Base spacing unit
-  - `--ig-size` - Component size variants
-  - `--ig-radius` - Border radius
+For simple mid-luminance base colors:
 
-### CSS Parts (Shadow DOM Styling)
+```
+Tool: create_palette
+Params: {
+  platform: "webcomponents",
+  primary: "#1976D2",
+  secondary: "#FF9800",
+  surface: "#FAFAFA",
+  variant: "light"
+}
+```
 
-- Part names for all components
-- Which parts control which visual elements
-- How to style parts with `::part()` selector
-- Common part styling patterns
+For brand-specific exact shade values, use `create_custom_palette` with `mode: "explicit"` for full control over each shade.
 
-### Pre-Built Themes
+### Step 5 — Adjust Layout
 
-- Material Design theme
-- Fluent Design theme
-- Bootstrap theme
-- Indigo theme
-- Custom theme creation patterns
+By default, layout tools emit **CSS**. If the project has Sass configured, add `output: "sass"` to get Sass output:
 
-### Advanced Theming
+```
+Tool: set_size      → { size: "medium" }                                   # CSS (default)
+Tool: set_size      → { size: "medium", output: "sass" }                   # Sass
+Tool: set_spacing   → { spacing: 0.75, component: "grid" }                 # CSS (default)
+Tool: set_spacing   → { spacing: 0.75, component: "grid", output: "sass" } # Sass
+Tool: set_roundness → { radiusFactor: 0.8 }                                # CSS (default)
+Tool: set_roundness → { radiusFactor: 0.8, output: "sass" }                # Sass
+```
 
-- Dynamic theme switching
-- CSS-in-JS theming
-- Theme generation from brand guidelines
-- Color palette generation
-- Accessibility considerations (WCAG contrast)
+### Step 6 — Reference Palette Colors (MANDATORY for All Color Usage)
 
-## Benefits of Using the MCP Server
+After a palette is generated, **always** use the `get_color` tool to obtain the correct CSS custom property reference. Never hardcode hex/RGB/HSL values in component themes, custom CSS, or Sass variables.
 
-### For Developers
+```
+Tool: get_color
+Params: { color: "primary", variant: "600" }
+→ var(--ig-primary-600)
 
-✅ **Instant answers** - No documentation searching needed
-✅ **Context-aware** - Knows your framework and setup
-✅ **Code examples** - Get working code immediately
-✅ **Best practices** - Learn proper patterns as you go
-✅ **Error prevention** - Avoid common pitfalls
+Params: { color: "primary", variant: "600", contrast: true }
+→ var(--ig-primary-600-contrast)
 
-### For Teams
+Params: { color: "primary", opacity: 0.5 }
+→ hsl(from var(--ig-primary-500) h s l / 0.5)
+```
 
-✅ **Consistent theming** - Everyone uses the same patterns
-✅ **Faster onboarding** - New team members get guided help
-✅ **Knowledge sharing** - AI assistant knows team conventions
-✅ **Documentation as code** - Themes are self-documenting
+Use these token references everywhere:
+- Component theme `tokens` values
+- Custom CSS rules (`color`, `background`, `border-color`, `fill`, `stroke`, etc.)
 
-## Troubleshooting MCP Connection
+The **only** place raw hex values are acceptable is in the initial `palette()` call or the `create_palette` / `create_theme` MCP tool inputs that seed the color system.
 
-### Issue: MCP server not showing up
+### Loading Reference Data
 
-**Check:**
-1. Configuration file syntax is valid JSON
-2. File is saved in the correct location
-3. Claude Desktop (or your tool) has been restarted
-4. You have internet connection (for npx download)
-5. Node.js v18+ is installed
+Use `read_resource` with these URIs for preset values and documentation:
 
-**Solution:**
-```bash
-# Verify Node.js version
-node --version
+| URI | Content |
+|---|---|
+| `theming://presets/palettes` | Preset palette colors |
+| `theming://presets/typography` | Typography presets |
+| `theming://presets/elevations` | Elevation shadow presets |
+| `theming://guidance/colors/usage` | Which shades for which purpose |
+| `theming://guidance/colors/roles` | Semantic color roles |
+| `theming://guidance/colors/rules` | Light/dark theme rules |
+| `theming://platforms/webcomponents` | Web Components platform specifics |
+| `theming://platforms` | All supported platforms |
 
-# Test running the MCP server directly
-npm install igniteui-theming
-node node_modules/igniteui-theming/dist/mcp/index.js
-```
+## Referencing Colors in Custom Styles
 
-### Issue: "Cannot find module" errors
+After a theme is applied, the palette is available as CSS custom properties on `:root`. Use these tokens in all custom CSS — never introduce standalone hex/RGB variables for colors that the palette already provides.
 
-**Solution:**
-```bash
-# Install the package locally
-npm install igniteui-theming
+### Correct: Palette Tokens
 
-# Update your config to use the local path
-{
-  "mcpServers": {
-    "igniteui-theming": {
-      "command": "node",
-      "args": ["node_modules/igniteui-theming/dist/mcp/index.js"]
-    }
-  }
+```css
+/* All colors come from the theme — respects palette changes and dark/light switching */
+.sidebar {
+  background: var(--ig-surface-500);
+  color: var(--ig-gray-900);
+  border-right: 1px solid var(--ig-gray-200);
 }
-```
 
-### Issue: "Permission denied" errors
-
-**On macOS/Linux:**
-```bash
-# Ensure the config file is readable
-chmod 644 ~/.config/Claude/claude_desktop_config.json
+.accent-badge {
+  background: var(--ig-secondary-500);
+  color: var(--ig-secondary-500-contrast);
+}
 
-# Ensure the MCP server file is executable
-chmod +x node_modules/igniteui-theming/dist/mcp/index.js
+.hero-section {
+  /* Semi-transparent primary overlay */
+  background: hsl(from var(--ig-primary-500) h s l / 0.12);
+}
 ```
 
-### Issue: MCP server crashes or disconnects
-
-**Check:**
-1. Node.js is installed (v18 or later recommended)
-2. The `igniteui-theming` package is properly installed
-3. Firewall isn't blocking the connection
-4. Check Claude Desktop logs for error messages
+### Incorrect: Hardcoded Values
 
-**Debug with verbose output:**
-```bash
-# Run the server manually to see error messages
-node node_modules/igniteui-theming/dist/mcp/index.js
+```css
+/* WRONG — these break when the palette changes and ignore dark/light mode */
+.sidebar {
+  background: #F0F5FA;  /* ✗ not a palette token */
+  color: #333;          /* ✗ not a palette token */
+}
 ```
 
-### Issue: Tools not appearing in Claude
+### When Raw Hex Values Are OK
 
-**Solution:**
-After configuring the server, restart Claude Desktop completely (quit and reopen). The MCP tools should appear under the hammer icon (🔨) in the chat interface.
+Raw hex values are acceptable **only** in these contexts:
 
-**Available tools should include:**
-- `generate_theme` - Generate theme configurations
-- `get_color_palette` - Retrieve color palettes
-- `get_component_info` - Get component styling details
-- Additional theming tools
+1. **`palette()` call** — the initial seed colors that generate the full palette
+2. **`create_palette` / `create_theme` MCP tool inputs** — the base colors passed to the tool
+3. **Non-palette decorative values** — e.g., a one-off SVG illustration color that intentionally stays fixed regardless of theme
 
-For more detailed troubleshooting, see the [MCP documentation](https://github.com/IgniteUI/igniteui-theming/blob/master/src/mcp/README.md).
+Everything else must use `var(--ig-<family>-<shade>)` tokens.
 
-## Alternative: Manual Theming Reference
+## Common Patterns
 
-If you cannot use the MCP server, here are the basic theming approaches:
+### Switching Between Light and Dark Themes — CSS approach
 
-### CSS Custom Properties
+Import the appropriate theme CSS and toggle with a class or media query:
+
+```typescript
+// In your entry point — choose one variant as the default
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+```
 
 ```css
-:root {
-  --ig-primary-h: 211deg;
-  --ig-primary-s: 100%;
-  --ig-primary-l: 50%;
+/* Override surface tokens for dark mode */
+.dark-theme {
+  --ig-surface-h: 0deg;
+  --ig-surface-s: 0%;
+  --ig-surface-l: 7%;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ig-surface-h: 0deg;
+    --ig-surface-s: 0%;
+    --ig-surface-l: 7%;
+  }
 }
 ```
 
-### CSS Parts
+Or dynamically swap the stylesheet at runtime:
 
-```css
-igc-button::part(base) {
-  padding: 12px 24px;
+```typescript
+function setTheme(variant: 'light' | 'dark', design = 'bootstrap') {
+  const link = document.getElementById('igc-theme') as HTMLLinkElement;
+  link.href = `node_modules/igniteui-webcomponents/themes/${variant}/${design}.css`;
 }
 ```
 
-### For complete theming documentation
-Visit the [official documentation](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/themes/overview).
+### Switching Between Light and Dark Themes — Sass approach
+
+When Sass is configured, define both palettes and apply them under separate selectors:
 
-However, we **strongly recommend using the MCP server** for:
-- Interactive guidance
-- Context-aware help
-- Framework-specific examples
-- Real-time problem solving
+```scss
+@use 'igniteui-theming' as *;
 
-## Next Steps
+$light-palette: palette($primary: #1976D2, $secondary: #FF9800, $surface: #FAFAFA);
+$dark-palette: palette($primary: #90CAF9, $secondary: #FFB74D, $surface: #121212);
 
-1. **Set up the MCP server** using the instructions above
-2. **Ask your AI assistant** theming questions naturally
-3. **Iterate quickly** with instant feedback
-4. **Share your theme** configurations with your team
+@include typography($font-family: "'Roboto', sans-serif");
+@include elevations();
+
+// Light is default
+@include palette($light-palette, $schema: $light-material-schema);
+
+// Dark via class on <body> or <html>
+.dark-theme {
+  @include palette($dark-palette, $schema: $dark-material-schema);
+}
+```
 
-For component integration, see the [integrate-with-framework](../integrate-with-framework/) skill.
+### Scoping a Theme to a Container — CSS approach
 
-## Additional Resources
+```css
+.admin-panel {
+  --ig-primary-h: 260deg;
+  --ig-primary-s: 60%;
+  --ig-primary-l: 45%;
+}
+```
+
+### Scoping a Theme to a Container — Sass approach
+
+```scss
+.admin-panel {
+  @include palette($admin-palette, $schema: $light-indigo-schema);
+}
+```
 
-- [igniteui-theming Package on GitHub](https://github.com/IgniteUI/igniteui-theming)
-- [igniteui-theming MCP Documentation](https://github.com/IgniteUI/igniteui-theming/blob/master/src/mcp/README.md)
-- [Model Context Protocol Documentation](https://modelcontextprotocol.io/)
-- [Claude Desktop Download](https://claude.ai/download)
-- [Ignite UI Theming Documentation](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/themes/overview)
-- [igniteui-webcomponents on npm](https://www.npmjs.com/package/igniteui-webcomponents)
+## Key Rules
+
+1. **Never overwrite existing files directly** — always propose theme code as an update for user review; do not replace existing style files without confirmation
+2. **Always call `detect_platform` first** when using MCP tools
+3. **Always call `get_component_design_tokens` before `create_component_theme`** to discover valid token names
+4. **Palette shades 50 = lightest, 900 = darkest** for all chromatic colors — never invert for dark themes (only gray inverts)
+5. **Surface color must match the variant** — light color for `light`, dark color for `dark`
+6. **Sass only**: Use `@include palette()`, `@include typography()`, and `@include elevations()` individually — `@use 'igniteui-theming'` is the correct module for web components and React (not `igniteui-angular/theming`); the Angular-specific `core()` / `theme()` combined mixins do **not** apply here
+7. **Sass only**: 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

From 703b120ea752c5999d52f465f7b64df435f3029f Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Tue, 24 Feb 2026 16:14:24 +0200
Subject: [PATCH 10/17] build: Include skills directory in the build output

---
 scripts/build.mjs | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/scripts/build.mjs b/scripts/build.mjs
index aad7a65da..2927b45e4 100644
--- a/scripts/build.mjs
+++ b/scripts/build.mjs
@@ -1,5 +1,5 @@
 import { exec as _exec } from 'node:child_process';
-import { copyFile, writeFile } from 'node:fs/promises';
+import { copyFile, writeFile, cp } from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { promisify } from 'node:util';
@@ -87,5 +87,9 @@ async function runTask(tag, cmd) {
     ])
   );
 
+  await runTask('Copy skills directory', () => {
+    cp('skills', DEST_DIR('skills'), { recursive: true });
+  });
+
   report.success('Done! 🎉');
 })();

From 249e7c0c9c672f858ee1868773c7e005b8117cb5 Mon Sep 17 00:00:00 2001
From: damyanpetev <damyanpetev@users.noreply.github.com>
Date: Tue, 24 Feb 2026 19:57:44 +0200
Subject: [PATCH 11/17] docs: fix links in readme and skills

---
 README.md                                |  2 +-
 skills/choose-components/SKILL.md        | 10 +++++-----
 skills/integrate-with-framework/SKILL.md |  4 ++--
 skills/optimize-bundle-size/SKILL.md     |  4 ++--
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index b6a2c3a6d..89a50cdb5 100644
--- a/README.md
+++ b/README.md
@@ -240,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
diff --git a/skills/choose-components/SKILL.md b/skills/choose-components/SKILL.md
index 9a1125433..8d1f47452 100644
--- a/skills/choose-components/SKILL.md
+++ b/skills/choose-components/SKILL.md
@@ -21,9 +21,9 @@ This skill helps AI agents and developers identify the best Ignite UI components
 
 ## Related Skills
 
-- [integrate-with-framework](../integrate-with-framework/) — Set up chosen components in React, Angular, Vue, or vanilla JS
-- [customize-component-theme](../customize-component-theme/) — Style and theme the components you select
-- [optimize-bundle-size](../optimize-bundle-size/) — Import only the components you actually use
+- [integrate-with-framework](../integrate-with-framework/SKILL.md) — Set up chosen components in React, Angular, Vue, or vanilla JS
+- [customize-component-theme](../customize-component-theme/SKILL.md) — Style and theme the components you select
+- [optimize-bundle-size](../optimize-bundle-size/SKILL.md) — Import only the components you actually use
 
 ## When to Use
 
@@ -131,7 +131,7 @@ All inputs are form-associated and integrate natively with `<form>`.
 |---|---|---|---|
 | 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/notifications/toast) |
+| 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
 
@@ -320,7 +320,7 @@ defineComponents(
 ### "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
-3. Consider composing two simpler components (e.g., `<igc-card>` + `<igc-list>` for a list card)
+2. Consider composing two simpler components (e.g., `<igc-card>` + `<igc-list>` for a list card)
 
 ### "Which grid should I use?"
 
diff --git a/skills/integrate-with-framework/SKILL.md b/skills/integrate-with-framework/SKILL.md
index 4e9b95ff9..0e3d680ee 100644
--- a/skills/integrate-with-framework/SKILL.md
+++ b/skills/integrate-with-framework/SKILL.md
@@ -17,8 +17,8 @@ This skill helps users integrate Ignite UI Web Components into their application
 
 ## Related Skills
 
-- [optimize-bundle-size](../optimize-bundle-size/) - Reduce bundle size after integration
-- [customize-component-theme](../customize-component-theme/) - Style components after setup
+- [optimize-bundle-size](../optimize-bundle-size/SKILL.md) - Reduce bundle size after integration
+- [customize-component-theme](../customize-component-theme/SKILL.md) - Style components after setup
 
 ## When to Use
 
diff --git a/skills/optimize-bundle-size/SKILL.md b/skills/optimize-bundle-size/SKILL.md
index 9de0ed30e..632b190e0 100644
--- a/skills/optimize-bundle-size/SKILL.md
+++ b/skills/optimize-bundle-size/SKILL.md
@@ -18,8 +18,8 @@ This skill helps users minimize their application's bundle size when using Ignit
 
 ## Related Skills
 
-- [integrate-with-framework](../integrate-with-framework/) - Proper integration setup
-- [customize-component-theme](../customize-component-theme/) - Theming after optimization
+- [integrate-with-framework](../integrate-with-framework/SKILL.md) - Proper integration setup
+- [customize-component-theme](../customize-component-theme/SKILL.md) - Theming after optimization
 
 ## When to Use
 

From 733c5f479f69df0d997402a5be9eb2154c166578 Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Wed, 25 Feb 2026 09:17:54 +0200
Subject: [PATCH 12/17] docs: Updated skills for Ignite UI for Web Components

- Added prefix "igniteui-wc-" to skill directories and files to better reflect the content and improve organization.
- Updated README.md to reflect the changes in skill directories and files.
---
 skills/README.md                                       |  8 ++++----
 .../SKILL.md                                           | 10 +++++-----
 .../SKILL.md                                           |  2 +-
 .../SKILL.md                                           |  6 +++---
 .../references/angular.md                              |  0
 .../references/react.md                                |  0
 .../references/vanilla-js.md                           |  0
 .../references/vue.md                                  |  0
 .../SKILL.md                                           | 10 +++++-----
 9 files changed, 18 insertions(+), 18 deletions(-)
 rename skills/{choose-components => igniteui-wc-choose-components}/SKILL.md (97%)
 rename skills/{customize-component-theme => igniteui-wc-customize-component-theme}/SKILL.md (99%)
 rename skills/{integrate-with-framework => igniteui-wc-integrate-with-framework}/SKILL.md (91%)
 rename skills/{integrate-with-framework => igniteui-wc-integrate-with-framework}/references/angular.md (100%)
 rename skills/{integrate-with-framework => igniteui-wc-integrate-with-framework}/references/react.md (100%)
 rename skills/{integrate-with-framework => igniteui-wc-integrate-with-framework}/references/vanilla-js.md (100%)
 rename skills/{integrate-with-framework => igniteui-wc-integrate-with-framework}/references/vue.md (100%)
 rename skills/{optimize-bundle-size => igniteui-wc-optimize-bundle-size}/SKILL.md (96%)

diff --git a/skills/README.md b/skills/README.md
index 32d8ab5dc..fc3eda53b 100644
--- a/skills/README.md
+++ b/skills/README.md
@@ -10,10 +10,10 @@ Skills are structured instructions that help AI agents understand and execute co
 
 | Skill                                                       | Description                                                                        | Use When                              |
 | ----------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------- |
-| [choose-components](./choose-components/)                   | Identify the right components for a UI pattern and navigate to official docs/demos | Deciding which components to use      |
-| [integrate-with-framework](./integrate-with-framework/)     | Integrate components into React, Angular, Vue, or vanilla JS applications          | Setting up components in your project |
-| [customize-component-theme](./customize-component-theme/)   | Customize styling using CSS custom properties, parts, and theming system           | Applying custom brand colors/styles   |
-| [optimize-bundle-size](./optimize-bundle-size/)             | Reduce bundle size by importing only needed components and lazy loading            | Optimizing production performance     |
+| [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
 
diff --git a/skills/choose-components/SKILL.md b/skills/igniteui-wc-choose-components/SKILL.md
similarity index 97%
rename from skills/choose-components/SKILL.md
rename to skills/igniteui-wc-choose-components/SKILL.md
index 8d1f47452..551b51c25 100644
--- a/skills/choose-components/SKILL.md
+++ b/skills/igniteui-wc-choose-components/SKILL.md
@@ -1,5 +1,5 @@
 ---
-name: choose-components
+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
 ---
@@ -21,9 +21,9 @@ This skill helps AI agents and developers identify the best Ignite UI components
 
 ## Related Skills
 
-- [integrate-with-framework](../integrate-with-framework/SKILL.md) — Set up chosen components in React, Angular, Vue, or vanilla JS
-- [customize-component-theme](../customize-component-theme/SKILL.md) — Style and theme the components you select
-- [optimize-bundle-size](../optimize-bundle-size/SKILL.md) — Import only the components you actually use
+- [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
 
@@ -334,7 +334,7 @@ defineComponents(
 
 ### "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 [integrate-with-framework](../integrate-with-framework/) skill for setup.
+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?"
 
diff --git a/skills/customize-component-theme/SKILL.md b/skills/igniteui-wc-customize-component-theme/SKILL.md
similarity index 99%
rename from skills/customize-component-theme/SKILL.md
rename to skills/igniteui-wc-customize-component-theme/SKILL.md
index 547f557c1..a5dddd3fa 100644
--- a/skills/customize-component-theme/SKILL.md
+++ b/skills/igniteui-wc-customize-component-theme/SKILL.md
@@ -1,5 +1,5 @@
 ---
-name: customize-component-theme
+name: igniteui-wc-customize-component-theme
 description: Customize Ignite UI Web Components styling using CSS custom properties, optional Sass, and the igniteui-theming MCP server for AI-assisted theming
 user-invokable: true
 ---
diff --git a/skills/integrate-with-framework/SKILL.md b/skills/igniteui-wc-integrate-with-framework/SKILL.md
similarity index 91%
rename from skills/integrate-with-framework/SKILL.md
rename to skills/igniteui-wc-integrate-with-framework/SKILL.md
index 0e3d680ee..ce74f0c3e 100644
--- a/skills/integrate-with-framework/SKILL.md
+++ b/skills/igniteui-wc-integrate-with-framework/SKILL.md
@@ -1,5 +1,5 @@
 ---
-name: integrate-with-framework
+name: igniteui-wc-integrate-with-framework
 description: Integrate igniteui-webcomponents into React, Angular, Vue, or vanilla JS applications with framework-specific configurations
 user-invokable: true
 ---
@@ -17,8 +17,8 @@ This skill helps users integrate Ignite UI Web Components into their application
 
 ## Related Skills
 
-- [optimize-bundle-size](../optimize-bundle-size/SKILL.md) - Reduce bundle size after integration
-- [customize-component-theme](../customize-component-theme/SKILL.md) - Style components after setup
+- [igniteui-wc-optimize-bundle-size](../igniteui-wc-optimize-bundle-size/SKILL.md) - Reduce bundle size after integration
+- [igniteui-wc-customize-component-theme](../igniteui-wc-customize-component-theme/SKILL.md) - Style components after setup
 
 ## When to Use
 
diff --git a/skills/integrate-with-framework/references/angular.md b/skills/igniteui-wc-integrate-with-framework/references/angular.md
similarity index 100%
rename from skills/integrate-with-framework/references/angular.md
rename to skills/igniteui-wc-integrate-with-framework/references/angular.md
diff --git a/skills/integrate-with-framework/references/react.md b/skills/igniteui-wc-integrate-with-framework/references/react.md
similarity index 100%
rename from skills/integrate-with-framework/references/react.md
rename to skills/igniteui-wc-integrate-with-framework/references/react.md
diff --git a/skills/integrate-with-framework/references/vanilla-js.md b/skills/igniteui-wc-integrate-with-framework/references/vanilla-js.md
similarity index 100%
rename from skills/integrate-with-framework/references/vanilla-js.md
rename to skills/igniteui-wc-integrate-with-framework/references/vanilla-js.md
diff --git a/skills/integrate-with-framework/references/vue.md b/skills/igniteui-wc-integrate-with-framework/references/vue.md
similarity index 100%
rename from skills/integrate-with-framework/references/vue.md
rename to skills/igniteui-wc-integrate-with-framework/references/vue.md
diff --git a/skills/optimize-bundle-size/SKILL.md b/skills/igniteui-wc-optimize-bundle-size/SKILL.md
similarity index 96%
rename from skills/optimize-bundle-size/SKILL.md
rename to skills/igniteui-wc-optimize-bundle-size/SKILL.md
index 632b190e0..1ab0e377d 100644
--- a/skills/optimize-bundle-size/SKILL.md
+++ b/skills/igniteui-wc-optimize-bundle-size/SKILL.md
@@ -1,5 +1,5 @@
 ---
-name: optimize-bundle-size
+name: igniteui-wc-optimize-bundle-size
 description: Optimize application bundle size by importing only necessary components and using tree-shaking effectively
 user-invokable: true
 ---
@@ -18,8 +18,8 @@ This skill helps users minimize their application's bundle size when using Ignit
 
 ## Related Skills
 
-- [integrate-with-framework](../integrate-with-framework/SKILL.md) - Proper integration setup
-- [customize-component-theme](../customize-component-theme/SKILL.md) - Theming after optimization
+- [igniteui-wc-integrate-with-framework](../igniteui-wc-integrate-with-framework/SKILL.md) - Proper integration setup
+- [igniteui-wc-customize-component-theme](../igniteui-wc-customize-component-theme/SKILL.md) - Theming after optimization
 
 ## When to Use
 
@@ -93,7 +93,7 @@ function MyComponent() {
 - No need for component registration overhead
 - Better integration with React build tools
 
-For more details, see the [integrate-with-framework](../integrate-with-framework/) skill.
+For more details, see the [igniteui-wc-integrate-with-framework](../igniteui-wc-integrate-with-framework/SKILL.md) skill.
 
 ## Analyzing Your Bundle
 
@@ -699,7 +699,7 @@ After optimization, you should see:
 - Implement lazy loading for heavy components
 - Consider using CDN for static assets
 - Enable HTTP/2 for better resource loading
-- Check [integrate-with-framework](../integrate-with-framework/) for proper setup
+- Check [igniteui-wc-integrate-with-framework](../igniteui-wc-integrate-with-framework/SKILL.md) for proper setup
 
 ## Additional Resources
 

From 72425d22c188ac1031a1b16e019b13ca23ee6dbd Mon Sep 17 00:00:00 2001
From: damyanpetev <damyanpetev@users.noreply.github.com>
Date: Wed, 25 Feb 2026 09:48:28 +0200
Subject: [PATCH 13/17] docs: update components skill example to actually
 register icons

---
 skills/igniteui-wc-choose-components/SKILL.md | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/skills/igniteui-wc-choose-components/SKILL.md b/skills/igniteui-wc-choose-components/SKILL.md
index 551b51c25..01ef5bfc6 100644
--- a/skills/igniteui-wc-choose-components/SKILL.md
+++ b/skills/igniteui-wc-choose-components/SKILL.md
@@ -214,6 +214,7 @@ import {
   IgcCardComponent,
   IgcIconComponent,
   IgcButtonComponent,
+  registerIconFromText,
 } from 'igniteui-webcomponents';
 
 defineComponents(
@@ -223,21 +224,25 @@ defineComponents(
   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" slot="start"></igc-icon>
+  <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" slot="icon"></igc-icon>
+    <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="settings" slot="icon"></igc-icon>
+    <igc-icon name="build" collection="material" slot="icon"></igc-icon>
     <span slot="content">Settings</span>
   </igc-nav-drawer-item>
 </igc-nav-drawer>

From ac5651cd3fea1adf1d20e63a9b3a935e4088129a Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Wed, 25 Feb 2026 10:13:14 +0200
Subject: [PATCH 14/17] Update skills/igniteui-wc-optimize-bundle-size/SKILL.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 skills/igniteui-wc-optimize-bundle-size/SKILL.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/skills/igniteui-wc-optimize-bundle-size/SKILL.md b/skills/igniteui-wc-optimize-bundle-size/SKILL.md
index 1ab0e377d..57b11e778 100644
--- a/skills/igniteui-wc-optimize-bundle-size/SKILL.md
+++ b/skills/igniteui-wc-optimize-bundle-size/SKILL.md
@@ -273,7 +273,7 @@ async function showDialog() {
 ### React (using igniteui-react)
 
 ```tsx
-import React, { lazy, Suspense } from 'react';
+import React, { lazy, Suspense, useState } from 'react';
 
 // Lazy load the dialog component
 const IgrDialog = lazy(() =>

From 01415a49a0a81f04c407e9e223918f18667f27cf Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Wed, 25 Feb 2026 10:20:04 +0200
Subject: [PATCH 15/17] Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 skills/igniteui-wc-choose-components/SKILL.md               | 2 +-
 .../references/angular.md                                   | 4 ++--
 .../references/react.md                                     | 6 +++---
 .../references/vanilla-js.md                                | 4 ++--
 .../igniteui-wc-integrate-with-framework/references/vue.md  | 4 ++--
 skills/igniteui-wc-optimize-bundle-size/SKILL.md            | 2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/skills/igniteui-wc-choose-components/SKILL.md b/skills/igniteui-wc-choose-components/SKILL.md
index 01ef5bfc6..ef175d833 100644
--- a/skills/igniteui-wc-choose-components/SKILL.md
+++ b/skills/igniteui-wc-choose-components/SKILL.md
@@ -43,7 +43,7 @@ Ignite UI for Web Components is distributed across several packages depending on
 | 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 functionaries  |
+| [`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) |
 
diff --git a/skills/igniteui-wc-integrate-with-framework/references/angular.md b/skills/igniteui-wc-integrate-with-framework/references/angular.md
index 1584e4a8c..13f6d7593 100644
--- a/skills/igniteui-wc-integrate-with-framework/references/angular.md
+++ b/skills/igniteui-wc-integrate-with-framework/references/angular.md
@@ -180,6 +180,6 @@ Use `[property]="value"` binding for complex or reactive data. Attribute strings
 
 ## Next Steps
 
-- [Optimize bundle size](../../optimize-bundle-size/) — import only the components you use
-- [Customize themes](../../customize-component-theme/) — apply your brand colors
+- [Optimize bundle size](../../igniteui-wc-optimize-bundle-size/) — import only the components you use
+- [Customize themes](../../igniteui-wc-customize-component-theme/) — apply your brand colors
 - [Component documentation](https://igniteui.github.io/igniteui-webcomponents) — full API reference
diff --git a/skills/igniteui-wc-integrate-with-framework/references/react.md b/skills/igniteui-wc-integrate-with-framework/references/react.md
index d325ed6fb..db42c91a8 100644
--- a/skills/igniteui-wc-integrate-with-framework/references/react.md
+++ b/skills/igniteui-wc-integrate-with-framework/references/react.md
@@ -44,7 +44,7 @@ function MyComponent() {
   const handleClick = (e: React.MouseEvent) => console.log('Clicked');
 
   // onChange receives the component's change event
-  const handleChange = (e: CustomEvent) => console.log(`Changed: ${event.detail}`);
+  const handleChange = (e: CustomEvent) => console.log(`Changed: ${e.detail}`);
 
   return (
     <div>
@@ -110,7 +110,7 @@ Ensure you import a theme CSS file in your entry point. Without it, components r
 
 ## Next Steps
 
-- [Optimize bundle size](../../optimize-bundle-size/) — import only the components you use
-- [Customize themes](../../customize-component-theme/) — apply your brand colors
+- [Optimize bundle size](../../igniteui-wc-optimize-bundle-size/) — import only the components you use
+- [Customize themes](../../igniteui-wc-customize-component-theme/) — apply your brand colors
 - [igniteui-react on npm](https://www.npmjs.com/package/igniteui-react) — React wrapper documentation
 - [Component documentation](https://igniteui.github.io/igniteui-webcomponents) — full API reference
diff --git a/skills/igniteui-wc-integrate-with-framework/references/vanilla-js.md b/skills/igniteui-wc-integrate-with-framework/references/vanilla-js.md
index f1c7df343..24b53ca7a 100644
--- a/skills/igniteui-wc-integrate-with-framework/references/vanilla-js.md
+++ b/skills/igniteui-wc-integrate-with-framework/references/vanilla-js.md
@@ -113,6 +113,6 @@ Ensure you import a theme CSS file in your entry point. Without it, components r
 
 ## Next Steps
 
-- [Optimize bundle size](../../optimize-bundle-size/) — import only the components you use
-- [Customize themes](../../customize-component-theme/) — apply your brand colors
+- [Optimize bundle size](../../igniteui-wc-optimize-bundle-size/SKILL.md) — import only the components you use
+- [Customize themes](../../igniteui-wc-customize-component-theme/) — apply your brand colors
 - [Component documentation](https://igniteui.github.io/igniteui-webcomponents) — full API reference
diff --git a/skills/igniteui-wc-integrate-with-framework/references/vue.md b/skills/igniteui-wc-integrate-with-framework/references/vue.md
index acb5b31f6..0f830cb94 100644
--- a/skills/igniteui-wc-integrate-with-framework/references/vue.md
+++ b/skills/igniteui-wc-integrate-with-framework/references/vue.md
@@ -176,6 +176,6 @@ Set objects and arrays via a `ref` in `onMounted`. Do not bind them as HTML attr
 
 ## Next Steps
 
-- [Optimize bundle size](../../optimize-bundle-size/) — import only the components you use
-- [Customize themes](../../customize-component-theme/) — apply your brand colors
+- [Optimize bundle size](../../igniteui-wc-optimize-bundle-size/) — import only the components you use
+- [Customize themes](../../igniteui-wc-customize-component-theme/) — apply your brand colors
 - [Component documentation](https://igniteui.github.io/igniteui-webcomponents) — full API reference
diff --git a/skills/igniteui-wc-optimize-bundle-size/SKILL.md b/skills/igniteui-wc-optimize-bundle-size/SKILL.md
index 57b11e778..2c7edf21b 100644
--- a/skills/igniteui-wc-optimize-bundle-size/SKILL.md
+++ b/skills/igniteui-wc-optimize-bundle-size/SKILL.md
@@ -301,7 +301,7 @@ function MyComponent() {
 ### React (using web components directly)
 
 ```tsx
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
 // Lazy load component registration
 const lazyLoadDialog = async () => {

From 7ce321ac0d08ee76cb4d3905891310f08d7cdb68 Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Wed, 25 Feb 2026 10:21:12 +0200
Subject: [PATCH 16/17] Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 skills/igniteui-wc-choose-components/SKILL.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/skills/igniteui-wc-choose-components/SKILL.md b/skills/igniteui-wc-choose-components/SKILL.md
index ef175d833..02c01cec2 100644
--- a/skills/igniteui-wc-choose-components/SKILL.md
+++ b/skills/igniteui-wc-choose-components/SKILL.md
@@ -141,9 +141,9 @@ All inputs are form-associated and integrate natively with `<form>`.
 | 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/webcomponentssite/components/grids/hierarchical-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/components/grids/pivot-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
 

From 9de8bfbfe6402e13045c9a268be069c199d887a1 Mon Sep 17 00:00:00 2001
From: damyanpetev <damyanpetev@users.noreply.github.com>
Date: Wed, 25 Feb 2026 10:22:39 +0200
Subject: [PATCH 17/17] docs(readme): also fix hgrid link here

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 89a50cdb5..1a01af025 100644
--- a/README.md
+++ b/README.md
@@ -211,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