Implementing Ignite UI Angular Views from Design Images

Required Steps Before Coding

Complete these steps in order before writing any implementation code:

1. Analyze the image and identify all visible regions and UI patterns.
2. Read references/component-mapping.md and references/gotchas.md.
3. This skill is Angular-only. Check package layout or licensing only when imports, packages, or theming depend on it.
4. To apply a theme, use the theming workflow from this skill and the dedicated igniteui-angular-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. Only then start coding.

If the MCP tools are unavailable, do not block the task: fall back to the reference files of the igniteui-angular-components and igniteui-angular-grids skills for component APIs, and the igniteui-angular-theming skill's manual Sass workflow for theming. Suggest running npx -y igniteui-cli ai-config (configures the igniteui-cli and igniteui-theming MCP servers) and reloading the editor for future sessions.