igniteui

@igniteui source repo

45 skills
0 followers
10 hours ago last updated

▌
Igniteui Doc Topics 2 · igniteui
Author or audit Ignite UI documentation topics — component pages, how-to guides, conceptual overviews, and category indexes — for both the Angular doc set and the cross-platform (React / Web Components / Blazor) doc set. Applies the Diátaxis framework mapped onto Ignite UI's house templates: canonical section order, fixed heading names, frontmatter (including `llms.description` and the `relatedComponents` trigger), `.mdx` sample embeds, and per-framework token/PlatformBlock mechanics. Use this whenever someone asks to write, draft, create, review, audit, fix, or standardize a documentation topic, tutorial, guide, reference page, or concept overview for Ignite UI — even if they just say "write docs for the X component" or "review this topic" without naming Diátaxis or the templates. Also use it when deciding what *kind* of documentation a page should be, or when a topic mixes tutorial / how-to / reference / explanation content that should be separated. For frontmatter-only audits or metadata normalization, use

0
installs
▌
Igniteui Doc Topics 3 · igniteui
Author or audit Ignite UI documentation topics — component pages, how-to guides, conceptual overviews, and category indexes — for both the Angular doc set and the cross-platform (React / Web Components / Blazor) doc set. Applies the Diátaxis framework mapped onto Ignite UI's house templates: canonical section order, fixed heading names, frontmatter (including `llms.description` and the `relatedComponents` trigger), `.mdx` sample embeds, and per-framework token/PlatformBlock mechanics. Use this whenever someone asks to write, draft, create, review, audit, fix, or standardize a documentation topic, tutorial, guide, reference page, or concept overview for Ignite UI — even if they just say "write docs for the X component" or "review this topic" without naming Diátaxis or the templates. Also use it when deciding what *kind* of documentation a page should be, or when a topic mixes tutorial / how-to / reference / explanation content that should be separated. For frontmatter-only audits or metadata normalization, use

0
installs
▌
Igniteui Topic Frontmatter 2 · igniteui
Audit and normalize YAML frontmatter metadata for Ignite UI MDX documentation topics. Use when a task mentions frontmatter, SEO titles, meta descriptions, llms.description, keywords, canonical links, relatedComponents, mentionedTypes, license, metadata uniformity, or AI-readable page identity in Ignite UI Angular or xplat documentation topics. This skill is strictly frontmatter-only: audit first and provide suggestions for the user to choose from before changing anything; never edit topic body content, headings, prose, samples, code snippets, links, tables, or section structure. For anything touching body content, structure, headings, prose, or samples, use the companion igniteui-doc-topics skill instead.

0
installs
▌
Igniteui Topic Frontmatter 3 · igniteui
Audit and normalize YAML frontmatter metadata for Ignite UI MDX documentation topics. Use when a task mentions frontmatter, SEO titles, meta descriptions, llms.description, keywords, canonical links, relatedComponents, mentionedTypes, license, metadata uniformity, or AI-readable page identity in Ignite UI Angular or xplat documentation topics. This skill is strictly frontmatter-only: audit first and provide suggestions for the user to choose from before changing anything; never edit topic body content, headings, prose, samples, code snippets, links, tables, or section structure. For anything touching body content, structure, headings, prose, or samples, use the companion igniteui-doc-topics skill instead.

0
installs
▌
Igniteui MCP · igniteui
Use this skill whenever working with Ignite UI components or theming across Angular, React, Blazor, or Web Components. Triggers include: adding, configuring, or styling any Ignite UI/IgxGrid/IgrGrid/IgbGrid/IgcGrid component; setting up themes, palettes, typography, or design tokens; scaffolding a new Ignite UI project; asking how to customize grids, charts, buttons, or any other Ignite UI component's appearance. Use this even if the user just mentions "igniteui", "ignite ui", "igx", "igr", "igb", "igc" components, or asks about theming their Angular/React/Blazor app — don't wait for an explicit request to use the skill.

0
installs
▌
Use This Repo · igniteui bundle
Help a user understand this repository, decide which AI structure pieces they need, and adapt the template to their own project.

0
installs
▌
Adopt This Repo · igniteui bundle
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, choose a minimal, practical, or full adoption level, or map this template onto their own folders and tools.

0
installs
▌
Validate Learning Repo · igniteui bundle
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.

0
installs
▌
Review Learning Repo Pr · igniteui bundle
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/.

0
installs
▌
Grid Lite To Igr Grid Migration · igniteui
Migrate 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/export APIs. Use when Grid Lite lacks a needed feature such as editing, selection, paging, grouping, summaries, pinning, or export.

0
installs
▌
Igniteui Blazor Grids · igniteui bundle
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 server-side data, virtualization, sizing, state persistence, and migrating Grid Lite to IgbGrid. Use for grids, tables, tabular data, cell editing, row selection, column pinning or hiding, grouped rows, pivot tables, tree or hierarchical data, master-detail views, and grid export. For non-grid components use igniteui-blazor-components; for theming use igniteui-blazor-theming.

0
installs
▌
Igniteui Blazor Theming · igniteui bundle
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 design tokens with the igniteui-theming MCP server, overriding CSS custom properties, using CSS shadow parts, dark mode, and global roundness/spacing/size tokens. Use when changing the look and feel of Ignite UI Blazor components, applying a color scheme, or writing component CSS. For component configuration use igniteui-blazor-components; for grid data features use igniteui-blazor-grids.

0
installs
▌
Igniteui Blazor Components · igniteui bundle
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); layout and navigation (tabs, stepper, accordion, expansion panel, nav drawer, navbar, tree, splitter, divider); data display (list, card, carousel, avatar, badge, chip, icon, progress, dropdown, tooltip, chat); overlays (dialog, snackbar, toast, banner); Dock Manager and Tile Manager; and visualizations (charts, gauges, maps, sparklines). Use for any Ignite UI Blazor component that is not a data grid. For data grids use igniteui-blazor-grids; for theming and CSS use igniteui-blazor-theming.

0
installs
▌
Blazing Story Story · igniteui
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.

0
installs
▌
Igniteui Blazor Lite Testing · igniteui bundle
Testing in the IgniteUI Blazor (Lite) repository itself: the bUnit unit suite (tests/IgniteUI.Blazor.Tests — base classes, attribute/serialization specs, declarative interop wire contracts) and the Playwright integration suite (tests/IgniteUI.Blazor.Lite.IntegrationTests + TestBed — reflection-driven live-browser sweep, componentsConfig.json). Use when adding or changing tests in this repo, covering a new component, pinning interop behavior, or deciding which suite a check belongs in. Not for consumer-facing component usage — use igniteui-blazor-components for that.

0
installs
▌
Igniteui Blazor Lite Trimming · igniteui
Keep IgniteUI.Blazor.Lite trim-compatible when changing library code. Use when touching reflection, JsonSerializer calls, DynamicallyAccessedMembers annotations, or suppressions in src/, when the build fails with IL2xxx errors, or when asked about trimming, trim warnings, or the PublishSmoke app.

0
installs
▌
Igniteui Blazor Generate From Image Design · igniteui bundle
Implement a Blazor view from a design image, screenshot, mockup, or wireframe using Ignite UI for Blazor components — analyze the image, map regions to components, generate a matching theme, build the view with mock data, and refine until it matches. Triggers when a design image is provided along with a request to implement this design, build this UI, convert this mockup, or create a page from this image in an Ignite UI Blazor project.

0
installs
▌
Igniteui Angular Figma To App · igniteui bundle
Translate Figma app screens designed using the Indigo.Design UI Kits into production Angular applications with Ignite UI for Angular. The Indigo.Design UI Kits are Figma component libraries available in four design-system variants — Material, Fluent, Bootstrap, and Indigo — each with light and dark themes. Designers build their own app frames in Figma using these kit libraries, and every kit component instance maps 1:1 to an Ignite UI Angular control. The active kit variant also determines the design system used in the Angular theme. Uses the Figma MCP for design data, the Ignite UI CLI MCP for component docs, the Ignite UI Theming MCP for palette and component-level styling, and the Playwright MCP for visual validation against the original Figma design. Triggers on "implement this Figma design", "build from Figma", "translate Figma to Angular", "implement this artboard", "generate app from Figma", or when a Figma URL is shared with implementation intent in an Ignite UI Angular context.

0
installs
▌
Igniteui Angular Build · igniteui
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.

0
installs
▌
Igniteui Angular Linting · igniteui
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.

0
installs
▌
Igniteui Angular Testing · igniteui
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.

0
installs
▌
Docfx Sync · igniteui
Skill: docfx-sync

0
installs
▌
Igniteui Doc Topics · igniteui bundle
Author or audit Ignite UI documentation topics — component pages, how-to guides, conceptual overviews, and category indexes — for both the Angular doc set and the cross-platform (React / Web Components / Blazor) doc set. Applies the Diátaxis framework mapped onto Ignite UI's house templates: canonical section order, fixed heading names, frontmatter (including `llms.description` and the `relatedComponents` trigger), `.mdx` sample embeds, and per-framework token/PlatformBlock mechanics. Use this whenever someone asks to write, draft, create, review, audit, fix, or standardize a documentation topic, tutorial, guide, reference page, or concept overview for Ignite UI — even if they just say "write docs for the X component" or "review this topic" without naming Diátaxis or the templates. Also use it when deciding what *kind* of documentation a page should be, or when a topic mixes tutorial / how-to / reference / explanation content that should be separated. For frontmatter-only audits or metadata normalization, use

0
installs
▌
Xplat Docs API Links · igniteui
Reference guide for adding, fixing, and auditing ApiLink components in xplat MDX using the generated api-docs registry. Covers clean ApiLink props, pkg/kind disambiguation, member checks, PlatformBlock use, and registry reports.

0
installs
▌
Igniteui Topic Frontmatter · igniteui bundle
Audit and normalize YAML frontmatter metadata for Ignite UI MDX documentation topics. Use when a task mentions frontmatter, SEO titles, meta descriptions, llms.description, keywords, canonical links, relatedComponents, mentionedTypes, license, metadata uniformity, or AI-readable page identity in Ignite UI Angular or xplat documentation topics. This skill is strictly frontmatter-only: audit first and provide suggestions for the user to choose from before changing anything; never edit topic body content, headings, prose, samples, code snippets, links, tables, or section structure. For anything touching body content, structure, headings, prose, or samples, use the companion igniteui-doc-topics skill instead.

0
installs
▌
Xplat Docs API Map Sync · igniteui
Reference guide for syncing xplat ApiLink coverage from the legacy igniteui-xplat-docs apiMap data while keeping ApiLink markup registry-first. Use when importing missing links from igniteui-xplat-docs or auditing ApiLink coverage after API registry updates.

0
installs
▌
Xplat Docs Platform Block · igniteui
Guidance for using PlatformBlock in xplat MDX after ApiLink moved to registry-based resolution. Use when platform-specific prose or API symbols differ.

0
installs
▌
Review Component Pr · igniteui
Comprehensive code review checklist for component pull requests ensuring quality, accessibility, and adherence to project conventions

0
installs
▌
Create New Component · igniteui
Create a new Lit web component following project conventions, including component class, styles, tests, Storybook story, and proper exports

0
installs
▌
Add Component Property · igniteui
Add a reactive property to an existing Lit web component with proper decorators, types, tests, and documentation

0
installs
▌
Update Component Styles · igniteui
Update component styling following the SCSS to Lit CSS workflow with proper theme support

0
installs
▌
Igniteui Wc Migrate Grid Lite To Premium · igniteui
Step-by-step migration guide from igniteui-grid-lite (IgcGridLite) to the premium igniteui-webcomponents-grids (IgcGridComponent), covering every import, class name, HTML tag, property, event, template, sorting, filtering, and theming API change.

0
installs
▌
Igniteui Angular Grids · igniteui bundle
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.

0
installs
▌
Igniteui Angular Theming · igniteui bundle
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. Use when users ask to theme, restyle, or style Ignite UI components, change colors or the color palette, switch between light and dark themes, create or apply a global theme, customize typography or elevation shadows, adjust spacing, sizing, or roundness, or configure per-component design tokens. Do NOT use for component behavior, APIs, or data binding — use igniteui-angular-components or igniteui-angular-grids instead.

0
installs
▌
Igniteui Angular Components · igniteui bundle
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.

0
installs
▌
Igniteui React Components · igniteui bundle
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 project, writing component JSX, handling events, or integrating with React state and form libraries.

0
installs
▌
Igniteui React Customize Theme · igniteui bundle
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

0
installs
▌
Igniteui React Optimize Bundle Size · igniteui
This skill optimizes application bundle size when using Ignite UI for React and should be used when the bundle is too large, when setting up tree-shaking, or when lazy loading heavy components like grids and charts

0
installs
▌
Igniteui Wc Choose Components · igniteui bundle
Identify and select the right Ignite UI Web Components for your app UI, then navigate to official docs, usage examples, and API references

0
installs
▌
Igniteui Angular Generate From Image Design · igniteui bundle
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.

0
installs
▌
Igniteui Wc Optimize Bundle Size · igniteui
Optimize application bundle size by importing only necessary components and using tree-shaking effectively

0
installs
▌
Igniteui React Generate From Image Design · igniteui bundle
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 React-specific best practices. Triggers when the user provides a design image (screenshot, mockup, wireframe) and wants it built as a working React view with Ignite UI for React. 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 React project.

0
installs
▌
Igniteui Wc Integrate With Framework · igniteui bundle
Integrate Ignite UI Web Components packages into React, Angular, Vue, or vanilla JS applications with framework-specific configurations

0
installs
▌
Igniteui Wc Customize Component Theme · igniteui
Customize Ignite UI Web Components styling using CSS custom properties, optional Sass, and the igniteui-theming MCP server for AI-assisted theming

0
installs
▌
Igniteui Wc Generate From Image Design · igniteui bundle
Implement application views from design images using Ignite UI Web 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 (screenshot, mockup, wireframe) and wants it built as a working view with Ignite UI Web 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 Web Components project.

0
installs

45 published skills