Skip to content

README.md

Latest commit

 

History

History
45 lines (32 loc) · 2.71 KB

README.md

File metadata and controls

45 lines (32 loc) · 2.71 KB
Raw

Agent Skills for Ignite UI for React

Task-focused instructions that help AI coding agents use Ignite UI for React correctly — component selection, setup, theming, performance, and migration. Each skill is self-contained and framework-specific.

Available skills

Skill Use when
igniteui-react-components Choosing an Igr* component, setting up igniteui-react, writing JSX, wiring events/refs/forms, or debugging components that render unstyled or invisible
igniteui-react-customize-theme Applying brand colors, switching light/dark, overriding component appearance
igniteui-react-optimize-bundle-size The bundle is too large, or grids/charts are in the initial chunk
igniteui-react-generate-from-image-design Building a view from a screenshot, mockup, or wireframe
grid-lite-to-igr-grid-migration Grid Lite lacks a needed feature — editing, selection, paging, grouping, export

Agents pick a skill from the request, so ordinary questions are enough: "add a data grid to my React app", "build this dashboard screenshot", "match our brand colors", "my bundle is too large". Naming a skill directly also works: "use the igniteui-react-customize-theme skill".

MCP servers

Two optional MCP servers make the agent's answers authoritative rather than recalled:

  • igniteui-cli — component docs and API reference (list_components, get_doc, get_api_reference, search_docs, search_api)
  • igniteui-theming — palette, typography, elevation, and per-component theme generation

Every skill works without them, falling back to the type declarations in node_modules. Setup instructions are in igniteui-react-components/reference/MCP.md and the theming skill.

Installation

Copy the skill folders into the directory your agent reads:

Agent Directory
Claude Code .claude/skills/
GitHub Copilot .agents/skills/
Cursor, Windsurf, others see the agent's documentation

Keep each skill's SKILL.md alongside its reference/ folder (when present) — the reference files are loaded on demand and the relative links between skills assume the layout is preserved.

.claude/skills/
  igniteui-react-components/{SKILL.md,reference/}
  igniteui-react-customize-theme/{SKILL.md,reference/}
  igniteui-react-optimize-bundle-size/SKILL.md
  igniteui-react-generate-from-image-design/{SKILL.md,reference/}
  grid-lite-to-igr-grid-migration/SKILL.md