javascript-ui-controls-skills

Build collapsible navigation panels with the Syncfusion TypeScript Accordion component. Use this skill when implementing vertical accordion menus, expanding/collapsing content panels, multi-step wizards, data-driven panels with dynamic content, tabbed navigation alternatives, or nested hierarchical content structures. Covers initialization, expand modes, animations, icons, templates, styling, data binding, and advanced use cases like form wizards.

Implement the Syncfusion JavaScript AI AssistView control. Use this skill when users mention AI assistant interfaces, AI chat UI, conversational AI components, prompt-response interfaces, AI integration (OpenAI, Gemini, Ollama, LiteLLM, MCP), chat toolbars, file attachments in chat, speech-to-text, text-to-speech, custom AI views, prompt suggestions, markdown responses, or implementing any interactive AI assistant interface. Use this skill immediately for AIAssistView, AI chat control, interactive chat, ej2-interactive-chat package, AI conversation UI, or AI assistance components.

Learn how to implement and configure the Syncfusion TypeScript AppBar control for navigation bars, app headers, and UI toolbars. This skill covers responsive positioning, color modes, sizing, styling, and component integration. Use when building navigation solutions that require flexible layout and styling options.

Implement Syncfusion TypeScript Avatar components for user representations. Use when user needs to display user profiles, avatars with different shapes (circular or rectangular), custom sizing, media formats (images, SVG, icons, letters), color customization, or integrate avatars with other controls like Badge or ListView.

Implement the Syncfusion JavaScript BlockEditor control - a modern block-based text editor with drag-and-drop, slash commands, and extensive formatting capabilities. Use this skill IMMEDIATELY for: BlockEditor implementation, block-based editors, content editing with blocks, document editors with block structure, text editing with modern UI, slash command menus, drag-and-drop content reordering, inline toolbars, collaborative editing features, structured content creation, @mentions and labels, code blocks with syntax highlighting, tables and lists, collapsible sections, or any Syncfusion EJ2 BlockEditor control usage in JavaScript applications.

Learn to implement and configure the Syncfusion TypeScript Breadcrumb component for navigation. Use this skill when implementing breadcrumb navigation for web applications. Covers component initialization, item configuration, overflow handling, event management, and advanced customization.

Implement and configure the Syncfusion EJ2 JavaScript Buttons components (ProgressButton, RadioButton, and SplitButton). Use this when adding interactive button controls, progress indicators, radio selections, or dual-action menus in a JavaScript or ES5 application. This skill covers component configuration, states, events, templates, accessibility, and common UI patterns.

Create flexible, responsive card layouts with headers, images, action buttons, and custom styling. Use when building UI containers for displaying content, product cards, service offerings, or dashboard components. Customize with CSS styling, add headers, images, and action buttons as needed.

Build carousel components for displaying image galleries, news headlines, and rotating content. Use this skill when implementing image sliders, automatic content rotation, or carousel-based galleries. Covers navigation controls, slide transitions, animation effects, and indicators.

Implements Syncfusion JavaScript chart controls (Line, Area, Bar, Column, Pie, Polar, Radar, Waterfall, Stock). Use when building interactive data visualizations, dashboards, or real-time charts. Covers series and axes configuration, styling, animations, exporting, and technical indicators. Works with TypeScript (webpack/modules) and JavaScript (CDN/ES5).

Implement the Syncfusion Javascript Chat UI control using Javascript (ej2-interactive-chat). Use this skill when the user mentions chat UI, chat interface, conversational UI, messaging interface, chat applications, messaging systems, customer support chat, AI chatbots, or any real-time conversation features. Provides comprehensive guidance on messages, typing indicators, file attachments, @mentions, suggestions, header/footer customization, templates, load-on-demand, message toolbars, RTL support, localization, accessibility features, and complete chat interface implementations with working code examples.

A comprehensive guide for implementing Syncfusion TypeScript ContextMenu component. Use this skill when building context menus that appear on right-click or touch-hold, including features like nested menus, dynamic items, animations, events, styling, and data binding. This skill covers everything from basic setup to advanced features like scrolling, accessibility, and custom templates.

Build responsive dashboard layouts with drag-and-drop panels, dynamic resizing, and state persistence. Guide users to implement DashboardLayout control with panel management, dragging, resizing, floating, and persistence features. Includes event handling, dynamic panel addition/removal, and comprehensive API reference.

Implements Syncfusion TypeScript/JavaScript(ES6+) DataManager for local/remote binding, CRUD, querying, caching, and middleware. Supports JsonAdaptor, ODataAdaptor, ODataV4Adaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor, RemoteSaveAdaptor, GraphQLAdaptor, CustomDataAdaptor, and CustomAdaptor. Covers Query class, filtering, sorting, paging, grouping, persistence, offline mode, caching, and error handling.

Comprehensive guide for implementing Syncfusion TypeScript dropdown components including AutoComplete, ComboBox, Mention, Dropdownlist and Multiselect. Use this when building selection interfaces, data binding, filtering, cascading dropdowns, custom templates, and accessible dropdown experiences.

Implement the Syncfusion TypeScript Image Editor control for image editing, annotation, and manipulation. Use this when the user needs to add image editing capabilities, work with filters, transformations, cropping, or drawing features in TypeScript applications. Covers setup, image operations, annotations, filters, accessibility, and customization patterns.

Implement the Syncfusion JavaScript Inline AI Assist control. Use this skill ALWAYS and immediately when users mention inline AI assistance, popup AI assist, contextual AI help, AI text editing popups, content summarization with AI, inline content generation, AI-powered text transformation, quick AI commands, AI assist with accept/reject workflow, element-relative AI popups, or any popup-based AI assistance interface. Use this skill immediately for InlineAIAssist component, inline AI component, ej2-interactive-chat InlineAIAssist, contextual AI assistance, AI command popup, response action handling, or AI content editing workflows.

Comprehensive guide for implementing Syncfusion TypeScript input components including ColorPicker, MaskedTextBox, OtpInput, Slider, TextArea, NumericTextBox, Rating, Signature, TextBox, uploader. Use this when adding color selection, masked formatting, OTP entry, range sliders, multiline text, numeric inputs, file upload, star ratings, signature capture, or text inputs to a TypeScript application.

Build responsive ListView components with Syncfusion TypeScript. Implement this skill when working with list-based interfaces, data binding, templates, selection handling, nested lists, grouping, filtering, virtualization, and advanced features like drag-drop and paging. Covers single/multi-select, checkboxes, animations, remote data binding, custom templates, and use cases such as chat windows, contact lists, and data tables.

Guide to implementing Syncfusion Maps in TypeScript and JavaScript. Use this skill whenever the user needs to create interactive maps, add markers, visualize geographical data, work with map layers, apply color mapping, add annotations, configure legends, or handle map interactions and events. Works with TypeScript (module-based) and JavaScript (CDN/ES5).

Guides implementation of the Syncfusion TypeScript Markdown Converter (@syncfusion/ej2-markdown-converter). Use this skill when the user needs to convert Markdown text to HTML, use the toHtml method, configure MarkdownConverterOptions (async, gfm, lineBreak, silence), or integrate the Markdown Converter with the Syncfusion Rich Text Editor for live preview or side-by-side editing. Trigger when user mentions markdown to HTML conversion, MarkdownConverter, toHtml, ej2-markdown-converter, markdown preview, or RTE markdown mode.

When building navigation hierarchies, implement Syncfusion Menu for multi-level nested items, data binding, animations, and event handling. Supports horizontal and vertical orientations, scrollable menus, accessibility, and real-time item management.

Comprehensive guide for implementing Syncfusion TypeScript Dialog (popup) components. Use this when building modal or modeless dialogs, alert/confirm windows, or DialogUtility-based prompts in TypeScript/EJ2 projects. Covers animations, drag, resize, nested dialogs, templates, and WAI-ARIA accessibility.

How to implement Syncfusion JavaScript QueryBuilder component with comprehensive guidance on columns, data binding, rules management, filtering, templates, drag-drop interactions, import/export, and accessibility. Use this skill when users need help with QueryBuilder setup, rule creation, complex query building, advanced customization, or dynamic filter UI requirements in TypeScript applications.

Use this skill ALWAYS when the user needs to implement, configure, or troubleshoot Syncfusion JavaScript Ribbon control. The Ribbon provides a Microsoft Office-style command interface with tabs, groups, and various item types. Immediately apply this skill for ribbon layouts, built-in items (buttons, dropdowns, galleries), file menus, backstage views, contextual tabs, keytips, tooltips, resizing behavior, and event handling.

Implements the Syncfusion Rich Text Editor and Markdown Editor using TypeScript (ej2-richtexteditor). Supports both HTML (WYSIWYG) and Markdown modes via editorMode on a single RichTextEditor class. Use this skill for toolbar setup, image/media/table handling, inline or iframe editing, AI assistant, smart editing, import/export, and all content editor scenarios.

Build responsive sidebar navigation with Syncfusion Sidebar component. Supports multiple expand types (Over, Push, Slide, Auto), docking, animations, and gestures. Triggers when building navigation menus, mobile-friendly sidebars, dockable panels, or sidebars with list/tree views in TypeScript applications.

Implements the Syncfusion JavaScript SpeechToText control. Use this skill ALWAYS immediately for speech-to-text functionality, voice recognition, speech transcription, or microphone-based input in JavaScript applications. This skill provides guidance for implementing the SpeechToText control to transcribe spoken audio to text, handle speech recognition events, customize button appearance, set language options, manage listening states, and apply security best practices for voice input features.

Implement and configure the Syncfusion TypeScript Splitter control for creating responsive multi-pane interfaces. Use this skill when implementing pane configuration, orientation changes, resizing, collapse/expand functionality, and content loading. This skill covers nested layouts, styling customization, and all API properties, methods, and events for the Splitter component.

Create and implement the Syncfusion TypeScript Stepper navigation component. Use this skill whenever a user wants to display a progress indicator with steps, implement a wizard workflow, show a multi-step process, display navigation between form pages, add step validation, or configure step-by-step guided experiences. Always reference this skill when working with Stepper controls, step configuration, orientations, events, or animations.

Create and configure Syncfusion TypeScript Timeline control for displaying sequential events and chronological content. Use this skill when implementing timeline layouts, milestone tracking, process flows, progress indicators, or visualizing ordered sequences. This skill covers project milestones, career progression, order status tracking, itinerary planning, and procedural workflow visualization using Syncfusion Timeline.

Implement Syncfusion TypeScript Toolbar control for creating command-based navigation interfaces. Use this skill whenever the user needs to build toolbars, add toolbar items (buttons, separators, inputs), configure responsive modes (scrollable/popup), handle toolbar events, customize styling, add tooltips/icons, implement RTL support, or ensure accessibility compliance. This is the primary skill for all Toolbar component implementation questions.

Implements Syncfusion JavaScript accumulation charts (Pie, Doughnut, Funnel, Pyramid) for proportional and percentage-based visualizations. Use when displaying categorical or proportional data. Covers legend and label configuration, interactivity, accessibility, and customization. Works with TypeScript (modules) and JavaScript (CDN/ES5).

Generate scannable barcodes in web apps using Syncfusion JavaScript Barcode Generator (linear barcodes, QR Code, Data Matrix). Trigger for barcode rendering, sizing/margins, colors, text display, error correction, quiet zones, encoding options, validation, and exporting to PNG/JPG/PDF for e-commerce, inventory, labels, and document workflows.

Common utilities and features for Syncfusion JavaScript controls. Use this skill when the user needs to implement animations, drag-and-drop, state persistence, RTL support, localization, globalization, security, templates, and advanced features for Syncfusion JavaScript controls.

Create and edit visual diagrams with Syncfusion JavaScript Diagram (flowcharts, BPMN, swimlanes, UML, org charts, network topologies). Trigger for diagram rendering, node/connector modeling, layouts, data binding, palettes, interactive tools, exporting, and workflow visualization tasks.

Implement Syncfusion Dropdown Tree control to display hierarchical data in dropdown format. Use this skill when implementing single or multiple value selection from hierarchical data, enabling checkboxes with dependent parent-child states, lazy-loading large datasets, customizing tree items with templates, and configuring multi-language support. Comprehensive coverage of properties, methods, events, data binding modes, checkbox selection, templates, and accessibility features.

Build file management interfaces with Syncfusion JavaScript FileManager component. Use this when creating file browsers, implementing file operations, enabling upload/download functionality, customizing toolbars and context menus, configuring drag-and-drop, and implementing data binding for file systems. Covers virtualization, access control, localization, and enterprise-grade file operations.

Implement Syncfusion Gantt Chart using JavaScript/TypeScript (Essential JS 2). Use this when working with ej2-gantt component for project scheduling, task dependencies, and timeline management. Covers full Gantt implementation including data binding, task scheduling, columns, resources, timeline configuration, WBS, resource view, critical path, baseline tracking, filtering, sorting, editing, and export functionality (Excel/PDF).

Implements Syncfusion JavaScript Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.