-
Notifications
You must be signed in to change notification settings - Fork 8
feat(ai-config): Add skills for Blazor through ai-config command #1688
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.
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
Merged
Merged
Changes from all commits
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
74d1934
feat(blazor): Add skills for Blazor through ai-config command and add…
Marina-L-Stoyanova 43f4368
fix(blazor): Adjust Blazor detection logic to prioritize npm scanning…
Marina-L-Stoyanova 3904a06
chore(blazor): remove unused .editorconfig file from Blazor templates
Marina-L-Stoyanova 98234f7
feat(blazor): add tests for AI coding assistance integration and upda…
Marina-L-Stoyanova beb5e75
refactor(blazor): update layout and navigation documentation for clar…
Marina-L-Stoyanova 65fc9ee
Update skills
Marina-L-Stoyanova a6ef3b8
chore: minor blazor skill update
damyanpetev File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { BaseProjectLibrary } from "@igniteui/cli-core"; | ||
|
|
||
| class IgbBlazorProjectLibrary extends BaseProjectLibrary { | ||
| constructor() { | ||
| super(__dirname); | ||
| this.name = "Ignite UI for Blazor"; | ||
| this.projectType = "igb"; | ||
| this.themes = ["default"]; | ||
| } | ||
| } | ||
| module.exports = new IgbBlazorProjectLibrary(); |
65 changes: 65 additions & 0 deletions
65
packages/cli/templates/blazor/igb/projects/ai-config/files/AGENTS.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| 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. | ||
|
|
||
| ## Coding Standards | ||
|
|
||
| - Use strict type checking and enable nullability (`#nullable enable`) | ||
| - Prefer type inference (`var`) when the type is obvious | ||
| - Avoid `dynamic`; use generics or `object` with pattern matching when type is uncertain | ||
| - Use the latest C# version supported by the project; | ||
| - Prefer modern C# features: record types, pattern matching, global usings, file-scoped namespaces, primary constructors | ||
| - Use PascalCase for public members and component names; camelCase for private fields; prefix interfaces with `I` (e.g., `IUserService`) | ||
| - Follow the official .NET coding conventions: https://learn.microsoft.com/en-us/dotnet/csharp/fundamentals/coding-style/coding-conventions | ||
|
|
||
| ## Blazor Architecture | ||
|
|
||
| - **File separation**: `.razor` (template), `.razor.cs` (logic), `.razor.css` (scoped styles) | ||
| - **Lifecycle**: Use `OnInitializedAsync` / `OnParametersSetAsync` for initialization and parameter changes | ||
| - **Data binding**: Use `@bind` for two-way binding | ||
| - **Component design**: Keep components small and focused on a single responsibility | ||
| - **Component inputs and outputs**: Use `[Parameter]` for component inputs and `EventCallback` for component outputs | ||
| - **Event handling**: Prefer `EventCallback<T>` over `Action<T>` for event handling to integrate with the Blazor render pipeline | ||
| - **DI**: Inject via `[Inject]` property or `@inject` directive; use `async/await` for all I/O | ||
| - **HTTP**: Use `HttpClient` or appropriate services to communicate with external APIs | ||
| - **Rendering**: Override `ShouldRender()` to skip unnecessary re-renders; call `StateHasChanged()` only outside Blazor's event pipeline | ||
| - **Errors**: Wrap components in `ErrorBoundary`; use try-catch for API calls with `ILogger` diagnostics | ||
| - **Validation**: Use `FluentValidation` or `DataAnnotations` for form validation | ||
|
|
||
| ## State Management | ||
|
|
||
| - Basic sharing: Cascading Parameters + `EventCallback` | ||
| - Session state (Server): StateContainer pattern via Scoped Service | ||
| - Persistence (WASM): `Blazored.LocalStorage` / `Blazored.SessionStorage` | ||
| - Complex apps: Fluxor or BlazorState | ||
|
|
||
| ## Styling | ||
|
|
||
| - Use `.razor.css` scoped stylesheets files for component-specific styles; CSS isolation prevents leakage between components | ||
| - Prefer CSS custom properties for themeable values | ||
| - Do NOT use inline styles; extract to `.razor.css` or a shared stylesheet | ||
|
|
||
| ## Caching | ||
|
|
||
| - Use `IMemoryCache` for lightweight server-side caching in Blazor Server apps | ||
| - For Blazor WebAssembly, use `localStorage` or `sessionStorage` to cache state between page reloads | ||
| - Consider distributed cache strategies (Redis, SQL Server Cache) for larger apps requiring shared state across multiple users | ||
| - Cache API responses to avoid redundant calls when data is unlikely to change | ||
|
|
||
| ## Security | ||
|
|
||
| - Use ASP.NET Identity or JWT for auth; always HTTPS with proper CORS | ||
| - Never expose sensitive data in client-side Blazor WebAssembly code | ||
|
|
||
| ## Testing | ||
|
|
||
| - Unit/integration: xUnit or MSTest with Moq or NSubstitute | ||
| - Component tests: bUnit for rendering and interaction verification | ||
| - Use Visual Studio's diagnostics tools for performance profiling | ||
|
|
||
| ## UI Components | ||
|
|
||
| - 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. | ||
| - Components use the `Igb` prefix (e.g., `IgbGrid`, `IgbCombo`, `IgbDatePicker`). | ||
| - Every component requires module registration in `Program.cs`: `builder.Services.AddIgniteUIBlazor(typeof(IgbGridModule))`. | ||
| - Add `@using IgniteUI.Blazor.Controls` to `_Imports.razor`. | ||
| - Link a theme stylesheet in the host page (e.g., `_content/IgniteUI.Blazor/themes/light/bootstrap.css`). | ||
| - If the `IgniteUI.Blazor.Lite`, `IgniteUI.Blazor.GridLite` NuGet packages are not present in the project file, add it first. | ||
65 changes: 65 additions & 0 deletions
65
packages/cli/templates/blazor/igb/projects/ai-config/files/skills/AGENTS.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| 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. | ||
|
Marina-L-Stoyanova marked this conversation as resolved.
|
||
|
|
||
| ## Coding Standards | ||
|
|
||
| - Use strict type checking and enable nullability (`#nullable enable`) | ||
| - Prefer type inference (`var`) when the type is obvious | ||
| - Avoid `dynamic`; use generics or `object` with pattern matching when type is uncertain | ||
| - Use the latest C# version supported by the project; | ||
| - Prefer modern C# features: record types, pattern matching, global usings, file-scoped namespaces, primary constructors | ||
| - Use PascalCase for public members and component names; camelCase for private fields; prefix interfaces with `I` (e.g., `IUserService`) | ||
| - Follow the official .NET coding conventions: https://learn.microsoft.com/en-us/dotnet/csharp/fundamentals/coding-style/coding-conventions | ||
|
|
||
| ## Blazor Architecture | ||
|
|
||
| - **File separation**: `.razor` (template), `.razor.cs` (logic), `.razor.css` (scoped styles) | ||
| - **Lifecycle**: Use `OnInitializedAsync` / `OnParametersSetAsync` for initialization and parameter changes | ||
| - **Data binding**: Use `@bind` for two-way binding | ||
| - **Component design**: Keep components small and focused on a single responsibility | ||
| - **Component inputs and outputs**: Use `[Parameter]` for component inputs and `EventCallback` for component outputs | ||
| - **Event handling**: Prefer `EventCallback<T>` over `Action<T>` for event handling to integrate with the Blazor render pipeline | ||
| - **DI**: Inject via `[Inject]` property or `@inject` directive; use `async/await` for all I/O | ||
| - **HTTP**: Use `HttpClient` or appropriate services to communicate with external APIs | ||
| - **Rendering**: Override `ShouldRender()` to skip unnecessary re-renders; call `StateHasChanged()` only outside Blazor's event pipeline | ||
| - **Errors**: Wrap components in `ErrorBoundary`; use try-catch for API calls with `ILogger` diagnostics | ||
| - **Validation**: Use `FluentValidation` or `DataAnnotations` for form validation | ||
|
|
||
| ## State Management | ||
|
|
||
| - Basic sharing: Cascading Parameters + `EventCallback` | ||
| - Session state (Server): StateContainer pattern via Scoped Service | ||
| - Persistence (WASM): `Blazored.LocalStorage` / `Blazored.SessionStorage` | ||
| - Complex apps: Fluxor or BlazorState | ||
|
|
||
| ## Styling | ||
|
|
||
| - Use `.razor.css` scoped stylesheets files for component-specific styles; CSS isolation prevents leakage between components | ||
| - Prefer CSS custom properties for themeable values | ||
| - Do NOT use inline styles; extract to `.razor.css` or a shared stylesheet | ||
|
|
||
| ## Caching | ||
|
|
||
| - Use `IMemoryCache` for lightweight server-side caching in Blazor Server apps | ||
| - For Blazor WebAssembly, use `localStorage` or `sessionStorage` to cache state between page reloads | ||
| - Consider distributed cache strategies (Redis, SQL Server Cache) for larger apps requiring shared state across multiple users | ||
| - Cache API responses to avoid redundant calls when data is unlikely to change | ||
|
|
||
| ## Security | ||
|
|
||
| - Use ASP.NET Identity or JWT for auth; always HTTPS with proper CORS | ||
| - Never expose sensitive data in client-side Blazor WebAssembly code | ||
|
|
||
| ## Testing | ||
|
|
||
| - Unit/integration: xUnit or MSTest with Moq or NSubstitute | ||
| - Component tests: bUnit for rendering and interaction verification | ||
| - Use Visual Studio's diagnostics tools for performance profiling | ||
|
|
||
| ## UI Components | ||
|
|
||
| - 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. | ||
| - Components use the `Igb` prefix (e.g., `IgbGrid`, `IgbCombo`, `IgbDatePicker`). | ||
| - Every component requires module registration in `Program.cs`: `builder.Services.AddIgniteUIBlazor(typeof(IgbGridModule))`. | ||
| - Add `@using IgniteUI.Blazor.Controls` to `_Imports.razor`. | ||
| - Link a theme stylesheet in the host page (e.g., `_content/IgniteUI.Blazor/themes/light/bootstrap.css`). | ||
| - If the `IgniteUI.Blazor.Lite`, `IgniteUI.Blazor.GridLite` NuGet packages are not present in the project file, add it first. | ||
61 changes: 61 additions & 0 deletions
61
packages/cli/templates/blazor/igb/projects/ai-config/files/skills/README.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| # Ignite UI for Blazor - AI Agent Skills & Instructions | ||
|
|
||
| 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. | ||
|
|
||
| --- | ||
|
|
||
| ## Available Skills | ||
|
|
||
| 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. | ||
|
|
||
| ### [`igniteui-blazor-components`](./igniteui-blazor-components/SKILL.md) | ||
|
|
||
| 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). | ||
|
|
||
| ### [`igniteui-blazor-grids`](./igniteui-blazor-grids/SKILL.md) | ||
|
|
||
| All Ignite UI Blazor data grid types: | ||
|
|
||
| | Component | Package | Use case | | ||
| |---|---|---| | ||
| | `IgbGridLite` | `IgniteUI.Blazor.GridLite` (MIT) | Read-only display with sorting, filtering, virtualization | | ||
| | `IgbGrid` | `IgniteUI.Blazor` | Flat tabular data - editing, grouping, paging, export | | ||
| | `IgbTreeGrid` | `IgniteUI.Blazor` | Self-referencing tree data (org charts, BOM) | | ||
| | `IgbHierarchicalGrid` | `IgniteUI.Blazor` | Multi-schema parent-child data | | ||
| | `IgbPivotGrid` | `IgniteUI.Blazor` | Pivot table analytics | | ||
|
|
||
| ### [`igniteui-blazor-theming`](./igniteui-blazor-theming/SKILL.md) | ||
|
|
||
| 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. | ||
|
|
||
| ### [`igniteui-blazor-generate-from-image-design`](./igniteui-blazor-generate-from-image-design/SKILL.md) | ||
|
|
||
| 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. | ||
|
|
||
| --- | ||
|
|
||
| ## MCP Servers | ||
|
|
||
| Both servers must be configured in your AI tool. Setup instructions are in each skill's `references/mcp-setup.md`. | ||
|
|
||
| | Server | Purpose | Key tools | | ||
| |---|---|---| | ||
| | **`igniteui-cli`** | Component docs, API reference, scaffolding | `list_components`, `get_doc`, `search_docs`, `get_api_reference`, `search_api` | | ||
| | **`igniteui-theming`** | CSS palette and token generation | `create_palette`, `get_component_design_tokens`, `create_component_theme`, `set_roundness`, `set_spacing`, `set_size` | | ||
|
|
||
| --- | ||
|
|
||
| ## AGENTS.md - What It Is and Where to Put It | ||
|
|
||
| [`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. | ||
|
|
||
| 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: | ||
|
|
||
| | AI Tool | File to create | Notes | | ||
| |---|---|---| | ||
| | **GitHub Copilot** (VS Code) | `.github/copilot-instructions.md` | Must be named exactly `copilot-instructions.md` inside `.github/` | | ||
| | **Claude Code** | `CLAUDE.md` (project root) | Read automatically on session start; `.claude/` subfolder for extra settings | | ||
| | **Cursor** | `.cursor/rules/igniteui-blazor.mdc` or `.cursorrules` | `.mdc` supports YAML front matter (see below); `.cursorrules` is the legacy path | | ||
| | **Windsurf** | `.windsurfrules` (project root) | Read automatically | | ||
| | **Codex CLI** | `AGENTS.md` (project root) | Read from cwd and parent directories | | ||
| | **Aider** | `CONVENTIONS.md` or `--read AGENTS.md` flag | Pass at startup | |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.