feat(build): add script to update skills for Angular, React, and WebC…

package.json

@@ -23,6 +23,7 @@
 		"version": "node ./scripts/versionScript.js",
 		"build": "node ./node_modules/typescript/lib/tsc.js && npm run config-schema && npm run build:mcp",
 		"build:mcp": "cd packages/igniteui-mcp/igniteui-doc-mcp && npx tsc && npx tsx scripts/build.ts",
+		"build:update-skills": "npx tsx scripts/update-skills.ts",
 		"build-pack": "node ./node_modules/typescript/lib/tsc.js -p tsconfig-pack.json && npm run config-schema && npm run build:mcp",
 		"pretest": "npm run lint && npm run build",
 		"test": "nyc npm run jasmine",

packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/README.md

@@ -0,0 +1,89 @@
+# LLM Agent Skills for Ignite UI for React
+
+This directory contains skills for GitHub Copilot and other LLM agents to help developers use **Ignite UI for React** 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 — all specific to React and the `igniteui-react` family of packages.
+
+## Available Skills
+
+| Skill | Description | Use When |
+| --- | --- | --- |
+| [igniteui-react-components](./igniteui-react-components/SKILL.md) | Identify the right React components (`Igr*`) for a UI pattern, then install, import, and use them — JSX patterns, events, refs, forms | Choosing components or setting up and using them in React |
+| [igniteui-react-customize-theme](./igniteui-react-customize-theme/SKILL.md) | Customize styling using CSS custom properties, Sass, and the theming system in a React context | Applying custom brand colors/styles |
+| [igniteui-react-optimize-bundle-size](./igniteui-react-optimize-bundle-size/SKILL.md) | Reduce bundle size with granular imports, tree-shaking, 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 add a data grid to my React app?"
+- "What Ignite UI component should I use for a date picker?"
+- "Help me customize the button colors to match my brand"
+- "My bundle size is too large, how can I reduce it?"
+- "How do I handle events on IgrCombo?"
+
+### Direct Skill Reference
+
+- "Follow the igniteui-react-components skill for setting up my project"
+- "Use the igniteui-react-customize-theme skill to help me style components"
+- "Apply the igniteui-react-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
+- **Common Issues & Solutions**: Troubleshooting guidance
+- **Best Practices**: Recommended approaches
+- **Additional Resources**: Further reading and documentation
+
+## Editor / Agent Setup
+
+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.
+
+For example, you can copy them into the agent-specific skills folder for your editor:
+
+### GitHub Copilot
+
+Copy the skill files into your project's `.agents/skills/` directory:
+
+```
+.agents/
+  skills/
+    igniteui-react-components/
+      SKILL.md
+      reference/
+    igniteui-react-customize-theme/
+      SKILL.md
+      reference/
+    igniteui-react-optimize-bundle-size/
+      SKILL.md
+```
+
+### Claude Code
+
+Copy the skill files into your project's `.claude/skills/` directory:
+
+```
+.claude/
+  skills/
+    igniteui-react-components/
+      SKILL.md
+      reference/
+    igniteui-react-customize-theme/
+      SKILL.md
+      reference/
+    igniteui-react-optimize-bundle-size/
+      SKILL.md
+```
+
+### Other Agents (Cursor, Windsurf, etc.)
+
+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.

packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/CHARTS-GRIDS.md

@@ -110,7 +110,7 @@ export default function MasterView() {
 
   return (
     <div className={styles['grid-lite']}>
-      <IgrGridLite data={northwindCustomers} />
+      <IgrGridLite data={northwindCustomers} autoGenerate={true} />
     </div>
   );
 }
@@ -120,8 +120,80 @@ export default function MasterView() {
 /* master-view.module.css */
 .grid-lite {
   min-width: 400px;
-  min-height: 220px;
+  height: 600px;
   flex-grow: 1;
   flex-basis: 0;
 }
 ```
+
+## Grid Lite Example with Column Configurations and Templates
+
+Use `IgrGridLiteColumn` to define columns explicitly with typed `dataType` and optional `cellTemplate` for custom rendering. Set `autoGenerate={false}` (or omit it) when providing explicit columns.
+
+```tsx
+import { IgrGridLite, IgrGridLiteColumn, type IgrCellContext } from 'igniteui-react/grid-lite';
+import styles from './order-list.module.css';
+
+interface Order {
+  id: number;
+  customer: string;
+  total: number;
+  date: Date;
+  status: 'pending' | 'shipped' | 'delivered';
+}
+
+const orders: Order[] = [
+  { id: 1, customer: 'Alice', total: 149.99, date: new Date('2024-03-01'), status: 'delivered' },
+  { id: 2, customer: 'Bob', total: 89.50, date: new Date('2024-03-10'), status: 'shipped' },
+  { id: 3, customer: 'Carol', total: 220.00, date: new Date('2024-03-15'), status: 'pending' },
+];
+
+// Simple cell templates — render JSX based on the cell value or row data
+const currencyTemplate = (ctx: IgrCellContext<Order>) => (
+  <span>${(ctx.value as number).toFixed(2)}</span>
+);
+
+const dateTemplate = (ctx: IgrCellContext<Order>) => (
+  <span>${(ctx.value as Date).toLocaleDateString()}</span>
+);
+
+const statusTemplate = (ctx: IgrCellContext<Order>) => {
+  const colors: Record<Order['status'], string> = {
+    pending: 'orange',
+    shipped: 'blue',
+    delivered: 'green',
+  };
+  return <span style={{ color: colors[ctx.value as Order['status']] }}>{ctx.value}</span>;
+};
+
+export default function OrderList() {
+  return (
+    <div className={styles['grid-lite']}>
+      <IgrGridLite data={orders}>
+        {/* dataType ensures correct sorting and filtering behavior */}
+        <IgrGridLiteColumn field="id" dataType="number" />
+        <IgrGridLiteColumn field="customer" dataType="string" />
+        {/* Columns with custom cell templates */}
+        <IgrGridLiteColumn field="date" cellTemplate={dateTemplate} />
+        <IgrGridLiteColumn field="total" dataType="number" cellTemplate={currencyTemplate} />
+        <IgrGridLiteColumn field="status" dataType="string" cellTemplate={statusTemplate} />
+      </IgrGridLite>
+    </div>
+  );
+}
+```
+
+```css
+/* order-list.module.css */
+.grid-lite {
+  min-width: 400px;
+  height: 600px;
+  flex-grow: 1;
+  flex-basis: 0;
+}
+```
+
+> **Column configuration notes:**
+> - `dataType` accepts `"string"` (default), `"number"`, `"boolean"` — set it explicitly so sorting and filtering work correctly for each column type.
+> - `cellTemplate` receives an `IgrCellContext<T>` where `ctx.value` is the cell value and `ctx.row.data` is the full row object.
+> - When using `cellTemplate`, define the function outside the component (or memoize it) to avoid unnecessary re-renders.

packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/REFS-FORMS.md

@@ -49,24 +49,27 @@ function MyPage() {
 
 ## Uncontrolled Components
 
-`igniteui-react` Inputs integrate with the native form handling through Element internals, allowing to take advantage of the native state management adn validation to create intuitive, straight-forward forms:
+`igniteui-react` Form elements like Inputs, Select, Checkbox, etc., integrate with the native form handling through Element internals, allowing to take advantage of the native state management and validation to create intuitive, straightforward forms. Use the `name` attribute to register the field value with `FormData`:
 
 ```tsx
-import { useRef } from 'react';
-import { IgrInput, IgrButton } from 'igniteui-react';
+import { IgrInput, IgrSelect, IgrSelectItem, IgrButton } from 'igniteui-react';
 
 function SimpleForm() {
-  const nameRef = useRef<IgrInput>(null);
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    // e.preventDefault(); // optionally prevent default submit form custom handling
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
+    // e.preventDefault(); // optionally prevent default submit for custom handling
     const formData = new FormData(e.target);
+    console.log(formData.get('name'));       // input value
+    console.log(formData.get('role'));       // selected option value
   };
 
   return (
     <form onSubmit={handleSubmit}>
       <IgrInput name="name" label="Name" required={true} />
-      <IgrInput name="description" label="description" minLength={0}>
+      <IgrSelect name="role" label="Role" required={true}>
+        <IgrSelectItem value="user">User</IgrSelectItem>
+        <IgrSelectItem value="admin">Admin</IgrSelectItem>
+        <IgrSelectItem value="editor">Editor</IgrSelectItem>
+      </IgrSelect>
       <IgrButton type="submit">
         <span>Submit</span>
       </IgrButton>

packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/README.md

@@ -0,0 +1,65 @@
+# 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                              |
+| ----------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------- |
+| [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
+
+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.

scripts/update-skills.ts

@@ -0,0 +1,64 @@
+import { execFileSync } from "child_process";
+import { cpSync, existsSync, rmSync } from "fs";
+import { join, relative, resolve } from "path";
+
+const root = resolve(__dirname, "..");
+const branch = process.argv[2] || "master";
+
+if (!/^[\w.\-/]+$/.test(branch) || branch.startsWith("-")) {
+	// eslint-disable-next-line no-console
+	console.error(`[update-skills] Invalid branch name: '${branch}'`);
+	process.exit(1);
+}
+
+const mappings = [
+	{
+		name: "angular",
+		repo: join(root, "packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular"),
+		src: join(root, "packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular/skills"),
+		dest: join(root, "packages/igx-templates/igx-ts/projects/_base/files/__dot__claude/skills")
+	},
+	{
+		name: "react",
+		repo: join(root, "packages/igniteui-mcp/igniteui-doc-mcp/react/igniteui-react"),
+		src: join(root, "packages/igniteui-mcp/igniteui-doc-mcp/react/igniteui-react/skills"),
+		dest: join(root, "packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills")
+	},
+	{
+		name: "webcomponents",
+		repo: join(root, "packages/igniteui-mcp/igniteui-doc-mcp/webcomponents/igniteui-webcomponents"),
+		src: join(root, "packages/igniteui-mcp/igniteui-doc-mcp/webcomponents/igniteui-webcomponents/skills"),
+		dest: join(root, "packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills")
+	}
+];
+
+for (const { name, repo, src, dest } of mappings) {
+	if (!existsSync(repo)) {
+		// eslint-disable-next-line no-console
+		console.warn(`[update-skills] Skipping ${name}: repo not found at ${repo}`);
+		continue;
+	}
+	if (!existsSync(join(repo, ".git"))) {
+		// Submodule directory exists but hasn't been initialized yet — initialize it now
+		// eslint-disable-next-line no-console
+		console.log(`[update-skills] Initializing submodule for ${name}...`);
+		const submodulePath = relative(root, repo).replace(/\\/g, "/");
+		execFileSync("git", ["submodule", "update", "--init", submodulePath], { cwd: root, stdio: "inherit" });
+	}
+	// eslint-disable-next-line no-console
+	console.log(`[update-skills] Updating ${name} to branch '${branch}'...`);
+	execFileSync("git", ["fetch", "origin", branch], { cwd: repo, stdio: "inherit" });
+	execFileSync("git", ["checkout", "-B", branch, `origin/${branch}`], { cwd: repo, stdio: "inherit" });
+
+	if (!existsSync(src)) {
+		// eslint-disable-next-line no-console
+		console.warn(`[update-skills] Skipping ${name}: skills not found at ${src}`);
+		continue;
+	}
+	if (existsSync(dest)) {
+		rmSync(dest, { recursive: true, force: true });
+	}
+	cpSync(src, dest, { recursive: true });
+	// eslint-disable-next-line no-console
+	console.log(`[update-skills] Updated ${name} skills`);
+}