# LLM Agent Skills for End Users

This directory contains skills for GitHub Copilot and other LLM agents. The skills help developers use Ignite UI Web Components in their applications.

## What are Skills?

Skills are structured instructions that help AI agents understand and do common tasks consistently. Each skill is a self-contained guide that gives 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 correct components for a UI pattern and find the 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          | Adding components to your project     |
| [igniteui-wc-customize-component-theme](./igniteui-wc-customize-component-theme/SKILL.md)   | Customize styles with CSS custom properties, parts, and the theming system         | Applying custom brand colors/styles   |
| [igniteui-wc-generate-from-image-design](./igniteui-wc-generate-from-image-design/SKILL.md) | Implement a view from a screenshot or mockup with Ignite UI Web Components         | Converting a design image into UI     |
| [igniteui-wc-figma-to-app](./igniteui-wc-figma-to-app/SKILL.md)                             | Convert Figma screens from any UI kit (Indigo.Design, third-party, or plain frames) into a working app | Implementing a design from a Figma file |
| [igniteui-wc-optimize-bundle-size](./igniteui-wc-optimize-bundle-size/SKILL.md)             | Import only the necessary components and use lazy loading to reduce bundle size    | Optimizing production performance     |
| [igniteui-wc-migrate-grid-lite-to-premium](./igniteui-wc-migrate-grid-lite-to-premium/SKILL.md) | Migrate from Grid Lite to the premium Data Grid                                 | Using enterprise grid features        |
| [igniteui-wc-grids](./igniteui-wc-grids/SKILL.md)                               | Configure a grid: package choice, theming, Shadow DOM, layout, sorting/filtering    | Adding or debugging a grid in an app   |

## How to Use

With an AI agent such as GitHub Copilot, ask questions in plain language or refer to skills by name:

### Natural Questions
- "How do I integrate igniteui-webcomponents with React?"
- "Help me customize the button colors to match my brand"
- "Build this screenshot with Ignite UI Web Components"
- "Implement this Figma design with Ignite UI Web Components"
- "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"
- "Use the generate-from-image-design skill to implement this mockup"
- "Use the figma-to-app skill to build this artboard"
- "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
- **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 find gaps in the skills or have suggestions for improvements:

1. [Open an issue](https://github.com/IgniteUI/igniteui-webcomponents/issues) that describes the improvement
2. Submit a pull request with the proposed changes

## 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 use the same license as the Ignite UI Web Components library. See [LICENSE](../LICENSE) for details.