Merge branch 'mstoyanova/update-skills-build' of https://github.com/IgniteUI/igniteui-cli into mstoyanova/update-skills-build

Author: Marina-L-Stoyanova

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/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.