Implementing Ignite UI Blazor Views from Design Images

MANDATORY AGENT PROTOCOL

Before writing any implementation code, you must complete these steps in order:

1. Analyze the image and identify all visible regions and UI patterns.
2. Read references/component-mapping.md.
3. This skill is Blazor-only. Check NuGet package (IgniteUI.Blazor.Lite, IgniteUI.Blazor.GridLite for general purpose components and light-weight grid, or IgniteUI.Blazor / IgniteUI.Blazor.Trial for specialized feature-rich grids and charts) only when theming or component availability depends on it.
4. To apply a theme, use the theming workflow from this skill and the dedicated igniteui-blazor-theming skill; use the igniteui-theming MCP tools instead of styling from memory.
5. Call get_doc for every chosen component family before using it.
6. Read references/gotchas.md now — after docs, before writing any code. Read the file in full. Some entries are component-specific; others apply broadly to any chart, any themed component, or any scoped CSS. Apply every entry that is relevant to what you are building. This is a blocking step: do not start implementation until you have read the whole file and checked it against your component list.
7. Only then start coding.

Workflow