Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 41 additions & 1 deletion .azure-pipelines/artifacts/README_Components.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,14 +62,54 @@ This package provides the following components:
| Tree | ✅ | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/tree) |

## AI-Assisted Development

Ignite UI for React provides a toolchain to enhance the AI coding workflow — **Agent Skills**, the **Ignite UI CLI MCP server**, the **Ignite UI Theming MCP server**, and the **MAKER MCP server** — that grounds AI coding assistants in correct component APIs, import paths, and design tokens.

| Component | What it provides |
|:----------|:----------------|
| **Agent Skills** | Structured specialized knowledge and workflow files: import paths, component patterns, decision flows, generate from image design |
| **CLI MCP server** (`igniteui-cli`) | Documentation queries, API reference, project scaffolding tools via MCP |
| **Theming MCP server** (`igniteui-theming`) | Design tokens, palette tools, CSS custom property generation, WCAG AA contrast validation |
| **MAKER MCP server** (`@igniteui/maker-mcp`) | Multi-agent orchestration: decomposes complex tasks into validated, executable step plans |

> **Note:** All AI toolchain commands require Ignite UI CLI 15.0.0 or newer.

### Add AI toolchain to an existing project

Run this command from the root of your project:

```bash
ig ai-config
```

This package ships with **LLM Agent Skills** — structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI, etc.) how to work with Ignite UI for React. The skill files are included in the [`igniteui-react`](https://www.npmjs.com/package/igniteui-react) package and also live in the [`skills/`](https://github.com/IgniteUI/igniteui-react/tree/master/skills) directory:
> If the Ignite UI CLI is not installed globally, run `npm install -g igniteui-cli`.

This adds Agent Skills and instructions to agent discovery path(s) and configures MCP server entries.

### Start a new project with AI toolchain

Run the Ignite UI CLI to scaffold a new React project with the AI toolchain configured from the start:

```bash
ig new
```
> If the Ignite UI CLI is not installed globally, run `npm install -g igniteui-cli`.

### Agent Skills

This package ships with **Agent Skills** — structured knowledge files that tell AI coding assistants exactly how to use Ignite UI for React. The skill files are included in the [`igniteui-react`](https://www.npmjs.com/package/igniteui-react) package and also live in the [`skills/`](https://github.com/IgniteUI/igniteui-react/tree/master/skills) directory.

| Skill | Description |
|:------|:------------|
| **components** | Identify the right React components (`Igr*`) for a UI pattern, then install, import, and use them — JSX patterns, events, refs, forms, Next.js setup |
| **customize-theme** | Customize styling using CSS custom properties, Sass, and the theming system in React |
| **optimize-bundle-size** | Reduce bundle size with granular imports, tree-shaking, and lazy loading |
| **generate-from-image-design** | Turn a screenshot, mockup, or wireframe into a React view using Ignite UI components, MCP-guided theming, and screenshot-first layout matching |

When a Skill is active in the AI client, the agent follows the Skill instead of relying on general training data — which may reference outdated API signatures or import paths.


For full setup instructions, see the [AI-Assisted Development documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/ai/ai-assisted-development-overview).

## License

Expand Down
46 changes: 43 additions & 3 deletions .azure-pipelines/artifacts/README_DockManager.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,54 @@ Provide a complete windowing experience, splitting complex layouts into smaller,
- Fully customizable appearance and behavior

## AI-Assisted Development

This package ships with **LLM Agent Skills** — structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI, etc.) how to work with Ignite UI for React. The skill files are included in the [`igniteui-react`](https://www.npmjs.com/package/igniteui-react) package and also live in the [`skills/`](https://github.com/IgniteUI/igniteui-react/tree/master/skills) directory:


Ignite UI for React provides a toolchain to enhance the AI coding workflow — **Agent Skills**, the **Ignite UI CLI MCP server**, the **Ignite UI Theming MCP server**, and the **MAKER MCP server** — that grounds AI coding assistants in correct component APIs, import paths, and design tokens.

| Component | What it provides |
|:----------|:----------------|
| **Agent Skills** | Structured specialized knowledge and workflow files: import paths, component patterns, decision flows, generate from image design |
| **CLI MCP server** (`igniteui-cli`) | Documentation queries, API reference, project scaffolding tools via MCP |
| **Theming MCP server** (`igniteui-theming`) | Design tokens, palette tools, CSS custom property generation, WCAG AA contrast validation |
| **MAKER MCP server** (`@igniteui/maker-mcp`) | Multi-agent orchestration: decomposes complex tasks into validated, executable step plans |

> **Note:** All AI toolchain commands require Ignite UI CLI 15.0.0 or newer.

### Add AI toolchain to an existing project

Run this command from the root of your project:

```bash
ig ai-config
```

> If the Ignite UI CLI is not installed globally, run `npm install -g igniteui-cli`.

This adds Agent Skills and instructions to agent discovery path(s) and configures MCP server entries.

### Start a new project with AI toolchain

Run the Ignite UI CLI to scaffold a new React project with the AI toolchain configured from the start:

```bash
ig new
```

> If the Ignite UI CLI is not installed globally, run `npm install -g igniteui-cli`.

### Agent Skills

Ignite UI for React ships with **Agent Skills** — structured knowledge files that tell AI coding assistants exactly how to use Ignite UI for React. The skill files are included in the [`igniteui-react`](https://www.npmjs.com/package/igniteui-react) package and also live in the [`skills/`](https://github.com/IgniteUI/igniteui-react/tree/master/skills) directory.

| Skill | Description |
|:------|:------------|
| **components** | Identify the right React components (`Igr*`) for a UI pattern, then install, import, and use them — JSX patterns, events, refs, forms, Next.js setup |
| **customize-theme** | Customize styling using CSS custom properties, Sass, and the theming system in React |
| **optimize-bundle-size** | Reduce bundle size with granular imports, tree-shaking, and lazy loading |
| **generate-from-image-design** | Turn a screenshot, mockup, or wireframe into a React view using Ignite UI components, MCP-guided theming, and screenshot-first layout matching |

When a Skill is active in the AI client, the agent follows the Skill instead of relying on general training data — which may reference outdated API signatures or import paths.

For full setup instructions, see the [AI-Assisted Development documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/ai/ai-assisted-development-overview).

## License

Expand Down
46 changes: 17 additions & 29 deletions .azure-pipelines/artifacts/README_Grids.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,28 +38,28 @@ This package provides the following grid components:

## AI-Assisted Development

Ignite UI for React provides a complete AI toolchain — **Agent Skills**, the **Ignite UI CLI MCP server**, the **Ignite UI Theming MCP server**, and the **MAKER MCP server** — that grounds AI coding assistants in correct component APIs, import paths, and design tokens.
Ignite UI for React provides a toolchain to enhance the AI coding workflow — **Agent Skills**, the **Ignite UI CLI MCP server**, the **Ignite UI Theming MCP server**, and the **MAKER MCP server** — that grounds AI coding assistants in correct component APIs, import paths, and design tokens.

| Component | What it provides | Requires Ignite UI installed? |
|:----------|:----------------|:-----------------------------:|
| **Agent Skills** | Developer-owned instruction packages: import paths, component patterns, decision flows, project conventions | Yes |
| **CLI MCP server** (`igniteui-cli`) | Documentation queries, API reference, project scaffolding tools via MCP | No |
| **Theming MCP server** (`igniteui-theming`) | Design tokens, palette tools, CSS custom property generation, WCAG AA contrast validation | No |
| **MAKER MCP server** (`@igniteui/maker-mcp`) | Multi-agent orchestration: decomposes complex tasks into validated, executable step plans | No |
| Component | What it provides |
|:----------|:----------------|
| **Agent Skills** | Structured specialized knowledge and workflow files: import paths, component patterns, decision flows, generate from image design |
| **CLI MCP server** (`igniteui-cli`) | Documentation queries, API reference, project scaffolding tools via MCP |
| **Theming MCP server** (`igniteui-theming`) | Design tokens, palette tools, CSS custom property generation, WCAG AA contrast validation |
| **MAKER MCP server** (`@igniteui/maker-mcp`) | Multi-agent orchestration: decomposes complex tasks into validated, executable step plans |

> **Note:** All AI toolchain commands require Ignite UI CLI 16.0.0 or newer.

You can start evaluating Ignite UI AI assistance with the MCP servers alone — Ignite UI does not need to be installed in your project. Agent Skills become available once you install Ignite UI packages.
> **Note:** All AI toolchain commands require Ignite UI CLI 15.0.0 or newer.

### Add AI toolchain to an existing project

Run this command from the root of your project:

```bash
npx igniteui-cli ai-config
ig ai-config
```

> If the Ignite UI CLI is not installed globally, run `npm install -g igniteui-cli`.

This copies Agent Skills into the agent discovery path and writes MCP server entries to `.vscode/mcp.json`. After the command finishes, start the MCP servers in your AI client — they are configured but not yet running.
This adds Agent Skills and instructions to agent discovery path(s) and configures MCP server entries.

### Start a new project with AI toolchain

Expand All @@ -69,34 +69,22 @@ Run the Ignite UI CLI to scaffold a new React project with the AI toolchain conf
ig new
```

The CLI prompts for project name and theme, installs dependencies, and configures Agent Skills and MCP servers in a single interactive flow. If the CLI is not installed globally, use `npx igniteui-cli@latest new`.
> If the Ignite UI CLI is not installed globally, run `npm install -g igniteui-cli`.

### Agent Skills

This package ships with **Agent Skills** — structured, developer-owned instruction packages that tell AI coding assistants exactly how to use Ignite UI for React. The skill files are included in the [`igniteui-react`](https://www.npmjs.com/package/igniteui-react) package and also live in the [`skills/`](https://github.com/IgniteUI/igniteui-react/tree/master/skills) directory.
Ignite UI for React ships with **Agent Skills** — structured knowledge files that tell AI coding assistants exactly how to use Ignite UI for React. The skill files are included in the [`igniteui-react`](https://www.npmjs.com/package/igniteui-react) package and also live in the [`skills/`](https://github.com/IgniteUI/igniteui-react/tree/master/skills) directory.

| Skill | Description |
|:------|:------------|
| **components** | Identify the right React components (`Igr*`) for a UI pattern, then install, import, and use them — JSX patterns, events, refs, forms, Next.js setup |
| **customize-theme** | Customize styling using CSS custom properties, Sass, and the theming system in React |
| **optimize-bundle-size** | Reduce bundle size with granular imports, tree-shaking, and lazy loading |
| **generate-from-image-design** | Turn a screenshot, mockup, or wireframe into a React view using Ignite UI components, MCP-guided theming, and screenshot-first layout matching |

When a Skill is active in the AI client, the agent follows the Skill instead of relying on general training data — which may reference outdated API signatures or import paths. The Skill package is developer-owned: edit the `SKILL.md` to match your team's conventions, add project-specific patterns, and version the package alongside your codebase.

### Supported AI Clients

| Client | Configuration method |
|:-------|:--------------------|
| VS Code with GitHub Copilot | `.vscode/mcp.json` |
| Cursor | `.cursor/mcp.json` |
| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` |
| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` |
| Claude Code | `.mcp.json` or the Claude Code MCP CLI command |
| JetBrains AI Assistant | **Tools → AI Assistant → Model Context Protocol (MCP)** |

Agent Skills are compatible with GitHub Copilot via `.github/copilot-instructions.md`, Cursor via `.cursorrules` or `.cursor/rules/`, Windsurf via `.windsurfrules`, and JetBrains AI Assistant via project-level prompt settings.
When a Skill is active in the AI client, the agent follows the Skill instead of relying on general training data — which may reference outdated API signatures or import paths.

For full setup instructions, see the [AI-Assisted Development documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/ai-assisted-development-overview).
For full setup instructions, see the [AI-Assisted Development documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/ai/ai-assisted-development-overview).

## License

Expand Down