IgniteUI

Covers non-grid Ignite UI for Blazor UI components: application setup, form controls (inputs, combos, selects, date/time pickers, calendar, checkbox, radio, switch, slider, rating), layout containers (tabs, stepper, accordion, expansion panel, navigation…

Implement Blazor application views from design images using Ignite UI Blazor components. Uses MCP servers (igniteui-cli, igniteui-theming) to discover components, generate themes, and follow best practices. Triggers when the user provides a design image…

Provides guidance on all Ignite UI for Blazor data grid types (Grid Lite, Flat Grid, Tree Grid, Hierarchical Grid, Pivot Grid) including setup, column configuration, sorting, filtering, selection, editing, grouping, summaries, toolbar, export, paging, remote…

Covers theming and visual customization for Ignite UI for Blazor: choosing and switching built-in themes (Bootstrap, Material, Fluent, Indigo - light and dark variants), customizing component appearance with CSS custom properties (design tokens), using the…

This skill identifies the right Ignite UI for React components for any UI pattern and covers installing, importing, and using them — including JSX patterns, event handling, refs, forms, and TypeScript. Use this when choosing components, setting up a React…

This skill customizes Ignite UI for React component styling using CSS custom properties and the full theming system and should be used when applying brand colors, dark mode, component-level overrides, or scoped themes in a React application

Implement React application views from design images using Ignite UI for React components. Uses MCP servers (igniteui-cli, igniteui-theming) and tools for component discovery, docs lookup, and theming to choose components, generate theme tokens, and follow…

Identify and select the right Ignite UI Web Components for your app UI, then navigate to official docs, usage examples, and API references

Authors and audits Ignite UI documentation topics - component pages, how-to guides, conceptual overviews and category indexes - across the Angular and cross-platform (React / Web Components / Blazor / WinUI / Uno) doc sets. Applies the Diataxis framework…

Audits and normalizes YAML frontmatter metadata on Ignite UI MDX documentation topics: SEO titles, meta descriptions, llms.description, keywords, canonical links, relatedComponents, mentionedTypes, license and the AI-readable page identity, across the Angular…

Reference guide for authoring and auditing API terms in the multi-platform docs tree. Strict-xplat topics require canonical backticked terms; other populations may use raw ApiLink components. Covers the platformType populations, the apiTerms modes, raw…

Authors and audits Ignite UI documentation topics - component pages, how-to guides, conceptual overviews and category indexes - across the Angular and cross-platform (React / Web Components / Blazor / WinUI / Uno) doc sets. Applies the Diataxis framework…

Reference guide for authoring and auditing API terms in the multi-platform docs tree. Strict-xplat topics require canonical backticked terms; other populations may use raw ApiLink components. Covers the platformType populations, the apiTerms modes, raw…

Guide for authoring and validating json-snippet blocks in xplat MDX: stating a component once as JSON so generation emits each platform's own code, choosing channels, keeping a platform from being stranded, and running the schema, emission, casing and…

Guidance for using PlatformBlock in xplat MDX after ApiLink moved to registry-based resolution: the import, case-sensitive platform names, what must not be wrapped, ComponentBlock nesting, tag balance and platform coverage. WHEN TO USE: adding, fixing or…

Guide for authoring and validating json-snippet blocks in xplat MDX: stating a component once as JSON so generation emits each platform's own code, choosing channels, keeping a platform from being stranded, and running the schema, emission, casing and…

Add a reactive property to an existing Lit web component with proper decorators, types, tests, specification updates, and documentation

Create a new Lit web component following project conventions, including specification, component class, styles, tests, Storybook story, and exports

Code review checklist for component pull requests covering structure, public API, specification accuracy, accessibility, behavior, styles, tests, and build hygiene

Update component styling following the SCSS to Lit CSS workflow with proper theme support

Identify the correct Ignite UI Web Components (igniteui-webcomponents, grids, charts, dock manager, React wrappers) for a UI requirement. Give links to the official docs, examples, and API references. WHEN TO USE: the user asks which component fits a UI…

Theme and style Ignite UI Web Components (and igniteui-react) apps with CSS custom properties, optional Sass, and the igniteui-theming MCP server. WHEN TO USE: the user wants to apply or switch a pre-built theme (Material, Fluent, Bootstrap, Indigo,…

Builds Ignite UI Web Components views from Figma designs. Supports Indigo.Design kits, third-party kits (Material 3, Fluent 2, shadcn/ui, Untitled UI, in-house), and plain frames. Uses the Figma, Ignite UI CLI, Ignite UI Theming, and Playwright MCP servers.…

Implement application views from design images (screenshots, mockups, wireframes) with Ignite UI Web Components. Use the igniteui-cli and igniteui-theming MCP servers for component discovery, theme generation, and best practices. WHEN TO USE: the user gives a…

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,…

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…

This skill provides rules for writing or updating a SKILL.md in this repository, including frontmatter validation, discovery description markers, and the 500-line body budget. WHEN TO USE: creating or editing skills. WHEN NOT TO USE: writing custom agents or…

Builds Angular views from Figma designs with Ignite UI for Angular, supporting Indigo.Design kits, third-party kits, and plain frames. Uses Figma, Ignite UI CLI, theming, and Playwright MCP servers. WHEN TO USE: implementing a Figma design or artboard in an…

Implements 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. WHEN TO USE: the user provides a…

Generates and customizes Ignite UI for Angular themes including color palettes, typography, elevations, and component-level styles using the Sass theming system and the igniteui-theming MCP server. WHEN TO USE: users ask to theme, restyle, or style Ignite UI…

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.…

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…

Covers testing in the IgniteUI Blazor (Lite) repository itself: the bUnit unit suite (tests/IgniteUI.Blazor.Tests: base classes, attribute and serialization specs, declarative interop wire contracts) and the Playwright integration suite…

Covers Ignite UI for Blazor non-grid components: project setup and module registration; form controls (input, textarea, combo, select, date/time pickers, calendar, checkbox, radio, switch, slider, rating, mask input, color picker); layout and navigation…

Implements a Blazor view from a design image, screenshot, mockup, or wireframe using Ignite UI for Blazor components: analyzes the image, maps regions to components, generates a matching theme, builds the view with mock data, and refines it until it matches.…

Covers all Ignite UI for Blazor data grids (Grid Lite, Flat Grid, Tree Grid, Hierarchical Grid, Pivot Grid): setup, columns and templates, sorting, filtering, selection, cell and row editing, grouping, summaries, toolbar, Excel/CSV export, paging, remote and…

Covers theming and visual customization for Ignite UI for Blazor: choosing and switching the built-in Bootstrap, Material, Fluent and Indigo themes in light or dark, scoping a theme to part of the page with IgbThemeProvider, generating palettes and component…

Keeps IgniteUI.Blazor.Lite trim- and AOT-compatible when library code changes: source-generated JSON, DynamicallyAccessedMembers annotations, narrow suppressions, and verification through the trimmed PublishSmoke app. WHEN TO USE: touching reflection,…

Implement a Blazing Story story file (.stories.razor) for a Blazor UI component. Use when the user says "create a story for component X", "add stories for X", or similar requests in a Blazing Story (.NET / Blazor / Storybook) project.

Provides rules for writing or updating a SKILL.md in this repository: frontmatter validation for license, name and description, the WHEN TO USE and WHEN NOT TO USE description format, the split between public and contributor skills, and the 500-line body…

Provides rules for writing or updating a SKILL.md in this repository: frontmatter validation for license, name and description, the WHEN TO USE and WHEN NOT TO USE description format, the 500-line body budget with progressive disclosure into reference files,…

Covers choosing, installing, and using Ignite UI for React (Igr*) components: package routing, theme CSS, JSX and slots, events, refs, forms, TypeScript, charts, gauges, maps, and grids. WHEN TO USE: choosing a component for a UI pattern, setting up…

Covers theming Ignite UI for React with CSS custom properties: brand palette, dark mode, size, spacing and roundness, per-component tokens, and scoped themes, optionally through the igniteui-theming MCP server. WHEN TO USE: applying brand colors, switching…

Covers building a React view from a design image (screenshot, mockup, or wireframe) with Ignite UI for React components and generated theme tokens, using the igniteui-cli and igniteui-theming MCP servers when available. WHEN TO USE: the user supplies an image…

Covers migrating from Grid Lite (IgrGridLite) to the premium Ignite UI for React Data Grid (IgrGrid): imports, theme CSS, column and template API changes, sorting and filtering, remote data replacing dataPipelineConfiguration, and the toolbar and export APIs.…

Covers reducing bundle size in apps that use Ignite UI for React: package selection, tree-shaking, and route-level code splitting of grids, charts, maps, and gauges. WHEN TO USE: the bundle or initial load is too large, tree-shaking is not removing unused…

Audits this repository's teaching content against the real file structure. Use when checking README examples, AGENTS.md, CLAUDE.md, .claude/, .github/, or shared skills for accuracy and consistency.

Help a user or agent adopt this repository structure into another project by deciding what to copy, what to adapt, what to skip, and producing a simple adoption plan. Use when someone wants to reuse this repo's AI structure in a new or existing project,…

Reviews pull requests that change the teaching structure of this repository. Use when PRs affect README.md, AGENTS.md, CLAUDE.md, .claude/, .github/, or skills/.

Help a user understand this repository, decide which AI structure pieces they need, and adapt the template to their own project.

Covers Ignite UI for Blazor non-grid components: project setup and module registration; form controls (input, textarea, combo, select, date/time pickers, calendar, checkbox, radio, switch, slider, rating, mask input, color picker); layout and navigation…

Implements a Blazor view from a design image, screenshot, mockup, or wireframe using Ignite UI for Blazor components: analyzes the image, maps regions to components, generates a matching theme, builds the view with mock data, and refines it until it matches.…

Covers all Ignite UI for Blazor data grids (Grid Lite, Flat Grid, Tree Grid, Hierarchical Grid, Pivot Grid): setup, columns and templates, sorting, filtering, selection, cell and row editing, grouping, summaries, toolbar, Excel/CSV export, paging, remote and…

Covers theming and visual customization for Ignite UI for Blazor: choosing and switching the built-in Bootstrap, Material, Fluent and Indigo themes in light or dark, scoping a theme to part of the page with IgbThemeProvider, generating palettes and component…

All Ignite UI Angular UI components: application setup and architecture, form controls (Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider, reactive forms), layout (Tabs, Bottom Navigation, Stepper, Accordion, Splitter,…

All grid topics for Ignite UI Angular: grid setup, column configuration, sorting, filtering, selection, editing, grouping, summaries, toolbar, export, paging, remote data, state persistence, Tree Grid, Hierarchical Grid, Grid Lite, and Pivot Grid. Use for any…

Customize Ignite UI components styling using the igniteui-theming MCP server for AI-assisted theming. Use when users ask to theme or restyle Ignite UI components, change the color palette, switch between light and dark themes, apply or generate a global…

Build, launch, and drive this Blazor WASM examples app in a headless browser to verify demo pages end-to-end.

Covers non-grid Ignite UI for Blazor UI components: application setup, form controls (inputs, combos, selects, date/time pickers, calendar, checkbox, radio, switch, slider, rating), layout containers (tabs, stepper, accordion, expansion panel, navigation…

Provides guidance on all Ignite UI for Blazor data grid types (Grid Lite, Flat Grid, Tree Grid, Hierarchical Grid, Pivot Grid) including setup, column configuration, sorting, filtering, selection, editing, grouping, summaries, toolbar, export, paging, remote…

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,…

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…

Build framework-correct Ignite UI design output by combining documentation and theming MCP tools.