Skip to content

Commit 2cbc962

Browse files
Marina-L-StoyanovaMarina-L-Stoyanova
authored
feat(ai-config): Add skills for Blazor through ai-config command (#1688)
1 parent 87bebdc commit 2cbc962

81 files changed

Lines changed: 9916 additions & 939 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitmodules‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,6 @@
3838
[submodule "packages/igniteui-mcp/igniteui-doc-mcp/blazor/api-docs"]
3939
path = packages/igniteui-mcp/igniteui-doc-mcp/blazor/api-docs
4040
url = https://github.com/IgniteUI/api-docs
41+
[submodule "packages/igniteui-mcp/igniteui-doc-mcp/blazor/igniteui-blazor"]
42+
path = packages/igniteui-mcp/igniteui-doc-mcp/blazor/igniteui-blazor
43+
url = https://github.com/IgniteUI/igniteui-blazor.git

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
# 15.1.1
2+
* Update(ai-config): Adding AI coding assistance integration for Blazor projects.
3+
14
# 15.1.0 (2026-05-13)
25

36
## What's Changed

‎packages/cli/templates/blazor/igb/index.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { BaseProjectLibrary } from "@igniteui/cli-core";
2+
3+
class IgbBlazorProjectLibrary extends BaseProjectLibrary {
4+
constructor() {
5+
super(__dirname);
6+
this.name = "Ignite UI for Blazor";
7+
this.projectType = "igb";
8+
this.themes = ["default"];
9+
}
10+
}
11+
module.exports = new IgbBlazorProjectLibrary();

‎packages/cli/templates/blazor/igb/projects/ai-config/files/AGENTS.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
You are an expert in C#, Blazor, and scalable web application development. You write functional, maintainable, performant, and accessible code following .NET and Blazor best practices. You are currently immersed in the latest .NET and Blazor, adopting modern C# features, component-based architecture with clean separation of concerns, and modern Blazor patterns for reactive UI and dependencygit pull injection.
2+
3+
## Coding Standards
4+
5+
- Use strict type checking and enable nullability (`#nullable enable`)
6+
- Prefer type inference (`var`) when the type is obvious
7+
- Avoid `dynamic`; use generics or `object` with pattern matching when type is uncertain
8+
- Use the latest C# version supported by the project;
9+
- Prefer modern C# features: record types, pattern matching, global usings, file-scoped namespaces, primary constructors
10+
- Use PascalCase for public members and component names; camelCase for private fields; prefix interfaces with `I` (e.g., `IUserService`)
11+
- Follow the official .NET coding conventions: https://learn.microsoft.com/en-us/dotnet/csharp/fundamentals/coding-style/coding-conventions
12+
13+
## Blazor Architecture
14+
15+
- **File separation**: `.razor` (template), `.razor.cs` (logic), `.razor.css` (scoped styles)
16+
- **Lifecycle**: Use `OnInitializedAsync` / `OnParametersSetAsync` for initialization and parameter changes
17+
- **Data binding**: Use `@bind` for two-way binding
18+
- **Component design**: Keep components small and focused on a single responsibility
19+
- **Component inputs and outputs**: Use `[Parameter]` for component inputs and `EventCallback` for component outputs
20+
- **Event handling**: Prefer `EventCallback<T>` over `Action<T>` for event handling to integrate with the Blazor render pipeline
21+
- **DI**: Inject via `[Inject]` property or `@inject` directive; use `async/await` for all I/O
22+
- **HTTP**: Use `HttpClient` or appropriate services to communicate with external APIs
23+
- **Rendering**: Override `ShouldRender()` to skip unnecessary re-renders; call `StateHasChanged()` only outside Blazor's event pipeline
24+
- **Errors**: Wrap components in `ErrorBoundary`; use try-catch for API calls with `ILogger` diagnostics
25+
- **Validation**: Use `FluentValidation` or `DataAnnotations` for form validation
26+
27+
## State Management
28+
29+
- Basic sharing: Cascading Parameters + `EventCallback`
30+
- Session state (Server): StateContainer pattern via Scoped Service
31+
- Persistence (WASM): `Blazored.LocalStorage` / `Blazored.SessionStorage`
32+
- Complex apps: Fluxor or BlazorState
33+
34+
## Styling
35+
36+
- Use `.razor.css` scoped stylesheets files for component-specific styles; CSS isolation prevents leakage between components
37+
- Prefer CSS custom properties for themeable values
38+
- Do NOT use inline styles; extract to `.razor.css` or a shared stylesheet
39+
40+
## Caching
41+
42+
- Use `IMemoryCache` for lightweight server-side caching in Blazor Server apps
43+
- For Blazor WebAssembly, use `localStorage` or `sessionStorage` to cache state between page reloads
44+
- Consider distributed cache strategies (Redis, SQL Server Cache) for larger apps requiring shared state across multiple users
45+
- Cache API responses to avoid redundant calls when data is unlikely to change
46+
47+
## Security
48+
49+
- Use ASP.NET Identity or JWT for auth; always HTTPS with proper CORS
50+
- Never expose sensitive data in client-side Blazor WebAssembly code
51+
52+
## Testing
53+
54+
- Unit/integration: xUnit or MSTest with Moq or NSubstitute
55+
- Component tests: bUnit for rendering and interaction verification
56+
- Use Visual Studio's diagnostics tools for performance profiling
57+
58+
## UI Components
59+
60+
- Use `IgniteUI.Blazor.Lite`, `IgniteUI.Blazor.GridLite` for general purpose components and light-weight grid, and `IgniteUI.Blazor` (trial version available publicly as `IgniteUI.Blazor.Trial`) for specialized feature-rich grids and charts.
61+
- Components use the `Igb` prefix (e.g., `IgbGrid`, `IgbCombo`, `IgbDatePicker`).
62+
- Every component requires module registration in `Program.cs`: `builder.Services.AddIgniteUIBlazor(typeof(IgbGridModule))`.
63+
- Add `@using IgniteUI.Blazor.Controls` to `_Imports.razor`.
64+
- Link a theme stylesheet in the host page (e.g., `_content/IgniteUI.Blazor/themes/light/bootstrap.css`).
65+
- If the `IgniteUI.Blazor.Lite`, `IgniteUI.Blazor.GridLite` NuGet packages are not present in the project file, add it first.

‎packages/cli/templates/blazor/igb/projects/ai-config/files/skills/AGENTS.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
You are an expert in C#, Blazor, and scalable web application development. You write functional, maintainable, performant, and accessible code following .NET and Blazor best practices. You are currently immersed in the latest .NET and Blazor, adopting modern C# features, component-based architecture with clean separation of concerns, and modern Blazor patterns for reactive UI and dependencygit pull injection.
2+
3+
## Coding Standards
4+
5+
- Use strict type checking and enable nullability (`#nullable enable`)
6+
- Prefer type inference (`var`) when the type is obvious
7+
- Avoid `dynamic`; use generics or `object` with pattern matching when type is uncertain
8+
- Use the latest C# version supported by the project;
9+
- Prefer modern C# features: record types, pattern matching, global usings, file-scoped namespaces, primary constructors
10+
- Use PascalCase for public members and component names; camelCase for private fields; prefix interfaces with `I` (e.g., `IUserService`)
11+
- Follow the official .NET coding conventions: https://learn.microsoft.com/en-us/dotnet/csharp/fundamentals/coding-style/coding-conventions
12+
13+
## Blazor Architecture
14+
15+
- **File separation**: `.razor` (template), `.razor.cs` (logic), `.razor.css` (scoped styles)
16+
- **Lifecycle**: Use `OnInitializedAsync` / `OnParametersSetAsync` for initialization and parameter changes
17+
- **Data binding**: Use `@bind` for two-way binding
18+
- **Component design**: Keep components small and focused on a single responsibility
19+
- **Component inputs and outputs**: Use `[Parameter]` for component inputs and `EventCallback` for component outputs
20+
- **Event handling**: Prefer `EventCallback<T>` over `Action<T>` for event handling to integrate with the Blazor render pipeline
21+
- **DI**: Inject via `[Inject]` property or `@inject` directive; use `async/await` for all I/O
22+
- **HTTP**: Use `HttpClient` or appropriate services to communicate with external APIs
23+
- **Rendering**: Override `ShouldRender()` to skip unnecessary re-renders; call `StateHasChanged()` only outside Blazor's event pipeline
24+
- **Errors**: Wrap components in `ErrorBoundary`; use try-catch for API calls with `ILogger` diagnostics
25+
- **Validation**: Use `FluentValidation` or `DataAnnotations` for form validation
26+
27+
## State Management
28+
29+
- Basic sharing: Cascading Parameters + `EventCallback`
30+
- Session state (Server): StateContainer pattern via Scoped Service
31+
- Persistence (WASM): `Blazored.LocalStorage` / `Blazored.SessionStorage`
32+
- Complex apps: Fluxor or BlazorState
33+
34+
## Styling
35+
36+
- Use `.razor.css` scoped stylesheets files for component-specific styles; CSS isolation prevents leakage between components
37+
- Prefer CSS custom properties for themeable values
38+
- Do NOT use inline styles; extract to `.razor.css` or a shared stylesheet
39+
40+
## Caching
41+
42+
- Use `IMemoryCache` for lightweight server-side caching in Blazor Server apps
43+
- For Blazor WebAssembly, use `localStorage` or `sessionStorage` to cache state between page reloads
44+
- Consider distributed cache strategies (Redis, SQL Server Cache) for larger apps requiring shared state across multiple users
45+
- Cache API responses to avoid redundant calls when data is unlikely to change
46+
47+
## Security
48+
49+
- Use ASP.NET Identity or JWT for auth; always HTTPS with proper CORS
50+
- Never expose sensitive data in client-side Blazor WebAssembly code
51+
52+
## Testing
53+
54+
- Unit/integration: xUnit or MSTest with Moq or NSubstitute
55+
- Component tests: bUnit for rendering and interaction verification
56+
- Use Visual Studio's diagnostics tools for performance profiling
57+
58+
## UI Components
59+
60+
- Use `IgniteUI.Blazor.Lite`, `IgniteUI.Blazor.GridLite` for general purpose components and light-weight grid, and `IgniteUI.Blazor` (trial version available publicly as `IgniteUI.Blazor.Trial`) for specialized feature-rich grids and charts.
61+
- Components use the `Igb` prefix (e.g., `IgbGrid`, `IgbCombo`, `IgbDatePicker`).
62+
- Every component requires module registration in `Program.cs`: `builder.Services.AddIgniteUIBlazor(typeof(IgbGridModule))`.
63+
- Add `@using IgniteUI.Blazor.Controls` to `_Imports.razor`.
64+
- Link a theme stylesheet in the host page (e.g., `_content/IgniteUI.Blazor/themes/light/bootstrap.css`).
65+
- If the `IgniteUI.Blazor.Lite`, `IgniteUI.Blazor.GridLite` NuGet packages are not present in the project file, add it first.

‎packages/cli/templates/blazor/igb/projects/ai-config/files/skills/README.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Ignite UI for Blazor - AI Agent Skills & Instructions
2+
3+
This folder contains a set of **skill files** for AI coding agents and the [`AGENTS.md`](./AGENTS.md) instruction file. Together they give agents the coding standards, Ignite UI Blazor conventions, and structured MCP-backed guidance needed to produce correct code - without hallucinating stale APIs.
4+
5+
---
6+
7+
## Available Skills
8+
9+
Skills are structured `SKILL.md` documents paired with `references/` sub-files. When a request matches a skill's domain, the agent reads the routing hub, reads the relevant reference files in parallel, calls the Ignite UI MCP tools, and produces output based only on that - never from memory.
10+
11+
### [`igniteui-blazor-components`](./igniteui-blazor-components/SKILL.md)
12+
13+
All non-grid IgniteUI.Blazor.Lite components: form controls (Input, Combo, Select, Date Picker, Calendar, Checkbox, Radio, Slider, Rating), layout containers (Tabs, Stepper, Accordion, Navbar, Nav Drawer, Tree), data display (List, Card, Avatar, Badge, Chip, Button, Progress, Dropdown, Tooltip), feedback (Dialog, Snackbar, Toast, Banner), layout managers (Dock Manager, Tile Manager), and visualizations (charts, gauges, maps, sparklines).
14+
15+
### [`igniteui-blazor-grids`](./igniteui-blazor-grids/SKILL.md)
16+
17+
All Ignite UI Blazor data grid types:
18+
19+
| Component | Package | Use case |
20+
|---|---|---|
21+
| `IgbGridLite` | `IgniteUI.Blazor.GridLite` (MIT) | Read-only display with sorting, filtering, virtualization |
22+
| `IgbGrid` | `IgniteUI.Blazor` | Flat tabular data - editing, grouping, paging, export |
23+
| `IgbTreeGrid` | `IgniteUI.Blazor` | Self-referencing tree data (org charts, BOM) |
24+
| `IgbHierarchicalGrid` | `IgniteUI.Blazor` | Multi-schema parent-child data |
25+
| `IgbPivotGrid` | `IgniteUI.Blazor` | Pivot table analytics |
26+
27+
### [`igniteui-blazor-theming`](./igniteui-blazor-theming/SKILL.md)
28+
29+
Theme switching (Bootstrap, Material, Fluent, Indigo - light/dark), color palettes, CSS design tokens, dark mode, CSS shadow parts, and global layout tokens (roundness, spacing, size). All CSS is generated by the `igniteui-theming` MCP server - no token names are written from memory.
30+
31+
### [`igniteui-blazor-generate-from-image-design`](./igniteui-blazor-generate-from-image-design/SKILL.md)
32+
33+
End-to-end workflow for implementing a Blazor view from a design image or mockup. Combines all three skills above: analyzes the image, discovers components via MCP, generates a theme, implements the full view with mock data, and refines visual fidelity.
34+
35+
---
36+
37+
## MCP Servers
38+
39+
Both servers must be configured in your AI tool. Setup instructions are in each skill's `references/mcp-setup.md`.
40+
41+
| Server | Purpose | Key tools |
42+
|---|---|---|
43+
| **`igniteui-cli`** | Component docs, API reference, scaffolding | `list_components`, `get_doc`, `search_docs`, `get_api_reference`, `search_api` |
44+
| **`igniteui-theming`** | CSS palette and token generation | `create_palette`, `get_component_design_tokens`, `create_component_theme`, `set_roundness`, `set_spacing`, `set_size` |
45+
46+
---
47+
48+
## AGENTS.md - What It Is and Where to Put It
49+
50+
[`AGENTS.md`](./AGENTS.md) is a **general-purpose AI agent instruction file** for developers building Blazor applications *with* Ignite UI for Blazor. It is **not** the AGENTS.md for this library's own repository.
51+
52+
Copy it (and optionally the `skills/` folder) into your Blazor application project, then place it in the location your AI tool reads for project-level instructions:
53+
54+
| AI Tool | File to create | Notes |
55+
|---|---|---|
56+
| **GitHub Copilot** (VS Code) | `.github/copilot-instructions.md` | Must be named exactly `copilot-instructions.md` inside `.github/` |
57+
| **Claude Code** | `CLAUDE.md` (project root) | Read automatically on session start; `.claude/` subfolder for extra settings |
58+
| **Cursor** | `.cursor/rules/igniteui-blazor.mdc` or `.cursorrules` | `.mdc` supports YAML front matter (see below); `.cursorrules` is the legacy path |
59+
| **Windsurf** | `.windsurfrules` (project root) | Read automatically |
60+
| **Codex CLI** | `AGENTS.md` (project root) | Read from cwd and parent directories |
61+
| **Aider** | `CONVENTIONS.md` or `--read AGENTS.md` flag | Pass at startup |

0 commit comments

Comments
 (0)