blazor-ui-components-skills

Implement interactive spatial data visualization with Syncfusion Maps component for Blazor. Use this skill when user needs to display geographic data, add markers/polygons to maps, integrate map providers (Google Maps, Bing Maps, Azure Maps, OpenStreetMap), create choropleth visualizations, handle user interactions with maps, export/print maps, support internationalization, implement accessibility features, or customize map styling and appearance.

Build and troubleshoot Syncfusion Blazor diagrams using SfDiagramComponent. Trigger for flowcharts, org charts, mind maps, BPMN, UML sequence, swimlanes, symbol palettes, nodes/connectors/ports/annotations, layouts, data binding, serialization (load/save), export/print, and collaborative editing questions. Provide Blazor + Syncfusion setup steps, configuration patterns, and sample snippets.

Use this skill when users ask how to implement Syncfusion Pivot Table/PivotView in Blazor. Trigger for Blazor components, data binding, OLAP analysis, aggregation, drill-down/drill-through, grouping, filtering, conditional formatting, exports (Excel/PDF/CSV), or pivot charts. Blazor-only, not React/Angular/Vue/JS.

Implement Syncfusion Blazor Accumulation Chart (SfAccumulationChart) for proportional data visualization. Use this when creating pie charts, doughnut charts, funnel charts, or pyramid charts. This skill covers data labels, legends, tooltips, slice grouping, and part-to-whole visualizations in Blazor applications.

Implement Syncfusion Blazor Chart (SfChart) component for comprehensive data visualization. Use this when creating line charts, bar/column charts, area charts, financial charts, or statistical visualizations. This skill covers 30+ chart types including scatter plots, bubble charts, candlestick charts, and specialized charts like waterfall, histogram, and polar charts for Blazor applications.

Provides guidance for building and customizing Syncfusion Blazor 3D Charts. Trigger this skill whenever the user needs help with SfChart3D, 3D Column/Bar charts, axes, data binding, rotation, tilt, depth, legends, tooltips, or any configuration in Syncfusion.Blazor.Chart3D.

Implement Syncfusion Blazor Block Editor for modular, block-based rich content creation. ALWAYS use when building structured document editors with customizable blocks like headings, paragraphs, lists, and media. Immediately configure menus, drag-drop, undo/redo, paste cleanup, and events.

Implement Syncfusion Blazor Bullet Chart (SfBulletChart) for KPI and performance visualization. Use this when displaying target vs actual metrics, goal tracking, or performance dashboards. This skill covers actual/target bars, qualitative ranges, and comparative analysis for KPI visualization in Blazor applications.

Implements the Syncfusion Blazor Chart Wizard for guided chart creation. Use this when building interactive chart builders that require step-by-step configuration, data binding, and export features. Covers chart customization, theming, and accessibility.

Implement Syncfusion Blazor Circular Gauge (SfCircularGauge) for radial data visualization. Use this when creating speedometers, tachometers, KPI dashboards, or circular progress indicators. This skill covers needle pointers, gauge ranges, annotations, and circular metric visualization in Blazor applications.

Implements the Syncfusion Blazor HeatMap Chart component for multi-dimensional data visualization using color-coded grids. Use this when working with heatmaps, data matrices, correlation displays, or bubble heatmap variants. This skill covers installation, data binding, axis configuration, color palettes, legends, tooltips, and accessibility features.

Implement Syncfusion Blazor Linear Gauge (SfLinearGauge) for data visualization with linear scales. Use this when creating thermometer displays, progress indicators, or measurement visualizations. This skill covers axis configuration, pointers, ranges, and gauge appearance customization in Blazor applications.

Implement Syncfusion Blazor RangeNavigator for interactive data range selection and chart navigation. Trigger when users mention range selector, range navigator, SfRangeNavigator, Syncfusion.Blazor.Charts.RangeNavigator, time-series filtering, date range picker for charts, data zooming, slider navigation, thumb-based range selection, period selector, or chart data range selection for large data.

Comprehensive guide for implementing Syncfusion Blazor Sankey Diagram (SfSankey) component for flow visualization in Blazor applications. Use this when working with Sankey diagrams, flow visualization, or process flows. This skill covers node and link configuration, data binding, flow magnitude representation, and diagram customization. Ideal for visualizing energy flows, supply chain relationships, user journey maps, traffic analysis, and any scenario involving flows between categories or stages.

Implement Syncfusion Blazor Smith Chart for RF circuit analysis and transmission line impedance matching. Use this when visualizing impedance/admittance data, reflection coefficients, S-parameters, or antenna tuning in Blazor applications. This skill covers circular grid representations and RF network parameter analysis.

Implement Syncfusion Blazor Sparkline Charts for compact, inline trend visualizations in Blazor applications. Use this when creating mini charts, KPI indicators, dashboard sparklines, or word-sized data visualizations. This skill covers line, area, column, WinLoss, and pie sparklines, including data labels, markers, special points (high/low/negative), range bands, tooltips, and appearance customization. Ideal for dashboards, data tables with inline trends, email reports, and mobile data visualization scenarios requiring compact trend indicators.

Implement Syncfusion Blazor Stock Chart (SfStockChart) for financial data visualization. Use this when working with stock charts, candlestick displays, OHLC data, or technical indicators like SMA, EMA, MACD, and Bollinger Bands. This skill covers period selectors, range navigation, and financial time-series data visualization in Blazor applications.

Implement and configure the Syncfusion Blazor TreeMap component (SfTreeMap) for hierarchical data visualization. Use this when working with treemaps, area-proportional visualizations, or heat-map-like block displays. This skill covers TreeMap setup, layout configuration, data binding, color mapping, drill-down navigation, and accessibility features.

Implement Syncfusion Blazor Breadcrumb (SfBreadcrumb) control for hierarchical navigation. Use this when building breadcrumb trails, auto-generating items from URLs, or managing dynamic navigation sequences. This skill covers overflow modes, item templates, icon customization, and responsive layout configurations.

Build responsive card layouts with Syncfusion Blazor Card component. Use this when creating reusable card containers with headers, images, content, action buttons, and custom styling. This skill covers setup, structure, layouts, interactivity, and advanced customization.

Guide for implementing Syncfusion Blazor Carousel component for image galleries, product showcases, and content sliders. Use when user mentions carousel, image slider, slideshow, content rotation, product galleries, rotating banners, slide transitions, or needs to display multiple items in a cycling presentation format.

Implement Syncfusion Blazor ContextMenu component for building right-click menus, context-sensitive navigation, or popup menu systems. Use this when you need hierarchical menu structures with nesting support, data binding, or custom templates. This skill covers setup, customization, events, and dynamic menu management.

Guide for implementing Syncfusion Blazor Dashboard Layout component. Use this when building dashboard interfaces with draggable/resizable panels, state persistence, or responsive grid arrangements. Covers panel positioning, sizing constraints, drag-drop rearrangement, and adaptive layouts.

Guide for implementing Syncfusion Blazor ListView component. Use this when building list-based interfaces with data binding, filtering, grouping, virtual scrolling, selection modes, and custom templates. Covers installation, templating, event handling, and advanced patterns.

Create responsive Blazor applications using Media Query component. Trigger when user needs responsive layouts, breakpoint-based rendering, screen size adaptation, multi-device support, or needs to conditionally render components based on device type. Essential for building adaptive UIs that work across mobile, tablet, and desktop devices.

Implement navigation menus using Syncfusion Blazor Menu Bar component. Use this skill to create horizontal or vertical menus with submenus, icons, events, animations, and data binding. Essential for building professional menu bars in Blazor applications.

Guide for implementing Syncfusion Blazor ProgressBar components in Blazor applications. Use this when displaying progress indicators, loading states, task completion status, or file upload progress. This skill covers linear and circular progress bars, indeterminate loaders, buffer states, and progress tracking. Ideal for visual feedback during operations, showing completion percentages, and any scenario requiring visual progress indicators.

Guide to implementing Syncfusion Blazor Sidebar component for responsive navigation sidebars. Use this when building Blazor WebAssembly and .NET 8 Web Apps that need sidebars. Covers setup, open/close control, docking, state persistence, multiple sidebars, and complete styling. Includes ListView and TreeView integration.

Implement Blazor Splitter layouts with pane configuration, resizing, and state management. Use when creating split pane layouts, handling user interactions, managing pane states, and applying custom styling to Syncfusion Blazor Splitter components.

Implement Syncfusion Blazor Toolbar (SfToolbar) component for creating interactive command bars and toolbars. Use this when working with toolbars, command bars, or action bars with buttons and icons. This skill covers responsive toolbars with overflow handling, item configuration and alignment, keyboard navigation, accessibility features, and dynamic item management.

Implement the Syncfusion Blazor Stepper component for multi-step workflows. Use this skill when creating step-by-step navigation UI, wizards, form workflows, or progress tracking. This skill covers step-based navigation, wizard interfaces, step validation, animations, templates, and stepper customization in Blazor applications.

Build interactive timeline components that display events and milestones sequentially. Use SfTimeline with alignment controls, custom items, and event handlers. This skill covers timeline configuration and customization for creating visual timelines in Blazor applications.

Guide for implementing the Syncfusion Blazor Accordion component for creating collapsible panels with expandable content. Use this skill when users need to build accordions, implement collapsible sections, create expandable panels, organize content in navigation components, implement FAQs, build collapsible menus, add nested accordions, configure expand modes (single or multiple), handle accordion events, customize accordion styling, implement accessible accordions with WCAG compliance, integrate data binding, or work with any vertically collapsible content containers in Blazor applications.

Guide for implementing Syncfusion Blazor AppBar component (SfAppBar) in Blazor applications. Use this when implementing navigation bars, app bars, or header toolbars with action controls. This skill covers AppBar configuration, size modes (regular, prominent, dense), color modes, positioning (top, bottom, sticky), menu integration, and responsive design patterns.

Implement Syncfusion Blazor button components including Button, ButtonGroup, CheckBox, Chip, DropdownMenu, FloatingActionButton, ProgressButton, SpeedDial, SplitButton, and ToggleSwitch. Use this skill when working with button-related components in Blazor applications. Covers installation, configuration, styling, accessibility, event handling, and advanced features for all button component types.

Comprehensive guide for implementing Syncfusion Blazor dropdown components including AutoComplete, ComboBox, DropDown List, MultiSelect Dropdown, and ListBox. Use this when building selection interfaces, data binding, filtering, cascading dropdowns, custom templates, and accessible dropdown experiences in Blazor applications. Covers all dropdown components from Syncfusion.Blazor.DropDowns package.

Implement Syncfusion Blazor Input components including FileUpload, TextBox, NumericTextBox, TextArea, Signature, RangeSlider, OtpInput, Rating, InputMask, and ColorPicker. Use this when working with file uploads, text entry, numeric values, multi-line text inputs, signatures, ratings, or color selection. This skill covers input validation, events, data binding, and advanced customization options for all input-related components in Blazor applications.

Comprehensive guide for implementing Syncfusion Blazor MultiColumn ComboBox component. Use this when displaying structured data in a dropdown with multiple columns, filtering, selection, paging, virtualization, grouping, and customization options. Perfect for complex data structures and advanced filtering scenarios in Blazor applications. Covers all MultiColumn ComboBox features from Syncfusion.Blazor.MultiColumnComboBox package.

Implement Syncfusion Blazor notification components (Toast, Message, Skeleton) for user feedback and loading states. ALWAYS use this when users need toast notifications, popup messages, alert boxes, success/error/warning/info messages, loading skeletons, shimmer effects, content placeholders, or any feedback UI. Trigger immediately when users mention notifications, toasts, alerts, messages, loading states, skeleton screens, shimmer loading, user feedback, status messages, SfToast, SfMessage, SfSkeleton, notification popups, or need to show temporary messages, form validation feedback, or loading placeholders.

Implement modal and modeless dialogs using Syncfusion Blazor Dialog component. Use this skill when creating dialogs, popup windows, modal confirmations, custom forms, or interactive overlay windows. Covers templates, events, positioning, animations, accessibility, and advanced customization.