Skip to content

docs(*): update-ai-assited-dev-npm-redme #160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
radomirchev wants to merge 1 commit into
base: master
Choose a base branch
from
+111 −7
Open

docs(*): update-ai-assited-dev-npm-redme #160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
58 changes: 55 additions & 3 deletions .azure-pipelines/artifacts/README_Components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,14 +62,66 @@ This package provides the following components:
| Tree | ✅ | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/tree) |

## 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 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.
Copy link
Copy Markdown
Member

@damyanpetev damyanpetev May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't go as far as say it's a complete or even a toolchain really.

You can say the Agent skills and MCP-s "enhance the AI coding [workflow]" for example.


| Component | What it provides | Requires Ignite UI installed? |
|:----------|:----------------|:-----------------------------:|
| **Agent Skills** | Developer-owned instruction packages: import paths, component patterns, decision flows, project conventions | Yes |
Comment on lines +68 to +70
Copy link
Copy Markdown
Member

@damyanpetev damyanpetev May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Skills can be be delivered via ig ai-config without the package, that was the point and we're enhancing that to work even without existing project structure so the last value is also "no" here and TBH just drop the last column entirely - doesn't add useful info.

Copy link
Copy Markdown
Member

@damyanpetev damyanpetev May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also is project conversion supposed to be the image to design skill? Because it's a bit vague what that should be

| **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 |

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

@damyanpetev damyanpetev May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You mean 15+, right? :)


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.

Comment on lines +77 to +78
Copy link
Copy Markdown
Member

@damyanpetev damyanpetev May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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.

### Add AI toolchain to an existing project

Run this command from the root of your project:

```bash
npx igniteui-cli ai-config
Copy link
Copy Markdown
Member

@damyanpetev damyanpetev May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you're giving instructions to install the package at the end and the other examples uses ig, use that consistently:

Suggested change
npx igniteui-cli ai-config
ig ai-config

```

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.
Copy link
Copy Markdown
Member

@damyanpetev damyanpetev May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please refrain from such specifics. The command sets up configurations for AI coding assistants - namely it adds Ignite UI for React Agent Skills to the project and MCP servers setup (future release: and Agents instructions too).
The exact details of how we add the skills, where we add them and which MCP servers are setup where are subject to change.


### 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
```

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 `npm install -g igniteui-cli`.
Copy link
Copy Markdown
Member

@damyanpetev damyanpetev May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Again don't see how explaining the name prompts and the install of deps is useful information. Just explain you can scaffold a new project with pre-configured AI setup, run ig new and follow the prompts.

The install of the package could be pulled ether before the two sections or added as a note under both snippets


### 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.
Copy link
Copy Markdown
Member

@damyanpetev damyanpetev May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I liked the original description paragraph we use across repos better, the "developer-owned instruction packages" says a lot of words, but can't tell what it means TBH.


| 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 |

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.
Copy link
Copy Markdown
Member

@damyanpetev damyanpetev May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure we need to explicitly explain what that is, could easily just link one of the agent skills mentions to https://agentskills.io/home

Oh, and while true, not sure we want to encourage that since it interferes with update options and "version the package" is wrong since it's not a package, so delete the last part at least, if not the whole section

Suggested change
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.
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.


### 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.
Comment on lines +111 to +122
Copy link
Copy Markdown
Member

@damyanpetev damyanpetev May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please no.

  • We haven't release the update to pick different MCP configs yet, not sure where that list came from, besides being inaccurate.
  • Skills are not instructions (which we set up as well) or rules
  • There are so many agents/tools and a lot of them support skills and almost all of them work with .agents/skills (except claude, which we cover as well), so you can't put a definitive list.
Suggested change
### 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.


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

## License

Expand Down
58 changes: 55 additions & 3 deletions .azure-pipelines/artifacts/README_DockManager.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,66 @@ 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 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.

| 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 |

> **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.

### Add AI toolchain to an existing project

Run this command from the root of your project:

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

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.

### 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
```

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 `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.
Copy link
Copy Markdown
Member

@damyanpetev damyanpetev May 11, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not this package as the description clearly states


| 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 |

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.

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

## License

Expand Down
2 changes: 1 addition & 1 deletion .azure-pipelines/artifacts/README_Grids.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ 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`.
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 `npm install -g igniteui-cli`.

### Agent Skills

Expand Down