Skip to content

SKILL.md

Latest commit

 

History

History
188 lines (137 loc) · 8.07 KB

SKILL.md

File metadata and controls

188 lines (137 loc) · 8.07 KB
name igniteui-react-components
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.
user-invocable true

Ignite UI for React Components

Prerequisites

  • The Ignite UI CLI MCP server (igniteui-cli) available as a tool provider

AGENT INSTRUCTION — MCP Server Setup (REQUIRED)

Before using the Ignite UI CLI MCP tools, you MUST verify the MCP server is available by calling list_components. If the tool is not available or the call fails, you MUST automatically configure it by following the setup process steps described below.

After writing the file, inform the user that the MCP server has been configured and they may need to reload the editor for the tools to activate. Start the MCP server and wait for that MCP server to start before continuing the component-related work. Do NOT skip this step or ask the user to do it manually.

Setting Up the Ignite UI CLI MCP Server

Full setup instructions for VS Code, Cursor, Claude Desktop, and JetBrains IDEs are in reference/MCP-SERVER.md. Read that file for editor-specific configuration steps and verification.

Package Routing

Component family Install packages Import from
Core UI components igniteui-react igniteui-react
Advanced grids igniteui-react-grids (trial) @infragistics/igniteui-react-grids (licensed) igniteui-react-grids
Grid Lite igniteui-react, igniteui-grid-lite igniteui-react, igniteui-grid-lite
Charts igniteui-react-charts (trial) @infragistics/igniteui-react-charts (licensed) igniteui-react-charts
Gauges igniteui-react-gauges (trial) @infragistics/igniteui-react-gauges (licensed) igniteui-react-gauges
Maps igniteui-react-maps (trial) @infragistics/igniteui-react-maps (licensed) igniteui-react-maps

Example Usage

  • "What component should I use to display a list of items with actions?"
  • "I need a date picker for a booking form in React"
  • "Build a dashboard layout with cards and a data grid"
  • "What's the best component for a navigation sidebar?"
  • "I need a searchable dropdown with multi-select"
  • "How do I install Ignite UI for React?"
  • "Set up igniteui-react in my project"
  • "How do I handle events on IgrCombo?"
  • "How do I use IgrInput with React Hook Form?"
  • "Show me how to use refs with IgrDialog"
  • "What TypeScript types should I use for IgrButton props?"
  • "How do I pass children vs slots to Ignite UI components?"

Related Skills

When to Use

  • Deciding which component fits a UI requirement
  • User describes a UI pattern and needs a matching component name
  • User wants to explore what components are available
  • Setting up Ignite UI for React in a new or existing project
  • Writing JSX that uses Ignite UI components
  • Handling events from Ignite UI components
  • Integrating components with React state or form libraries
  • Using refs to call imperative methods on components
  • Working with TypeScript prop types

Content Guide

This skill is organized into focused reference files. Load the appropriate file for the situation:

Topic File When to Use
Component Catalogue COMPONENT-CATALOGUE.md Mapping UI patterns to components, available packages, common UI scenarios
Installation & Setup INSTALLATION.md Setting up packages, importing theme CSS, Next.js setup
JSX Patterns JSX-PATTERNS.md Props, children, slots, IgrTabs content vs navigation
Event Handling EVENT-HANDLING.md Event props, CustomEvent types, common events
Refs & Forms REFS-FORMS.md useRef, controlled/uncontrolled forms, React Hook Form
Charts, Gauges, Maps & Grid Lite CHARTS-GRIDS.md Module registration, container sizing
Troubleshooting TROUBLESHOOTING.md Common issues and solutions

Quick Start

1. Install

npm install igniteui-react

2. Import Theme CSS (REQUIRED)

// main.tsx
import 'igniteui-webcomponents/themes/light/bootstrap.css';

CRITICAL: Without the theme CSS, components will render without styles and icons will be broken. See INSTALLATION.md for all available themes and setup.

3. Use Components

import { IgrButton, IgrInput } from 'igniteui-react';

function App() {
  return (
    <div>
      <IgrInput label="Name" />
      <IgrButton><span>Submit</span></IgrButton>
    </div>
  );
}

No defineComponents() needed. React wrappers auto-register. See CHARTS-GRIDS.md for exceptions (charts, gauges, maps).

Key Concepts

Choosing the Right Component

Use COMPONENT-CATALOGUE.md to map any UI need to the right Igr* component and package. For quick guidance:

  • MIT package (igniteui-react) — inputs, buttons, layout, navigation, notifications, scheduling, AI chat
  • Lightweight grid (MIT) — IgrGridLite from igniteui-react/grid-lite (requires both igniteui-react and igniteui-grid-lite)
  • Commercial — igniteui-react-grids (advanced grids), igniteui-react-charts, igniteui-react-gauges, igniteui-react-maps

Theme CSS Import

  • Always import theme CSS before using components. For grids, also import igniteui-react-grids/grids/themes/...
  • see INSTALLATION.md

JSX Patterns

  • Use props just like any React component
  • Use slot attribute for named slots: <span slot="icon">📊</span>
  • See JSX-PATTERNS.md

IgrTabs: Content vs Navigation

  • Content panels: Use IgrTab with inline content (label via label prop or slot="label")
  • Navigation (router): Use only IgrTab with label-only (no inline content)
  • See JSX-PATTERNS.md

Events

  • Events are CustomEvent objects, not React SyntheticEvent
  • Access data via e.target or e.detail
  • See EVENT-HANDLING.md

Refs

  • Use useRef<IgrDialog>(null) with the component type:
  • See REFS-FORMS.md

Charts, Gauges, Maps & Grid Lite

  • Charts/Gauges/Maps require explicit registration: IgrCategoryChartModule.register()
  • All require sized container: min-width, min-height, or flex-grow
  • Grid Lite requires both igniteui-react and igniteui-grid-lite packages, import from igniteui-react/grid-lite
  • See CHARTS-GRIDS.md

Best Practices

  1. Start with the MIT package (igniteui-react) — it covers most common UI needs
  2. Import theme CSS first — components need it to render correctly
  3. Register chart/gauge/map modules — call .register() at module level
  4. Wrap charts/gauges/maps in sized containers — they need explicit dimensions
  5. Use named imports — enables tree-shaking
  6. Handle events as CustomEvent — not React.SyntheticEvent
  7. Use refs sparingly — prefer declarative props
  8. Check slot names in the docs

Additional Resources