Ignite UI for React - Dedicated Skills

[zdrawku]

Plan: Ignite UI for React — Dedicated Skills

Background & Rationale

The WC skills were written for a framework-agnostic library. The React library (igniteui-react) is a layer of React wrappers over those web components, with different package names, component prefixes (Igr* vs Igc*), prop/event conventions, and React-specific usage patterns. Sharing the WC skills means developers get framework-agnostic or even wrong guidance. The React skills should be self-contained, committed into igniteui-react, and discoverable by Copilot/Cursor/Claude Code.

---

Directory Structure to Create

skills/
├── README.md
├── igniteui-react-choose-components/
│   └── SKILL.md
├── igniteui-react-use-components/
│   └── SKILL.md
├── igniteui-react-customize-theme/
│   └── SKILL.md
└── igniteui-react-optimize-bundle-size/
    └── SKILL.md

---

Skills to Author

1. igniteui-react-choose-components

Maps from WC: igniteui-wc-choose-components — adapted, not shared.

The agent should produce a skill that:

• Lists all available React components with their Igr* names (e.g. IgrButton, IgrGrid, IgrCalendar) and maps them to the UI pattern they serve
• Points to the React-specific documentation at https://infragistics.com/reactsite/components/ and the React Storybook/samples at https://github.com/IgniteUI/igniteui-react-examples
• Covers which sub-package each component lives in (igniteui-react for core UI components, igniteui-react-grids for grids, igniteui-react-charts for charts, etc.)
• Explains how to search docs when unsure, using React component naming conventions

Key difference from WC skill: no references to igc-* tags or custom element registration. No defineComponents() calls.

---

2. igniteui-react-use-components (New — no direct WC counterpart)

This is the most React-specific skill and has no real equivalent in the WC set (the WC "integrate-with-framework" skill touched on React as one of four frameworks). This new skill should cover:

• Installation & setup: Installing igniteui-react (or sub-packages), adding IgrStyles or the theming stylesheet to index.tsx/App.tsx, and any peer dependency notes
• JSX usage patterns: Component props vs HTML attributes (value={...} not value="..."), boolean props, children vs slots
• Event handling: React's synthetic event system vs the WC custom events — how onXxx props work on the React wrappers and how to handle them with TypeScript types
• Refs: Using useRef to access the underlying web component imperative API when needed
• Controlled vs uncontrolled components: How to wire up form components (IgrInput, IgrCheckbox, IgrSelect) with useState or React Hook Form
• TypeScript: Using the provided Igr* prop type interfaces

---

3. igniteui-react-customize-theme

Maps from WC: igniteui-wc-customize-component-theme — adapted.

• CSS custom properties work identically to WC, but the skill should explain how to apply them in a React context (in index.css, a CSS module, or via inline style on a wrapper div)
• CSS ::part() selectors — same underlying shadow DOM, but may need context on how to structure this in a React app
• configureTheme() — calling the theming function in React's lifecycle (e.g. in a useEffect at app root, or in main.tsx before ReactDOM.createRoot)
• Component-level theme isolation — using CSS custom properties scoped to a container class
• Remove all WC-specific content like LitElement or igc-theme-* attribute examples

---

4. igniteui-react-optimize-bundle-size

Maps from WC: igniteui-wc-optimize-bundle-size — substantially rewritten.

• Granular package imports: igniteui-react (core UI), igniteui-react-grids, igniteui-react-charts, igniteui-react-maps, igniteui-react-gauges — install only what you need
• Named imports only: Import specific components rather than barrel/wildcard imports to enable tree-shaking
• Lazy loading with React.lazy + Suspense: Code-split heavy components like grids and charts behind route-level lazy imports
• Avoid defineAllComponents() (the React layer doesn't use this, but the underlying WC might be invoked — clarify that the React wrappers handle registration automatically per-component)
• Bundle analysis: webpack-bundle-analyzer or Vite's rollup-plugin-visualizer to identify which sub-packages are included and measure impact

---

skills/README.md

The agent should write a README modelled on the WC one, with a table of all four skills and their use-when descriptions, plus setup instructions for:

• GitHub Copilot (via .github/copilot-instructions.md)
• Cursor (.cursorrules)
• Claude Code/Desktop (CLAUDE.md project instructions)
• VS Code / JetBrains manual attachment

---

Execution Instructions for the Agent

1. Fetch and read the four existing WC SKILL.md files from https://github.com/IgniteUI/igniteui-webcomponents/tree/master/skills to use as structural templates
2. Fetch the React docs at https://infragistics.com/reactsite/components/ and scan the igniteui-react npm package README to extract accurate component names, sub-package structure, and install instructions
3. Author each SKILL.md following the same section structure as the WC skills (Example Usage → When to Use → Related Skills → Step-by-Step Instructions → Common Issues → Best Practices → Additional Resources)
4. All component names, package names, and import paths must be verified against the actual igniteui-react package — do not copy WC (Igc*/igc-*) identifiers directly
5. Write skills/README.md with the full skill table and editor setup instructions
6. Open a PR against the master branch of igniteui-react with the title feat(skills): add React-specific LLM agent skills

---

What NOT to Do

• Do not simply copy-paste the WC skills and do a find-replace of wc → react — each skill needs genuine React-specific content
• Do not include the igniteui-wc-integrate-with-framework skill at all — React is the only target, so a dedicated setup section inside igniteui-react-use-components is sufficient
• Do not reference defineComponents(), IgcComponent names, or custom element HTML tags (<igc-*>) in any skill — those are WC internals