igniteui-angular-theming
Ignite UI for Angular — Theming Skill
Description
This skill teaches AI agents how to theme Ignite UI for Angular applications using the Sass-based theming system and the Ignite UI Theming MCP server. It covers global themes, palettes, typography, elevations, component-level theming, layout controls (spacing, sizing, roundness), and how to use the MCP tools for code generation.
Prerequisites
- An Angular project with
igniteui-angularinstalled, or@infragistics/igniteui-angularfor licensed users - Sass support enabled in the project (default for Angular CLI projects)
- The Ignite UI Theming MCP server (
igniteui-theming) available as a tool provider
More from igniteui/igniteui-angular
igniteui-angular-grids
Provides guidance on all Ignite UI for Angular data grid types (Flat Grid, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid) including setup, column configuration, sorting, filtering, selection, editing, grouping, summaries, toolbar, export, paging, remote data, and state persistence. Use when users ask about grids, tables, data grids, tabular data display, cell editing, batch editing, row selection, column pinning, column hiding, grouping rows, pivot tables, tree-structured data, hierarchical data, master-detail views, or exporting grid data. Do NOT use for non-grid UI components (forms, dialogs, navigation, charts) — use igniteui-angular-components instead. Do NOT use for theming or styling — use igniteui-angular-theming instead.
47igniteui-angular-components
Covers all non-grid Ignite UI for Angular UI components: application scaffolding and setup, form controls (inputs, combos, selects, date/time pickers, calendar, checkbox, radio, switch, slider), layout containers (tabs, stepper, accordion, splitter, navigation drawer), data-display components (list, tree, card, chips, carousel, paginator, progress indicators, chat), feedback overlays (dialog, snackbar, toast, banner), directives (button, icon button, button group, ripple, tooltip, drag-and-drop), Dock Manager, Layout Manager, Tile Manager, and Charts. Use when users ask about any Ignite UI Angular component that is NOT a data grid — such as forms, dropdowns, pickers, dialogs, navigation, lists, trees, cards, charts, or initial project setup. Do NOT use for data grids, tables, or tabular data — use igniteui-angular-grids instead. Do NOT use for theming or styling — use igniteui-angular-theming instead.
43igniteui-angular-build
Quick-reference for building the core Ignite UI for Angular library and related packages. Covers the full production build (`build:lib`), individual partial builds (styles, extras, migrations, schematics, i18n, elements), and the combined build-all command. Use when an agent needs to compile the library, produce a dist output, or verify that code changes compile cleanly. Do NOT use for running tests — use igniteui-angular-testing instead. Do NOT use for linting — use igniteui-angular-linting instead.
5igniteui-angular-testing
Quick-reference for running Ignite UI for Angular test suites. Covers the full test run (`test:lib`), grid-specific suites (grid, tree-grid, hierarchical-grid, pivot-grid), non-grid tests, watch mode, and auxiliary test suites (schematics, styles, i18n). Use when an agent needs to run, select, or understand the test infrastructure. Do NOT use for building — use igniteui-angular-build instead. Do NOT use for linting — use igniteui-angular-linting instead.
4igniteui-angular-generate-from-image-design
Implement Angular application views from design images using Ignite UI Angular components. Uses MCP servers (igniteui-cli, igniteui-theming, angular-cli) to discover components, generate themes, and follow best practices. Triggers when the user provides a design image (screenshot, mockup, wireframe) and wants it built as a working Angular view with igniteui-angular components. Also triggers when the user asks to "implement this design", "build this UI", "convert this mockup", or "create a page from this image" in an Ignite UI Angular project.
4igniteui-angular-linting
Quick-reference for linting the core Ignite UI for Angular library. Covers the combined lint command (`lint:lib`), ESLint for TypeScript and templates, and Stylelint for Sass/SCSS styles. Use when an agent needs to run the main linters, fix lint errors, or understand the primary lint configuration. Do NOT use for building — use igniteui-angular-build instead. Do NOT use for running tests — use igniteui-angular-testing instead.
4