docs(skills): cleanup redundant/duplicating info

Author: damyanpetev

skills/README.md

@@ -46,81 +46,44 @@ Each skill contains:
 
 ## Editor / Agent Setup
 
-Most modern AI assistants (GitHub Copilot, Cursor, Windsurf, etc.) should auto-discover these skills from your `node_modules/igniteui-react/skills/` directory after you install the package. No additional configuration is typically needed.
+Most modern AI assistants (GitHub Copilot, Cursor, Windsurf, Claude Code, etc.) should auto-discover these skills from a specified location in the workspace or global profile.
 
-If your AI assistant doesn't auto-discover the skills, or you want to provide additional context, you can reference them manually:
+For example, you can copy them into the agent-specific skills folder for your editor:
 
-### GitHub Copilot (Optional)
+### GitHub Copilot
 
-If you want to provide explicit instructions to GitHub Copilot, you can add a `.github/copilot-instructions.md` file to **your project root**:
+Copy the skill files into your project's `.agents/skills/` directory:
 
-```markdown
-## Ignite UI for React
-
-This project uses Ignite UI for React. When answering questions about UI components,
-refer to the skills in node_modules/igniteui-react/skills/:
-
-- **Components (choosing & using)**: node_modules/igniteui-react/skills/igniteui-react-components/SKILL.md
-- **Theming & styling**: node_modules/igniteui-react/skills/igniteui-react-customize-theme/SKILL.md
-- **Bundle optimization**: node_modules/igniteui-react/skills/igniteui-react-optimize-bundle-size/SKILL.md
-
-All components use the `Igr` prefix (e.g. `IgrButton`, `IgrGrid`).
 ```
-
-### Cursor / Windsurf (Optional)
-
-If you want to provide explicit instructions, create or edit `.cursorrules` in **your project root**:
-
+.agents/
+  skills/
+    igniteui-react-components/
+      SKILL.md
+      reference/
+    igniteui-react-customize-theme/
+      SKILL.md
+      reference/
+    igniteui-react-optimize-bundle-size/
+      SKILL.md
 ```
-This project uses Ignite UI for React.
-When working with UI components, consult the skills in node_modules/igniteui-react/skills/:
-
-- node_modules/igniteui-react/skills/igniteui-react-components/SKILL.md — pick components and use them in React
-- node_modules/igniteui-react/skills/igniteui-react-customize-theme/SKILL.md — theming and styling
-- node_modules/igniteui-react/skills/igniteui-react-optimize-bundle-size/SKILL.md — bundle optimization
-
-Components use the Igr prefix (IgrButton, IgrGrid, IgrCombo, etc.).
-```
-
-### Claude Desktop / Claude Code (Optional)
-
-Add to your `CLAUDE.md` project instructions if needed:
 
-```markdown
-## Ignite UI for React
+### Claude Code
 
-This project uses Ignite UI for React. Refer to these skills for guidance:
+Copy the skill files into your project's `.claude/skills/` directory:
 
-- node_modules/igniteui-react/skills/igniteui-react-components/SKILL.md
-- node_modules/igniteui-react/skills/igniteui-react-customize-theme/SKILL.md
-- node_modules/igniteui-react/skills/igniteui-react-optimize-bundle-size/SKILL.md
-
-All React wrapper components use the `Igr` prefix (e.g. `IgrButton`, `IgrGrid`).
+```
+.claude/
+  skills/
+    igniteui-react-components/
+      SKILL.md
+      reference/
+    igniteui-react-customize-theme/
+      SKILL.md
+      reference/
+    igniteui-react-optimize-bundle-size/
+      SKILL.md
 ```
 
-### Manual Attachment (All Editors)
-
-You can also attach individual skill files to your AI chat context manually:
-
-1. Open the AI chat panel (Copilot Chat, Cursor Chat, etc.)
-2. Use the "Attach file" or "Add context" action
-3. Navigate to `node_modules/igniteui-react/skills/` and select the relevant `SKILL.md` file
-
-## Contributing
-
-If you identify gaps in the skills or have suggestions for improvements:
-
-1. [Open an issue](https://github.com/IgniteUI/igniteui-react/issues) describing the improvement
-2. Submit a pull request with the proposed changes
-3. Follow the skill format and structure of existing skills
-
-## Additional Resources
-
-- [Ignite UI for React Documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started)
-- [React Examples Repository](https://github.com/IgniteUI/igniteui-react-examples)
-- [npm: igniteui-react](https://www.npmjs.com/package/igniteui-react)
-- [GitHub Repository](https://github.com/IgniteUI/igniteui-react)
-
-## License
+### Other Agents (Cursor, Windsurf, etc.)
 
-These skills are provided under the same license as the Ignite UI for React library. See [LICENSE](../LICENSE) for details.
+Consult your agent's documentation for the correct skills directory path and copy the skill files there. The skill structure is agent-agnostic — any assistant that supports skill files can use them directly.

skills/igniteui-react-components/SKILL.md

@@ -74,7 +74,7 @@ npm install igniteui-react
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 ```
 
-> **CRITICAL:** Without the theme CSS, components will render without styles and icons will be broken.
+> **CRITICAL:** Without the theme CSS, components will render without styles and icons will be broken. See [INSTALLATION.md](./reference/INSTALLATION.md) for all available themes and setup.
 
 ### 3. Use Components
 
@@ -107,14 +107,13 @@ Use [COMPONENT-CATALOGUE.md](./reference/COMPONENT-CATALOGUE.md) to map any UI n
 
 ### Theme CSS Import
 
-- **Always import theme CSS** before using components — see [INSTALLATION.md](./reference/INSTALLATION.md)
-- **For grids**, also import `igniteui-react-grids/grids/themes/...`
-- **In Next.js**, import in each client component file or root layout
+- **Always import theme CSS** before using components. **For grids**, also import `igniteui-react-grids/grids/themes/...`
+- see [INSTALLATION.md](./reference/INSTALLATION.md)
 
 ### JSX Patterns
 
+- Use props just like any React component
 - Use `slot` attribute for named slots: `<span slot="icon">📊</span>`
-- Boolean props: `<IgrInput disabled />` is shorthand for `disabled={true}`
 - See [JSX-PATTERNS.md](./reference/JSX-PATTERNS.md)
 
 ### IgrTabs: Content vs Navigation
@@ -147,13 +146,12 @@ Use [COMPONENT-CATALOGUE.md](./reference/COMPONENT-CATALOGUE.md) to map any UI n
 
 1. **Start with the MIT package** (`igniteui-react`) — it covers most common UI needs
 2. **Import theme CSS first** — components need it to render correctly
-3. **Don't call `defineComponents()`** — React wrappers auto-register
-4. **Register chart/gauge/map modules** — call `.register()` at module level
-5. **Wrap charts/gauges/maps in sized containers** — they need explicit dimensions
-6. **Use named imports** — enables tree-shaking
-7. **Handle events as `CustomEvent`** — not `React.SyntheticEvent`
-8. **Use refs sparingly** — prefer declarative props
-9. **Check slot names** in the docs
+3. **Register chart/gauge/map modules** — call `.register()` at module level
+4. **Wrap charts/gauges/maps in sized containers** — they need explicit dimensions
+5. **Use named imports** — enables tree-shaking
+6. **Handle events as `CustomEvent`** — not `React.SyntheticEvent`
+7. **Use refs sparingly** — prefer declarative props
+8. **Check slot names** in the docs
 
 ## Additional Resources
 

skills/igniteui-react-components/reference/CHARTS-GRIDS.md

@@ -90,8 +90,6 @@ export default function DashboardView() {
 }
 ```
 
-> **Note:** Core UI components from `igniteui-react` (e.g., `IgrButton`, `IgrInput`) do NOT require module registration — they auto-register when imported. Charts, gauges, and maps need explicit `.register()` calls.
-
 ## Complete Grid Lite Example
 
 > **⚠️ IMPORTANT:** Grid Lite (`IgrGridLite` from `igniteui-react/grid-lite`) requires installing both `igniteui-react` and `igniteui-grid-lite` packages. It's a React wrapper component (uses `Igr` prefix) and works like any standard React component — no `.register()` needed.

skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md

@@ -231,8 +231,6 @@ function Dashboard() {
 }
 ```
 
-> **No `defineComponents()` call is needed** — React wrappers handle component registration automatically when you import them.
-
 ---
 
 ## Common UI Scenarios → Recommended Component Sets

skills/igniteui-react-components/reference/INSTALLATION.md

@@ -55,6 +55,8 @@ Available themes:
 | `igniteui-webcomponents/themes/light/indigo.css` | Indigo Light |
 | `igniteui-webcomponents/themes/dark/indigo.css` | Indigo Dark |
 
+Grid theme CSS files follow the same pattern under `igniteui-react-grids/grids/themes/`.
+
 **For grids**, you **must also** import the grid theme CSS. Without it, the grid will be missing styles and icons will show as placeholders:
 
 ```tsx
@@ -134,6 +136,4 @@ function App() {
 export default App;
 ```
 
-> **No `defineComponents()` needed.** Unlike the underlying web components library, the React wrappers automatically register the web component when you import and render them. You never need to call `defineComponents()`.
->
-> **Exception — Charts, Gauges & Maps:** Components from `igniteui-react-charts`, `igniteui-react-gauges`, and `igniteui-react-maps` **do** require explicit registration. Grid Lite (`IgrGridLite` from `igniteui-react/grid-lite`) works like a standard React component but requires both `igniteui-react` and `igniteui-grid-lite` packages. See [CHARTS-GRIDS.md](./CHARTS-GRIDS.md).
+> **No `defineComponents()` needed.** React wrappers auto-register. See [CHARTS-GRIDS.md](./reference/CHARTS-GRIDS.md) for exceptions (charts, gauges, maps).

skills/igniteui-react-components/reference/JSX-PATTERNS.md

@@ -14,19 +14,6 @@ Ignite UI React components accept props just like any React component. Use JSX e
 <IgrSlider value="50" />
 ```
 
-## Boolean Props
-
-Pass `true` / `false` explicitly, or use the shorthand (presence = `true`):
-
-```tsx
-// These are equivalent:
-<IgrInput disabled />
-<IgrInput disabled={true} />
-
-// Explicitly false:
-<IgrInput disabled={false} />
-```
-
 ## Children vs Slots
 
 Ignite UI components use the web component **slot** mechanism under the hood. In JSX, pass children to the default slot and use the `slot` attribute to target named slots:
@@ -198,4 +185,3 @@ function MainLayout() {
 - ✅ Sync the active tab to the current route using the `selected` prop
 - ✅ Handle `onChange` to call `navigate()` for route changes
 - ✅ Use `<Outlet />` (or the equivalent in your router) for content rendering
-- ❌ Do NOT add inline content in `IgrTab` — it creates unwanted content areas that fill the viewport

skills/igniteui-react-components/reference/TROUBLESHOOTING.md

@@ -45,25 +45,7 @@ import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; // Grid theme
 
 1. Install both required packages: `npm install igniteui-react igniteui-grid-lite`
 2. Import `IgrGridLite` from `igniteui-react/grid-lite`
-3. Wrap in a sized container
-
-```tsx
-import { IgrGridLite } from 'igniteui-react/grid-lite';
-
-// Use in JSX with a sized container:
-<div className={styles['grid-lite']}>
-  <IgrGridLite data={data} />
-</div>
-```
-
-```css
-.grid-lite {
-  min-width: 400px;
-  min-height: 220px;
-  flex-grow: 1;
-  flex-basis: 0;
-}
-```
+3. Wrap in a sized container (see [CHARTS-GRIDS.md](./CHARTS-GRIDS.md) for a full example)
 
 ## Issue: `IgrGridLite` is confused with `IgrGrid` from `igniteui-react-grids`
 

skills/igniteui-react-optimize-bundle-size/SKILL.md

@@ -39,7 +39,6 @@ This skill helps users minimize their React application's bundle size when using
 2. **Use named imports** — enable tree-shaking by importing specific components
 3. **Lazy load heavy components** — use `React.lazy` + `Suspense` for grids, charts, and other large components
 4. **Analyze your bundle** — use tools to identify what's being included
-5. **No `defineComponents()` needed** — the React wrappers handle registration automatically per-component
 
 ---
 
@@ -99,19 +98,6 @@ function App() {
 
 **Impact:** Bundle includes only the three components and their dependencies. Tree-shaking removes everything else.
 
-### About `defineComponents()`
-
-The React wrappers handle web component registration automatically when you import and render a component. **You never need to call `defineComponents()`** — doing so would be redundant and could pull in unnecessary code if you imported the function from `igniteui-webcomponents` directly.
-
-```tsx
-// ❌ Don't do this — unnecessary and bypasses tree-shaking
-import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents';
-defineComponents(IgcButtonComponent);
-
-// ✅ Just import the React wrapper
-import { IgrButton } from 'igniteui-react';
-```
-
 ---
 
 ## Lazy Loading with `React.lazy` + `Suspense`
@@ -383,7 +369,6 @@ module.exports = {
 - [ ] **Install only the packages you need** — don't install `igniteui-react-grids` if you only use buttons and inputs
 - [ ] **Use named imports** — `import { IgrButton } from 'igniteui-react'`, not `import * as`
 - [ ] **Don't import from `igniteui-webcomponents` directly** — use the `igniteui-react` wrappers
-- [ ] **Don't call `defineComponents()`** — the React wrappers handle this automatically
 - [ ] **Lazy load heavy components** — use `React.lazy` + `Suspense` for grids, charts, and dialogs
 - [ ] **Split by routes** — load component-heavy pages only when navigated to
 - [ ] **Audit your imports regularly** — remove unused components