igniteui-react-components

Covers choosing, installing, and using Ignite UI for React (Igr*) components: package routing, theme CSS, JSX and slots, events, refs, forms, TypeScript, charts, gauges, maps, and grids. WHEN TO USE: choosing a component for a UI pattern, setting up igniteui-react in a React or Next.js app, writing Igr* JSX, wiring events, refs, or forms, looking up component APIs through the igniteui-cli MCP server, or debugging components that render unstyled, invisible, or with broken icons. WHEN NOT TO USE: brand colors, dark mode, or component token overrides (use igniteui-react-customize-theme), reducing bundle size or lazy loading (use igniteui-react-optimize-bundle-size), building a view from a screenshot or mockup (use igniteui-react-generate-from-image-design), or moving from Grid Lite to the premium grid (use igniteui-react-migrate-grid-lite-to-premium).

Jump to install Review files

Repository: IgniteUI/igniteui-react
Last source activity: September 28, 2026 at 06:27
Detected SKILL.md language: English
Stars: 56
Forks: 4

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with an AI assistant

Copy this prompt into the AI assistant you're using.

Follow https://skillsmp.com/skill-install/prompt.md to install only the Agent Skill at https://github.com/IgniteUI/igniteui-react/tree/master/skills/igniteui-react-components.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/IgniteUI/igniteui-react --skill igniteui-react-components

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

6 files

SKILL.md

Source instructions · Read-only preview

name

igniteui-react-components

description

Back to search Back to installation

skill-authoring

Provides rules for writing or updating a SKILL.md in this repository: frontmatter validation for license, name and description, the WHEN TO USE and WHEN NOT TO USE description format, the 500-line body budget with progressive disclosure into reference files, and the extra constraints on public skills that ship in the igniteui-react package. WHEN TO USE: creating a new skill under .agents/skills/ or skills/, or editing an existing skill's frontmatter, scope, length, or links. WHEN NOT TO USE: building an app with Ignite UI for React (use the public igniteui-react-* skills in skills/), changing the wrapper generators, entry points, or tests (see .agents/context/project.md), or changing the contribution rules themselves (edit .github/CONTRIBUTING.md).

2026-09-28

igniteui-react-customize-theme

Covers theming Ignite UI for React with CSS custom properties: brand palette, dark mode, size, spacing and roundness, per-component tokens, and scoped themes, optionally through the igniteui-theming MCP server. WHEN TO USE: applying brand colors, switching between light and dark, changing a component's appearance (grid headers, buttons, avatars), setting up the igniteui-theming MCP server, or fixing theme overrides that do not take effect. WHEN NOT TO USE: choosing components or adding the initial theme CSS import (use igniteui-react-components), building a whole view from a design image (use igniteui-react-generate-from-image-design, which includes theming), or styling elements that are not Ignite UI components.

2026-09-28

igniteui-react-generate-from-image-design

Covers building a React view from a design image (screenshot, mockup, or wireframe) with Ignite UI for React components and generated theme tokens, using the igniteui-cli and igniteui-theming MCP servers when available. WHEN TO USE: the user supplies an image and asks to implement this design, build this UI, convert this mockup, or create a page from this screenshot in an Ignite UI for React project. WHEN NOT TO USE: no image is provided and the user only needs a component recommendation (use igniteui-react-components), the task is only theming or restyling existing views (use igniteui-react-customize-theme), or the task is reducing bundle size (use igniteui-react-optimize-bundle-size).

2026-09-28

View all from this repository

igniteui-react-components

Source facts

Install options

Install with an AI assistant

Review the source files

More from this repository

Install with an AI assistant

More from this repository