Skip to content
Live Demo from Reveal: How AI is changing embedded analytics workflows
Save my Seat
Infragistics
Start Free Trial

AI-Assisted Development

AI Agent Skills for Modern Web Frameworks

Ignite UI AI Agent Skills are SKILL.md files that teach GitHub Copilot, Claude Code, Cursor and other coding agents how to use Ignite UI components correctly in Angular, React, Web Components and Blazor — so they generate framework-aware code instead of guessing.

igniteui-angular-grids/SKILL.md---name: igniteui-angular-gridsdescription: "Provides guidance on all Ignite UI for Angular data grid types (Flat Grid, Tree Grid, …)"---# Ignite UI for Angular — Data Grids## Required Workflow1. Identify the grid type.2. Identify every task category involved.ig ai-config.github/skills/GitHub Copilot.claude/skills/Claude Code.cursor/skills/Cursor.agents/skills/Codex · Gemini · Windsurf.junie/skills/JetBrains Junie

  1. Ambiguous component choices

    Which grid — Grid, Tree Grid, Hierarchical, Pivot or Grid Lite?

    Identify the grid type. Use the Grid Selection Decision Guide below. If the grid type is not explicitly stated, infer it from context or ask.

    igniteui-angular-grids/SKILL.md · line 14

  2. Outdated or incorrect APIs

    Selectors, imports and properties recalled from training data — maybe from an older release.

    Grid APIs change between releases, so never write component selectors, import paths, method names, or property names from memory — read the relevant reference files first.

    igniteui-angular-grids/SKILL.md · line 12

  3. Inconsistent patterns

    Every assistant, and every session, fills the gaps its own way.

    Read every identified reference file in full … Then produce output, based only on what you read.

    igniteui-angular-grids/SKILL.md · line 16–17
“an unnecessary file read is cheap; a hallucinated API is a broken application.”igniteui-angular-grids/SKILL.md · line 33

The Problem

Why Prompting Alone Isn't Enough

Prompting relies heavily on interpretation, which means even well-written prompts can lead to ambiguous component choices, outdated or incorrect APIs, and inconsistent implementation patterns. Agent Skills remove that uncertainty by giving the model a structured, repeatable playbook to follow instead of asking it to figure things out on its own.

The result is more consistent component usage across teams and fewer AI-generated corrections in code review.

The Solution

What Are AI Agent Skills?

Ignite UI AI Agent Skills are SKILL.md files, maintained by Infragistics, that you add to your repository and can extend with your own conventions. They define which components to use, how to configure them correctly, and how to follow framework-specific patterns for layout, API usage, and styling, giving the AI a structured playbook instead of a blank context.

They follow the open Agent Skills format, so the same files work across GitHub Copilot, Claude Code, Cursor, Windsurf, Codex, Gemini CLI and JetBrains Junie. Browse the real files beside this.

What’s Inside Ignite UI Agent Skills

Each framework ships its own set of skills, written against that library’s real API. An assistant loads the one it needs for the task at hand.

Angular

Ship in the igniteui-angular npm package. From Ignite UI for Angular 21.1.0, assistants discover them automatically once they are in a skills folder.

  • igniteui-angular-components — components, form controls, overlays and layout
  • igniteui-angular-grids — Grid, Tree, Hierarchical and Pivot Grid, with sorting, filtering, grouping, paging and remote data
  • igniteui-angular-theming — palettes, typography, elevations and component themes, with the Theming MCP
  • igniteui-angular-generate-from-image-design — build views from screenshots, mockups and wireframes
node_modules/igniteui-angular/skills/Angular Agent Skills guide

React

Ship in the igniteui-react npm package.

  • igniteui-react-components — choosing, installing and importing components, with JSX, events, refs, forms and TypeScript
  • igniteui-react-customize-theme — palettes, typography, elevations and component themes, with the Theming MCP
  • igniteui-react-optimize-bundle-size — tree shaking and bundle-size optimization
  • igniteui-react-generate-from-image-design — build views from screenshots, mockups and wireframes
node_modules/igniteui-react/skills/React Agent Skills guide

Web Components

Ship in the igniteui-webcomponents npm package.

  • igniteui-wc-choose-components — components, form controls, overlays and layout
  • igniteui-wc-integrate-with-framework — wiring the components into React, Angular, Vue or plain JavaScript
  • igniteui-wc-customize-component-theme — palettes, typography, elevations and themes, with the Theming MCP
  • igniteui-wc-optimize-bundle-size — tree shaking and bundle-size optimization
  • igniteui-wc-generate-from-image-design — build views from screenshots, mockups and wireframes
node_modules/igniteui-webcomponents/skills/Web Components Agent Skills guide

Blazor

Published in the igniteui-blazor GitHub repository rather than the NuGet package; ig ai-config finds your .csproj or .sln and installs them.

  • igniteui-blazor-components — components, form controls, overlays and layout
  • igniteui-blazor-grids — Grid, Tree, Hierarchical Grid and Grid Lite, with sorting, filtering, grouping, paging and remote data
  • igniteui-blazor-theming — palettes, typography, elevations and component themes, with the Theming MCP
  • igniteui-blazor-generate-from-image-design — build views from screenshots, mockups and wireframes
Blazor Agent Skills guide
terminal
npm install -g igniteui-cli
ig ai-config

# or pick your agents and assistants up front
ig ai-config --agents claude copilot cursor --assistants vscode

Get Started

Install the Skills With One Command

Run ig ai-config in your project. It detects the framework, copies its skills into the folders your agents read — .agents/skills, .claude/skills, .github/skills, .cursor/skills and more — writes the matching instruction files, and configures the CLI and Theming MCP servers. Projects created with ig new come with all of this already.

Prefer another route? The GitHub CLI (gh skill install) and the skills CLI (npx skills add) install them straight from the Ignite UI repositories, and on npm you can copy them from node_modules yourself.

Read the Setup Guide

Why Ignite UI

Ignite UI combines a complete component system with the structured context AI agents need to generate accurate UI — in three layers, each independently configurable, and all three set up by ig ai-config.

AI Agent Skills

You are here: the layer that teaches an assistant how Ignite UI components are actually used — the props, the patterns and the pitfalls.

  • Ship inside igniteui-angular, igniteui-react and igniteui-webcomponents; Blazor skills install from GitHub
  • Component, grid and theming patterns, plus design-to-code from an image
ig ai-config

CLI MCP Server

The CLI MCP gives an assistant the current docs, API reference and project-setup steps for every framework, so it scaffolds and extends apps with the Ignite UI CLI rather than from a remembered API.

  • Setup guides that drive the Ignite UI CLI
  • Current docs and API reference for Angular, React, Web Components and Blazor
  • Works over STDIO with any MCP client that supports it
About the CLI MCP Server

Theming MCP Server

The Theming MCP generates palettes, themes and component styles through the Ignite UI Theming Engine, so an assistant themes with real tokens instead of from memory.

  • Ships inside the igniteui-theming package
  • Material, Bootstrap, Fluent and Indigo, light or dark
About the Theming MCP Server

FAQs About Ignite UI Agent Skills

How are AI Agent Skills different from prompts?

Prompts rely on the model to interpret what you mean, which can lead to variation in output. AI Agent Skills provide explicit, reusable instructions that remove ambiguity and guide the AI toward consistent, correct implementations.

How do I install Ignite UI Agent Skills?

Run ig ai-config in your project (install the CLI with npm install -g igniteui-cli). It copies the skills for your framework into the folders your AI agents read, writes the instruction files, and configures the Ignite UI CLI and Theming MCP servers. You can also use gh skill install IgniteUI/igniteui-angular (or igniteui-react, igniteui-webcomponents, igniteui-blazor), npx skills add with the same repository, or copy them from node_modules/igniteui-angular/skills (and the equivalent React and Web Components packages).

Where do the skill files go?

Into a folder your assistant reads: .agents/skills works for VS Code with Copilot, Cursor, Codex, Gemini CLI, Antigravity and Windsurf; GitHub Copilot also reads .github/skills, Claude Code reads .claude/skills, Cursor .cursor/skills, and JetBrains Junie .junie/skills. ig ai-config writes to the right ones for the agents you choose.

Can I customize the skills for my project?

Yes. Each skill is a SKILL.md markdown file in your repository. Edit it to match your team's conventions, add project-specific component patterns, and version it with your code.

Do I need to change how my team writes prompts?

No. AI Agent Skills work alongside your existing prompts and tools, improving the quality of the output without requiring major workflow changes. Your team can continue using the same tools, but with more reliable results.

Which frameworks are supported by Ignite UI Agent Skills?

Ignite UI Agent Skills cover Angular, React, Web Components and Blazor, with guidance tailored to each framework's patterns and best practices — for example components, grids, theming and generating an app from an image design.

Can AI Agent Skills work with tools like GitHub Copilot or Cursor?

Yes. The skills use the open Agent Skills format, and ig ai-config installs them for GitHub Copilot, Claude Code, Cursor, Windsurf, Codex, Gemini CLI and JetBrains Junie, giving those tools the structured context they need to generate more accurate, framework-aware code.

Included with Ignite UI

AI Capabilities Included No New Pricing

Extend the AI tools you and your team already use. The toolchain is part of the library, because AI agents are already part of your team.

  • No usage-based AI tier
  • No separate billing model
  • No new IDE to learn
Choose Free Trial

Select a framework to get started for free: