Skip to content

Commit 04dd2cd

Browse files
CopilotzdrawkuZneekydamyanpetev
authored
feat(skills): add React-specific LLM agent skills (#130)
Co-authored-by: zdrawku <11193764+zdrawku@users.noreply.github.com> Co-authored-by: Zneeky <105818882+Zneeky@users.noreply.github.com> Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com>
1 parent c5dc98c commit 04dd2cd

19 files changed

Lines changed: 2978 additions & 0 deletions

File tree

‎.azure-pipelines/release.yml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,12 @@ jobs:
7676
targetType: inline
7777
script: Copy-Item -Path ".azure-pipelines/artifacts/LICENSE_MIT" -Destination "dist/LICENSE"
7878

79+
- task: PowerShell@2
80+
displayName: 'Copy skills folder'
81+
inputs:
82+
targetType: inline
83+
script: Copy-Item -Path "skills" -Destination "dist/skills" -Recurse
84+
7985
- task: PowerShell@2
8086
displayName: 'Copy components README'
8187
inputs:
@@ -100,6 +106,12 @@ jobs:
100106
customCommand: 'publish --tag $(npmPublishTag) -userconfig ../.npmrc'
101107
verbose: ${{ parameters.verbose }}
102108

109+
- task: PowerShell@2
110+
displayName: 'Remove skills folder'
111+
inputs:
112+
targetType: inline
113+
script: Remove-Item -Path "dist/skills" -Recurse -Force
114+
103115
# dock-manager trial release:
104116
- task: PowerShell@2
105117
displayName: 'Copy dock-manager package.json'

‎README.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,28 @@ You can build amazing experiences with Ignite UI for React. Ignite UI for React
1616
## About this repository
1717
This repository contains the base logic and build process for generating the React wrappers published for the `igniteui-react`, `igniteui-react-dockmanager` and `igniteui-react-grids` packages.
1818

19+
## AI-Assisted Development
20+
21+
This repository ships with **LLM Agent Skills** — structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI, etc.) how to work with Ignite UI for React. The skill files are included in the published npm packages and also live in the [`skills/`](skills/) directory:
22+
23+
| Skill | Description |
24+
|:------|:------------|
25+
| **[components](skills/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, Next.js setup |
26+
| **[customize-theme](skills/igniteui-react-customize-theme/SKILL.md)** | Customize styling using CSS custom properties, Sass, and the theming system in React |
27+
| **[optimize-bundle-size](skills/igniteui-react-optimize-bundle-size/SKILL.md)** | Reduce bundle size with granular imports, tree-shaking, and lazy loading |
28+
29+
### How It Works
30+
31+
- **GitHub Copilot** — Skills should be discovered automatically when you add the `igniteui-react` package to your project. No extra setup typically needed.
32+
- **Cursor / Windsurf** — Skills should be auto-discovered from your `node_modules/igniteui-react/skills/` directory.
33+
- **Other AI assistants** — You can reference the skills manually by attaching the `SKILL.md` files from `node_modules/igniteui-react/skills/` to your AI chat context, or by copying their contents into your IDE's AI configuration.
34+
35+
For detailed setup instructions and usage examples, see the **[skills/README.md](skills/README.md)** file.
36+
37+
### Theming MCP Server
38+
39+
The **customize-theme** skill includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools (palette generation, component theme scaffolding, etc.). See [`skills/igniteui-react-customize-theme/SKILL.md`](skills/igniteui-react-customize-theme/SKILL.md) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs.
40+
1941
## Overview
2042

2143
### Components in [igniteui-react]

‎skills/README.md‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
# LLM Agent Skills for Ignite UI for React
2+
3+
This directory contains skills for GitHub Copilot and other LLM agents to help developers use **Ignite UI for React** 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 — all specific to React and the `igniteui-react` family of packages.
8+
9+
## Available Skills
10+
11+
| Skill | Description | Use When |
12+
| --- | --- | --- |
13+
| [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 |
14+
| [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 |
15+
| [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 |
16+
17+
## How to Use
18+
19+
When working with an AI agent like GitHub Copilot, reference skills by name or ask questions naturally:
20+
21+
### Natural Questions
22+
23+
- "How do I add a data grid to my React app?"
24+
- "What Ignite UI component should I use for a date picker?"
25+
- "Help me customize the button colors to match my brand"
26+
- "My bundle size is too large, how can I reduce it?"
27+
- "How do I handle events on IgrCombo?"
28+
29+
### Direct Skill Reference
30+
31+
- "Follow the igniteui-react-components skill for setting up my project"
32+
- "Use the igniteui-react-customize-theme skill to help me style components"
33+
- "Apply the igniteui-react-optimize-bundle-size skill to reduce my bundle"
34+
35+
## Skill Structure
36+
37+
Each skill contains:
38+
39+
- **Example Usage**: Common questions or scenarios
40+
- **When to Use**: Situations where the skill applies
41+
- **Related Skills**: Other relevant skills to explore
42+
- **Step-by-Step Instructions**: Detailed guidance with code examples
43+
- **Common Issues & Solutions**: Troubleshooting guidance
44+
- **Best Practices**: Recommended approaches
45+
- **Additional Resources**: Further reading and documentation
46+
47+
## Editor / Agent Setup
48+
49+
Most modern AI assistants (GitHub Copilot, Cursor, Windsurf, etc.) should auto-discover these skills from your `node_modules/igniteui-react/skills/` directory after you install the package. No additional configuration is typically needed.
50+
51+
If your AI assistant doesn't auto-discover the skills, or you want to provide additional context, you can reference them manually:
52+
53+
### GitHub Copilot (Optional)
54+
55+
If you want to provide explicit instructions to GitHub Copilot, you can add a `.github/copilot-instructions.md` file to **your project root**:
56+
57+
```markdown
58+
## Ignite UI for React
59+
60+
This project uses Ignite UI for React. When answering questions about UI components,
61+
refer to the skills in node_modules/igniteui-react/skills/:
62+
63+
- **Components (choosing & using)**: node_modules/igniteui-react/skills/igniteui-react-components/SKILL.md
64+
- **Theming & styling**: node_modules/igniteui-react/skills/igniteui-react-customize-theme/SKILL.md
65+
- **Bundle optimization**: node_modules/igniteui-react/skills/igniteui-react-optimize-bundle-size/SKILL.md
66+
67+
All components use the `Igr` prefix (e.g. `IgrButton`, `IgrGrid`).
68+
```
69+
70+
### Cursor / Windsurf (Optional)
71+
72+
If you want to provide explicit instructions, create or edit `.cursorrules` in **your project root**:
73+
74+
```
75+
This project uses Ignite UI for React.
76+
When working with UI components, consult the skills in node_modules/igniteui-react/skills/:
77+
78+
- node_modules/igniteui-react/skills/igniteui-react-components/SKILL.md — pick components and use them in React
79+
- node_modules/igniteui-react/skills/igniteui-react-customize-theme/SKILL.md — theming and styling
80+
- node_modules/igniteui-react/skills/igniteui-react-optimize-bundle-size/SKILL.md — bundle optimization
81+
82+
Components use the Igr prefix (IgrButton, IgrGrid, IgrCombo, etc.).
83+
```
84+
85+
### Claude Desktop / Claude Code (Optional)
86+
87+
Add to your `CLAUDE.md` project instructions if needed:
88+
89+
```markdown
90+
## Ignite UI for React
91+
92+
This project uses Ignite UI for React. Refer to these skills for guidance:
93+
94+
- node_modules/igniteui-react/skills/igniteui-react-components/SKILL.md
95+
- node_modules/igniteui-react/skills/igniteui-react-customize-theme/SKILL.md
96+
- node_modules/igniteui-react/skills/igniteui-react-optimize-bundle-size/SKILL.md
97+
98+
All React wrapper components use the `Igr` prefix (e.g. `IgrButton`, `IgrGrid`).
99+
```
100+
101+
### Manual Attachment (All Editors)
102+
103+
You can also attach individual skill files to your AI chat context manually:
104+
105+
1. Open the AI chat panel (Copilot Chat, Cursor Chat, etc.)
106+
2. Use the "Attach file" or "Add context" action
107+
3. Navigate to `node_modules/igniteui-react/skills/` and select the relevant `SKILL.md` file
108+
109+
## Contributing
110+
111+
If you identify gaps in the skills or have suggestions for improvements:
112+
113+
1. [Open an issue](https://github.com/IgniteUI/igniteui-react/issues) describing the improvement
114+
2. Submit a pull request with the proposed changes
115+
3. Follow the skill format and structure of existing skills
116+
117+
## Additional Resources
118+
119+
- [Ignite UI for React Documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started)
120+
- [React Examples Repository](https://github.com/IgniteUI/igniteui-react-examples)
121+
- [npm: igniteui-react](https://www.npmjs.com/package/igniteui-react)
122+
- [GitHub Repository](https://github.com/IgniteUI/igniteui-react)
123+
124+
## License
125+
126+
These skills are provided under the same license as the Ignite UI for React library. See [LICENSE](../LICENSE) for details.

‎skills/igniteui-react-components/SKILL.md‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
---
2+
name: igniteui-react-components
3+
description: This skill identifies the right Ignite UI for React components for any UI pattern and covers installing, importing, and using them — including JSX patterns, event handling, refs, forms, and TypeScript. Use this when choosing components, setting up a React project, writing component JSX, handling events, or integrating with React state and form libraries.
4+
user-invocable: true
5+
---
6+
7+
# Ignite UI for React Components
8+
9+
This skill covers everything from identifying the right component for a UI requirement to installing, setting up, and using Ignite UI for React components — including JSX patterns, event handling, refs, controlled/uncontrolled form components, and TypeScript.
10+
11+
## Example Usage
12+
13+
- "What component should I use to display a list of items with actions?"
14+
- "I need a date picker for a booking form in React"
15+
- "Build a dashboard layout with cards and a data grid"
16+
- "What's the best component for a navigation sidebar?"
17+
- "I need a searchable dropdown with multi-select"
18+
- "How do I install Ignite UI for React?"
19+
- "Set up igniteui-react in my project"
20+
- "How do I handle events on IgrCombo?"
21+
- "How do I use IgrInput with React Hook Form?"
22+
- "Show me how to use refs with IgrDialog"
23+
- "What TypeScript types should I use for IgrButton props?"
24+
- "How do I pass children vs slots to Ignite UI components?"
25+
26+
## Related Skills
27+
28+
- [igniteui-react-customize-theme](../igniteui-react-customize-theme/SKILL.md) — Theme and style components
29+
- [igniteui-react-optimize-bundle-size](../igniteui-react-optimize-bundle-size/SKILL.md) — Reduce bundle size
30+
31+
## When to Use
32+
33+
- Deciding which component fits a UI requirement
34+
- User describes a UI pattern and needs a matching component name
35+
- User wants to explore what components are available
36+
- Setting up Ignite UI for React in a new or existing project
37+
- Writing JSX that uses Ignite UI components
38+
- Handling events from Ignite UI components
39+
- Integrating components with React state or form libraries
40+
- Using refs to call imperative methods on components
41+
- Working with TypeScript prop types
42+
43+
---
44+
45+
## Content Guide
46+
47+
This skill is organized into focused reference files. Load the appropriate file for the situation:
48+
49+
| Topic | File | When to Use |
50+
|---|---|---|
51+
| Component Catalogue | [COMPONENT-CATALOGUE.md](./reference/COMPONENT-CATALOGUE.md) | Mapping UI patterns to components, available packages, common UI scenarios |
52+
| Installation & Setup | [INSTALLATION.md](./reference/INSTALLATION.md) | Setting up packages, importing theme CSS, Next.js setup |
53+
| JSX Patterns | [JSX-PATTERNS.md](./reference/JSX-PATTERNS.md) | Props, children, slots, IgrTabs content vs navigation |
54+
| Event Handling | [EVENT-HANDLING.md](./reference/EVENT-HANDLING.md) | Event props, CustomEvent types, common events |
55+
| Refs & Forms | [REFS-FORMS.md](./reference/REFS-FORMS.md) | useRef, controlled/uncontrolled forms, React Hook Form |
56+
| Charts, Gauges, Maps & Grid Lite | [CHARTS-GRIDS.md](./reference/CHARTS-GRIDS.md) | Module registration, container sizing |
57+
| Reveal SDK | [REVEAL-SDK.md](./reference/REVEAL-SDK.md) | Embedded BI dashboards, theme sync |
58+
| Troubleshooting | [TROUBLESHOOTING.md](./reference/TROUBLESHOOTING.md) | Common issues and solutions |
59+
60+
---
61+
62+
## Quick Start
63+
64+
### 1. Install
65+
66+
```bash
67+
npm install igniteui-react
68+
```
69+
70+
### 2. Import Theme CSS (REQUIRED)
71+
72+
```tsx
73+
// main.tsx
74+
import 'igniteui-webcomponents/themes/light/bootstrap.css';
75+
```
76+
77+
> **CRITICAL:** Without the theme CSS, components will render without styles and icons will be broken.
78+
79+
### 3. Use Components
80+
81+
```tsx
82+
import { IgrButton, IgrInput } from 'igniteui-react';
83+
84+
function App() {
85+
return (
86+
<div>
87+
<IgrInput label="Name" />
88+
<IgrButton><span>Submit</span></IgrButton>
89+
</div>
90+
);
91+
}
92+
```
93+
94+
> **No `defineComponents()` needed.** React wrappers auto-register. See [CHARTS-GRIDS.md](./reference/CHARTS-GRIDS.md) for exceptions (charts, gauges, maps).
95+
96+
---
97+
98+
## Key Concepts
99+
100+
### Choosing the Right Component
101+
102+
Use [COMPONENT-CATALOGUE.md](./reference/COMPONENT-CATALOGUE.md) to map any UI need to the right `Igr*` component and package. For quick guidance:
103+
104+
- **MIT package** (`igniteui-react`) — inputs, buttons, layout, navigation, notifications, scheduling, AI chat
105+
- **Lightweight grid** (MIT) — `IgrGridLite` from `igniteui-react/grid-lite` (requires both `igniteui-react` and `igniteui-grid-lite`)
106+
- **Commercial** — `igniteui-react-grids` (advanced grids), `igniteui-react-charts`, `igniteui-react-gauges`, `igniteui-react-maps`
107+
108+
### Theme CSS Import
109+
110+
- **Always import theme CSS** before using components — see [INSTALLATION.md](./reference/INSTALLATION.md)
111+
- **For grids**, also import `igniteui-react-grids/grids/themes/...`
112+
- **In Next.js**, import in each client component file or root layout
113+
114+
### JSX Patterns
115+
116+
- Use `slot` attribute for named slots: `<span slot="icon">📊</span>`
117+
- Boolean props: `<IgrInput disabled />` is shorthand for `disabled={true}`
118+
- See [JSX-PATTERNS.md](./reference/JSX-PATTERNS.md)
119+
120+
### IgrTabs: Content vs Navigation
121+
122+
- **Content panels**: Use `IgrTab` with inline content (label via `label` prop or `slot="label"`)
123+
- **Navigation (router)**: Use **only `IgrTab`** with label-only (no inline content)
124+
- See [JSX-PATTERNS.md](./reference/JSX-PATTERNS.md)
125+
126+
### Events
127+
128+
- Events are `CustomEvent` objects, not React `SyntheticEvent`
129+
- Access data via `e.target` or `e.detail`
130+
- See [EVENT-HANDLING.md](./reference/EVENT-HANDLING.md)
131+
132+
### Refs
133+
134+
- Use `useRef<HTMLElement>(null)` and cast to access imperative API
135+
- See [REFS-FORMS.md](./reference/REFS-FORMS.md)
136+
137+
### Charts, Gauges, Maps & Grid Lite
138+
139+
- **Charts/Gauges/Maps require explicit registration**: `IgrCategoryChartModule.register()`
140+
- **All require sized container**: `min-width`, `min-height`, or `flex-grow`
141+
- **Grid Lite** requires both `igniteui-react` and `igniteui-grid-lite` packages, import from `igniteui-react/grid-lite`
142+
- See [CHARTS-GRIDS.md](./reference/CHARTS-GRIDS.md)
143+
144+
---
145+
146+
## Best Practices
147+
148+
1. **Start with the MIT package** (`igniteui-react`) — it covers most common UI needs
149+
2. **Import theme CSS first** — components need it to render correctly
150+
3. **Don't call `defineComponents()`** — React wrappers auto-register
151+
4. **Register chart/gauge/map modules** — call `.register()` at module level
152+
5. **Wrap charts/gauges/maps in sized containers** — they need explicit dimensions
153+
6. **Use named imports** — enables tree-shaking
154+
7. **Handle events as `CustomEvent`** — not `React.SyntheticEvent`
155+
8. **Use refs sparingly** — prefer declarative props
156+
9. **Check slot names** in the docs
157+
158+
## Additional Resources
159+
160+
- [Ignite UI for React — Getting Started](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started)
161+
- [React Examples Repository](https://github.com/IgniteUI/igniteui-react-examples)
162+
- [npm: igniteui-react](https://www.npmjs.com/package/igniteui-react)
163+
- [@lit/react Documentation](https://lit.dev/docs/frameworks/react/)

0 commit comments

Comments
 (0)