Skip to content

Commit 90841d5

Browse files
rkaraivanovdamyanpetevCopilot
authored
feat: Add end-user skills routines (#2106)
Co-authored-by: damyanpetev <damyanpetev@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 parent 1081af6 commit 90841d5

11 files changed

Lines changed: 2467 additions & 6 deletions

File tree

‎README.md‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@ See the [Storybook Here](https://igniteui.github.io/igniteui-webcomponents)
6262
| Calendar | ✅ | [Docs][Calendar Docs] | [1.0.0] | [MIT](LICENSE) |
6363
| Card | ✅ | [Docs][Card Docs] | [1.0.0] | [MIT](LICENSE) |
6464
| Checkbox | ✅ | [Docs][Checkbox Docs] | [1.0.0] | [MIT](LICENSE) |
65-
| Form | ✅ | [Docs][Form Docs] | [1.0.0] | [MIT](LICENSE) |
6665
| Icon | ✅ | [Docs][Icon Docs] | [1.0.0] | [MIT](LICENSE) |
6766
| Icon Button | ✅ | [Docs][Icon Button Docs] | [1.0.0] | [MIT](LICENSE) |
6867
| Input | ✅ | [Docs][Input Docs] | [1.0.0] | [MIT](LICENSE) |
@@ -212,7 +211,7 @@ npm run storybook:build
212211
[safari_48x48]: https://user-images.githubusercontent.com/2188411/168109527-6c58f2cf-7386-4b97-98b1-cfe0ab4e8626.png
213212
[Contribution Guidelines]: https://github.com/IgniteUI/igniteui-webcomponents/blob/master/.github/CONTRIBUTING.md
214213
[Data Grid]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/data-grid
215-
[Hierarchical Grid]: https://www.infragistics.com/webcomponentssite/components/grids/hierarchical-grid/overview
214+
[Hierarchical Grid]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/hierarchical-grid/overview
216215
[Charts]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/chart-overview
217216
[Dock Manager]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/dock-manager
218217
[Pivot Grid Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/pivot-grid/overview
@@ -228,7 +227,6 @@ npm run storybook:build
228227
[Input Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input
229228
[Icon Button Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/icon-button
230229
[Icon Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/icon
231-
[Form Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/form
232230
[Checkbox Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/checkbox
233231
[Card Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/card
234232
[Calendar Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/calendar
@@ -242,7 +240,7 @@ npm run storybook:build
242240
[Chip Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/chip
243241
[Circular Progress Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/circular-progress
244242
[Linear Progress Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/linear-progress
245-
[Dropdown Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/toast
243+
[Dropdown Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/dropdown
246244
[Tree Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/tree
247245
[Expansion Panel Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/expansion-panel
248246
[Masked Input Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input
@@ -266,7 +264,7 @@ npm run storybook:build
266264
[Chat Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/interactivity/chat
267265
[Commercial License]: https://www.infragistics.com/legal/license
268266
[Grid Lite]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grid-lite/overview
269-
[Ignite UI Web Components Grid Lite]: https://www.npmjs.com/package/igniteui-webcomponents-grid-lite
267+
[Ignite UI Web Components Grid Lite]: https://www.npmjs.com/package/igniteui-grid-lite
270268
[1.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0
271269
[2.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.0.0
272270
[2.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0

‎scripts/build.mjs‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { exec as _exec } from 'node:child_process';
2-
import { copyFile, writeFile } from 'node:fs/promises';
2+
import { copyFile, writeFile, cp } from 'node:fs/promises';
33
import path from 'node:path';
44
import { fileURLToPath } from 'node:url';
55
import { promisify } from 'node:util';
@@ -87,5 +87,9 @@ async function runTask(tag, cmd) {
8787
])
8888
);
8989

90+
await runTask('Copy skills directory', () => {
91+
cp('skills', DEST_DIR('skills'), { recursive: true });
92+
});
93+
9094
report.success('Done! 🎉');
9195
})();

‎skills/README.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# LLM Agent Skills for End Users
2+
3+
This directory contains skills for GitHub Copilot and other LLM agents to help developers use Ignite UI Web Components effectively in their applications.
4+
5+
## What are Skills?
6+
7+
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.
8+
9+
## Available Skills
10+
11+
| Skill | Description | Use When |
12+
| ----------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------- |
13+
| [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 |
14+
| [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 |
15+
| [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 |
16+
| [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 |
17+
18+
## How to Use
19+
20+
When working with an AI agent like GitHub Copilot, reference skills by name or ask questions naturally:
21+
22+
### Natural Questions
23+
- "How do I integrate igniteui-webcomponents with React?"
24+
- "Help me customize the button colors to match my brand"
25+
- "My bundle size is too large, how can I reduce it?"
26+
- "Show me how to use these components in Vue"
27+
28+
### Direct Skill Reference
29+
- "Follow the integrate-with-framework skill for my Angular app"
30+
- "Use the customize-component-theme skill to help me style components"
31+
- "Apply the optimize-bundle-size skill to reduce my bundle"
32+
33+
## Skill Structure
34+
35+
Each skill contains:
36+
37+
- **Example Usage**: Common questions or scenarios
38+
- **When to Use**: Situations where the skill applies
39+
- **Related Skills**: Other relevant skills to explore
40+
- **Step-by-Step Instructions**: Detailed guidance with code examples
41+
- **Framework-Specific Examples**: React, Angular, Vue, and vanilla JS patterns
42+
- **Common Issues & Solutions**: Troubleshooting guidance
43+
- **Best Practices**: Recommended approaches
44+
- **Additional Resources**: Further reading and documentation
45+
46+
## Contributing
47+
48+
If you identify gaps in the skills or have suggestions for improvements:
49+
50+
1. [Open an issue](https://github.com/IgniteUI/igniteui-webcomponents/issues) describing the improvement
51+
2. Submit a pull request with the proposed changes
52+
3. Follow the skill format and structure of existing skills
53+
54+
For skills related to **contributing to the library itself** (creating components, reviewing PRs, etc.), see [`.github/skills/`](../.github/skills/).
55+
56+
## Additional Resources
57+
58+
- [Component Documentation](https://igniteui.github.io/igniteui-webcomponents)
59+
- [Project README](../README.md)
60+
- [Code Examples & Storybook](https://igniteui.github.io/igniteui-webcomponents)
61+
- [GitHub Repository](https://github.com/IgniteUI/igniteui-webcomponents)
62+
63+
## License
64+
65+
These skills are provided under the same license as the Ignite UI Web Components library. See [LICENSE](../LICENSE) for details.

0 commit comments

Comments
 (0)