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	Identify the right components for a UI pattern and navigate to official docs/demos	Deciding which components to use
igniteui-wc-integrate-with-framework	Integrate components into React, Angular, Vue, or vanilla JS applications	Setting up components in your project
igniteui-wc-customize-component-theme	Customize styling using CSS custom properties, parts, and theming system	Applying custom brand colors/styles
igniteui-wc-generate-from-image-design	Implement a view from a screenshot or mockup using Ignite UI Web Components	Converting a design image into UI
igniteui-wc-optimize-bundle-size	Reduce bundle size by importing only needed components and lazy loading	Optimizing production performance
igniteui-wc-migrate-grid-lite-to-premium	Migrate from Grid Lite to the premium Data Grid	Adopting enterprise grid features

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"
• "Build this screenshot 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"
• "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 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/.

Additional Resources

• Component Documentation
• Project README
• Code Examples & Storybook
• GitHub Repository

License

These skills are provided under the same license as the Ignite UI Web Components library. See LICENSE for details.