syncfusion/react-ui-components-skills
62 skills22.2k installs186 starsGitHub
Install
npx skills add https://github.com/syncfusion/react-ui-components-skillsSkills in this repo
1Syncfusion React Gridsyncfusion-react-grid is an agent skill from syncfusion/react-ui-components-skills for building data-heavy React interfaces with Syncfusion's Grid component. It helps developers configure columns, data sources, sorting, filtering, paging, inline editing, selection, and export behaviors using Syncfusion React APIs and conventions. Teams reach for syncfusion-react-grid when admin dashboards, ERP views, or reporting screens need spreadsheet-grade tables without hand-rolling virtualized grids. The skill encodes Syncfusion-specific props, event handlers, and styling hooks so agents produce working grid implementations aligned with the library's documentation rather than generic HTML tables.437installs2Syncfusion React Gantt Chartsyncfusion-react-gantt-chart is a component-aware agent skill (version 33.1.44) from Syncfusion's react-ui-components-skills pack that teaches AI assistants to implement the React GanttComponent for project scheduling. The SKILL.md maps official APIs for auto/manual/custom scheduling, four dependency types (FS, SS, FF, SF), resource views, critical path, milestones, Excel/PDF export, filtering, virtualization, and RTL localization, and links to 27 feature-specific reference guides such as data-binding, task-constraints, and excel-export. Developers reach for it when building admin portals, construction schedulers, or resource planners that need interactive taskbars, predecessor offsets, and server-side CRUD via DataManager UrlAdaptor. Install with npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-gantt-chart. The skill expects 14 CSS theme package imports during setup.430installs3Syncfusion React Schedulersyncfusion-react-scheduler is a syncfusion/react-ui-components-skills agent skill for building calendar, timeline, and resource scheduling interfaces with Syncfusion's React Scheduler component. The skill sits in Syncfusion's React UI components skill family alongside grid, gantt, and chart modules, giving coding agents component-specific guidance when developers add appointment booking, room scheduling, or shift-planning views to SaaS dashboards. Developers reach for syncfusion-react-scheduler when a React frontend needs day, week, month, or timeline scheduler views with drag-drop events, recurring appointments, or resource grouping without reading entire Syncfusion docs manually. The catalog entry ships with a placeholder description in the indexed snapshot, so teams should open the repository SKILL.md for prop-level examples before production use. The skill lists 272 installs on skills.sh, reflecting demand for agent-assisted Syncfusion Scheduler integration during React UI build work. Licensing and package setup typically require a valid Syncfusion React license in commercial projects.428installs4Syncfusion React Rich Text Editorsyncfusion-react-rich-text-editor is a Syncfusion agent skill from react-ui-components-skills for wiring Syncfusion's React Rich Text Editor into React apps. The skill targets developers adding formatted text editing, toolbar configuration, and editor lifecycle handling in SaaS dashboards, CMS admin panels, and internal tools. It fits when you need a production-grade RTE instead of building custom contenteditable logic from scratch. Source material is sparse in the catalog entry, so pair it with Syncfusion React documentation for API specifics, licensing, and bundle configuration.424installs5Syncfusion React Treegridsyncfusion-react-treegrid is a syncfusion/react-ui-components-skills agent skill focused on the Syncfusion React TreeGrid component for hierarchical tabular data in enterprise dashboards and admin consoles. Developers reach for it when nested rows—organizations, file trees, BOMs, or category hierarchies—need expand-collapse navigation, inline editing, sorting, and filtering without building a custom tree table from scratch. The skill encodes Syncfusion-specific props, data-source shaping, column templates, and React integration patterns so agents generate idiomatic TreeGrid JSX instead of generic HTML tables. Use syncfusion-react-treegrid when a SaaS admin surface requires parent-child row relationships with keyboard navigation and virtualization options available in the Syncfusion suite. Pair the skill with other syncfusion/react-ui-components-skills modules when the same screen also needs charts, schedulers, or form controls from the shared component library.414installs6Syncfusion React Commonsyncfusion-react-common is a frontend skill from Syncfusion's react-ui-components-skills repository that equips coding agents with shared guidance for wiring Syncfusion React controls consistently across an application. Developers reach for it when starting or extending a React project that depends on Syncfusion's component suite and needs aligned theming, licensing, import patterns, and reusable configuration before diving into individual controls like grids, charts, or schedulers. The skill complements sibling Syncfusion React skills by centralizing cross-cutting UI practices so agents do not reintroduce incompatible setups between screens. Use it during React feature work whenever Syncfusion components appear in requirements, refactors, or bug fixes that span multiple control types and need a single baseline integration approach.406installs7Syncfusion React Chartssyncfusion-react-charts is a component-aware skill at version 33.1.44 from Syncfusion Inc in the syncfusion/react-ui-components-skills repository. The skill teaches ChartComponent setup with SeriesDirective, Inject services, and patterns for 20+ chart types including line, column, candlestick, polar, radar, pie, and doughnut visualizations. Developers reach for syncfusion-react-charts when binding local arrays or remote DataManager sources with ODataAdaptor, WebApiAdaptor, or ODataV4Adaptor, configuring primaryXAxis and primaryYAxis, placing data labels inside marker.dataLabel, and adding zoom, tooltip, crosshair, or financial indicator panes. Eight reference guides cover API reference, getting started, chart types, axes, series data, appearance, user interaction, and advanced financial features for React dashboards and analytics applications.402installs8Syncfusion React Themessyncfusion-react-themes is version 33.1.44 in syncfusion/react-ui-components-skills, categorized as Theming and Appearance for Syncfusion React apps. It documents npm and CDN theme imports that must match installed @syncfusion package versions, global dark mode via the e-dark-mode body class, per-component cssClass sizing with e-bigger touch mode, and CSS variable overrides for Fluent 2 hex and Material 3 RGB primary colors. Reference guides cover built-in themes, dark mode switching, css-variables.md per theme family, icons via @syncfusion/ej2-icons, advanced theming including Theme Studio, and tailwind3-lite optimized CSS for smaller bundles. Developers invoke it when styling Syncfusion buttons, grids, or schedulers, switching themes at runtime, or aligning CDN CSS version 33.1.44 with local npm packages.399installs9Syncfusion React Diagramsyncfusion-react-diagram is a component-specific agent skill from syncfusion/react-ui-components-skills that teaches coding agents the official Syncfusion React Diagram APIs. Each skill ships as a self-contained SKILL.md playbook plus references/ implementation guides covering setup, imports, modules, shapes, connectors, data binding, and automatic layouts. Developers install the pack with npx skills add syncfusion/react-ui-components-skills so agents generate production-ready diagram code grounded in Syncfusion patterns instead of hallucinated props. The Diagram component supports flowchart diagrams with built-in shapes, organization charts, mind maps, radial tree layouts, and hierarchical tree charts with flexible data binding. Reach for syncfusion-react-diagram when building admin builders, process designers, or architecture canvases in React apps already using Syncfusion. The skill pairs with sibling Syncfusion React skills and documents theme styling, globalization, and feature integration conventions shared across the pack.397installs10Syncfusion React File Managersyncfusion-react-file-manager is an agent skill from syncfusion/react-ui-components-skills for implementing the Syncfusion React File Manager component at version 33.1.44. It walks through installation, local and remote data providers, drag-and-drop uploads, multi-select, toolbar and context-menu customization, thumbnail templates, and role-based access control. The skill links to 39 feature-specific reference guides, including virtualization patterns for lists with 1000+ files, and sits inside a 62-skill Syncfusion React catalog installable via npx skills add. Use it when you need a production file explorer in React admin tools, DAM panels, or document workflows instead of hand-rolling tree and grid file UIs.396installs11Syncfusion React Tabssyncfusion-react-tabs is a component-specific agent skill from syncfusion/react-ui-components-skills that teaches agents to implement the Syncfusion React Tab component correctly. The Tab component organizes related content into tabbed sections with headers, supporting multiple header positions (top, bottom, left, right), overflow handling via scroll or popup modes, flexible content rendering on demand or at initial load, drag-and-drop reordering, ARIA accessibility, animations, HTML sanitization, internationalization, and state persistence across reloads. The skill's SKILL.md documents quick-start examples, key properties, methods, events, and common layout patterns such as vertical left-rail tabs. Install the pack with npx skills add syncfusion/react-ui-components-skills so agents read official APIs instead of guessing props. Developers reach for syncfusion-react-tabs when building settings panels, wizard-style views, or dashboard sections that switch content without route changes. It pairs with other Syncfusion React skills for forms, grids, and charts inside tab panels.395installs12Syncfusion React Chat Uisyncfusion-react-chat-ui is a component-aware Agent Skill (version 33.1.44) from syncfusion/react-ui-components-skills for building production React messaging interfaces. The SKILL.md maps eleven reference guides covering getting started, message management, user configuration, events, templating, file attachments, header customization, timestamps, typing indicators, mentions, and globalization. Quick-start TSX shows ChatUIComponent with MessagesDirective, UserModel authors, and headerText configuration. Common patterns include support chats with enableAttachments and messageToolbarSettings, team collaboration with @mentions and compact mode, and multilingual RTL layouts. Developers reach for syncfusion-react-chat-ui when agents must generate correct Syncfusion imports, addMessage() calls, and attachment event handlers instead of hallucinating undocumented Chat UI props.393installs13Syncfusion React Pivot Tablesyncfusion-react-pivot-table is a component-specific agent skill from syncfusion/react-ui-components-skills that grounds AI assistants in the official Syncfusion React Pivot Table APIs. Like other entries in the pack, it provides a SKILL.md core playbook and references/ deep dives for setup, data binding, field mapping, aggregations, drill-down, filtering, and export patterns. Developers install the repository with npx skills add syncfusion/react-ui-components-skills so agents stop inventing incorrect PivotTable props when building dashboards. The skill targets admin portals, BI-style views, and operational reports where users pivot rows, columns, and values interactively in the browser. It documents Syncfusion theme integration, localization, and state patterns shared across the React skills collection. Invoke syncfusion-react-pivot-table when prompts mention pivot grids, multidimensional summaries, or Syncfusion PivotTable alongside DataGrid-style CRUD portals. Skip it when analytics run only in server-side SQL or external BI tools without an in-app React pivot UI.392installs14Syncfusion React Accumulation Chartsyncfusion-react-accumulation-chart is a component-specific skill from syncfusion/react-ui-components-skills that teaches coding agents to implement Syncfusion React Accumulation Charts for proportional data visualization. The skill covers AccumulationChartComponent setup with PieSeries injection via @syncfusion/ej2-react-charts, data binding with xName and yName fields, and configuration for legends, tooltips, smart labels, grouping small slices, semi-chart angles, themes, and accessibility. Developers reach for this skill when building dashboards that need pie, doughnut, pyramid, or funnel charts without hallucinated Syncfusion props. Install the full skills pack with npx skills add syncfusion/react-ui-components-skills so the agent loads SKILL.md patterns and references/ implementation guides before generating chart JSX.391installs15Syncfusion React Ai Assistviewsyncfusion-react-ai-assistview is a component-specific skill from syncfusion/react-ui-components-skills for building React AI assistant interfaces with Syncfusion's AI AssistView component. The skill covers AIAssistViewComponent from @syncfusion/ej2-react-interactive-chat, promptRequest event handlers to connect generative AI services, toolbar commands, prompt suggestions, streaming responses, and prompts collection for conversation history. Developers reach for this skill when adding chat-style AI help panels to admin portals, SaaS dashboards, or internal tools without inventing incorrect Syncfusion props. Install via npx skills add syncfusion/react-ui-components-skills so the agent reads SKILL.md patterns and references/ guides before generating production-ready assistant UI code.391installs16Syncfusion React Barcodesyncfusion-react-barcode is a Syncfusion Agent Skill (metadata version 33.1.44) that documents three React generators—BarcodeGeneratorComponent for Code39, Code128, Code11, Code32, Code93, and Codabar, QRCodeGeneratorComponent, and DataMatrixGeneratorComponent—with props, styling, exportImage, and exportAsBase64Image workflows plus six reference guides from getting started through export. Install the pack with npx skills add syncfusion/react-ui-components-skills; the skill auto-loads when agents implement retail SKUs, inventory labels, QR landing links, or printable barcode assets in React admin or logistics UIs. The playbook enforces correct imports from @syncfusion/ej2-react-barcode-generator, dimension props, and PNG or base64 export patterns agents often hallucinate. With 250 catalog installs, syncfusion-react-barcode targets frontend engineers standardizing Syncfusion barcode code across Cursor, Claude Code, and Copilot-style assistants.391installs17Syncfusion React Licensesyncfusion-react-license is an agent skill (metadata version 33.1.44) from syncfusion/react-ui-components-skills that documents Syncfusion React licensing end to end. License key validation was introduced in Essential JS2 v20.1.0.47 (2022 Volume 1); all npm-based React apps must register a valid key offline at startup. The skill distinguishes trial (30-day), community (<$1M revenue), and paid licenses; edition-based keys for v31.1.17+ covering 5 editions (UI, Document SDK, PDF Viewer SDK, DOCX Editor SDK, Spreadsheet Editor SDK); and platform-based keys for v30.x and earlier. Registration uses the SYNCFUSION_LICENSE environment variable plus npx syncfusion-license activate, with reference docs for GitHub Actions and Azure Pipelines CI/CD, plus troubleshooting for version mismatch, platform mismatch, and trial-expired errors. Use syncfusion-react-license when a React app shows Syncfusion trial banners or fails CI builds after adding @syncfusion packages.391installs18Syncfusion React Mapssyncfusion-react-maps is a Syncfusion agent skill (version 33.1.44) for building MapsComponent dashboards in React with SVG-based geographic visualizations. It supports GeoJSON shape binding, Bing Maps, OpenStreetMap, and Azure Maps base layers, plus markers, bubbles, data labels, navigation lines, annotations, and interactive zoom or pan. The skill documents six map projections, multi-layer and sublayer stacking, color mapping for choropleth charts, and WCAG 2.1 keyboard accessibility. Reference guides span API properties, getting started, layers, markers, and combined data-visualization patterns. Use it when shipping regional analytics, store locators, election maps, or logistics route overlays inside Syncfusion React apps.390installs19Syncfusion React Speech To Textsyncfusion-react-speech-to-text is a Syncfusion Agent Skill (version 33.1.44) for adding browser-based speech recognition to React apps via @syncfusion/ej2-react-inputs. The SKILL.md documents six reference guides on getting started, speech recognition features, button and tooltip customization, events and methods, globalization, and troubleshooting/security. Quick-start TSX wires SpeechToTextComponent transcriptChanged events to a TextAreaComponent for live voice notes. Patterns cover voice form inputs, programmatic startListening()/stopListening() via refs, and onError handling with human-readable errorMessage fields. Key props include lang, allowInterimResults, listeningState enum, and 12 TooltipPosition values. Developers reach for this skill when agents must generate correct Syncfusion speech components with microphone permission handling instead of generic Web Speech API snippets.390installs20Syncfusion React Image Editorsyncfusion-react-image-editor is an agent skill from syncfusion/react-ui-components-skills for the Syncfusion React Image Editor at version 33.1.44. It covers opening images from files, URLs, base64, blobs, or file managers; cropping with 10 preset aspect ratios; rotate, flip, zoom, text and shape annotations, freehand drawing, filters, finetune, undo-redo, and toolbar customization. The component supports PNG, JPEG, SVG, WEBP, and BMP export, plus keyboard navigation, RTL, and 120+ localization keys. The skill indexes 28 reference guides inside the broader 62-skill Syncfusion React catalog. Reach for it when you need a polished in-app editor instead of stitching separate crop and markup libraries.389installs21Syncfusion React Blockeditorsyncfusion-react-blockeditor is a Syncfusion agent skill (metadata version 33.1.44) for implementing BlockEditorComponent from @syncfusion/ej2-react-blockeditor in React apps. It documents block-based architecture with paragraphs, headings, lists, tables, code, callouts, and collapsible sections, plus slash commands, context menus, inline toolbars, @mentions, labels, and enableDragAndDrop reordering. Nine reference guides cover getting started, built-in blocks, menus, drag-drop, mentions, API methods, styling, advanced sanitization, and WCAG 2.1 accessibility. Reach for this skill when replacing markdown editors, building Notion-style CMS UIs, or wiring export to JSON, HTML, or plain text with XSS-safe paste cleanup.388installs22Syncfusion React Treeviewsyncfusion-react-treeview is a comprehensive Syncfusion Agent Skill (version 33.1.44) for @syncfusion/ej2-react-navigations TreeViewComponent. The SKILL.md documents 11 node CRUD methods, 19 lifecycle and interaction events, 35+ properties, and 50+ working code examples across fourteen reference guides from getting started through context-menu integration. Features include five data-binding patterns (hierarchical, self-referential, OData, Web API, load-on-demand), statelessTemplates performance optimization, three-state checkboxes, 15+ keyboard shortcuts, and localization for 16+ languages with RTL support. Developers reach for syncfusion-react-treeview when building org charts, file-system trees, or admin navigation that requires accurate addNodes(), filtering with parent-chain inclusion, and drag-drop validation instead of generic tree component guesses.388installs23Syncfusion React Query Buildersyncfusion-react-query-builder is a Syncfusion agent skill (version 33.1.44) for building rule-based filter UIs with the @syncfusion/ej2-react-querybuilder package. The skill documents column schema via ColumnsModel, nested AND/OR rule groups, 16+ built-in operators across string, number, date, and boolean types, and conversion methods including getSqlFromRules, getMongoQuery, and parameterized SQL import/export. Seven reference guides cover getting started, data binding with DataManager, templates, advanced features like drag-and-drop and enablePersistence, and a full API cheat sheet with maxGroupCount defaulting to 5. Developers reach for this skill when adding advanced search panels, dashboard filters tied to Syncfusion Grid or Charts, or saved query templates that round-trip SQL. Install the broader skill pack with npx skills add syncfusion/react-ui-components-skills -y, then invoke when prompts mention QueryBuilderComponent, RuleModel, or dynamic filter builders in React TypeScript apps.387installs24Syncfusion React Ribbonsyncfusion-react-ribbon is a Claude skill from syncfusion/react-ui-components-skills for building ribbon-style toolbars in React apps using Syncfusion's Ribbon component. The skill guides configuration of tabs, groups, items, keyboard shortcuts, and responsive ribbon layouts common in enterprise dashboards and document editors. Developers reach for syncfusion-react-ribbon when integrating Syncfusion's @syncfusion/ej2-react-ribbon package and need correct props, event handlers, and layout patterns instead of hand-rolling toolbar markup.385installs25Syncfusion React Dropdown Treesyncfusion-react-dropdown-tree is a component-focused frontend skill from syncfusion/react-ui-components-skills for React developers using Syncfusion controls. The skill guides setup and configuration of the Dropdown Tree component, which combines tree hierarchy navigation with dropdown selection for dense data UIs such as org charts, category pickers, and nested folder selectors. Developers reach for syncfusion-react-dropdown-tree when a React dashboard or form needs multi-level selection without building a custom tree-dropdown from scratch. The catalog entry is minimal, so the skill primarily accelerates Syncfusion-specific API usage during active frontend build work.384installs26Syncfusion React Inline Ai Assistsyncfusion-react-inline-ai-assist is a frontend integration skill from syncfusion/react-ui-components-skills for React developers adding AI-powered inline assistance to enterprise UIs. The skill covers Syncfusion component configuration for contextual AI suggestions, completions, or assist panels embedded directly in editors and forms. Developers reach for syncfusion-react-inline-ai-assist when a React app already uses Syncfusion and needs copilot-style inline help without building custom AI UI primitives. Catalog metadata is thin, so the skill primarily accelerates Syncfusion-specific inline AI assist APIs during active React build work.383installs27Syncfusion React Kanbansyncfusion-react-kanban: A skill for development. This provides functionality for development workflows.382installs28Syncfusion React Dashboard Layoutsyncfusion-react-dashboard-layout: A skill for development. This provides functionality for development workflows.375installs29Syncfusion React Data Managersyncfusion-react-data-manager: A skill for development. This provides functionality for development workflows.357installs30Syncfusion React Buttonssyncfusion-react-buttons: A skill for development. This provides functionality for development workflows.345installs31Syncfusion React Inputssyncfusion-react-inputs: A skill for development. This provides functionality for development workflows.345installs32Syncfusion React Popupssyncfusion-react-popups: A skill for development. This provides functionality for development workflows.342installs33Syncfusion React 3d Chartsyncfusion-react-3d-chart: A skill for development. This provides functionality for development workflows.340installs34Syncfusion React Dropdownssyncfusion-react-dropdowns: A skill for development. This provides functionality for development workflows.340installs35Syncfusion React Heatmapsyncfusion-react-heatmap: A skill for development. This provides functionality for development workflows.339installs36Syncfusion React Notificationssyncfusion-react-notifications: A skill for development. This provides functionality for development workflows.339installs37Syncfusion React Sidebarsyncfusion-react-sidebar: A skill for development. This provides functionality for development workflows.339installs38Syncfusion React Appbarsyncfusion-react-appbar: A skill for development. This provides functionality for development workflows.338installs39Syncfusion React Carouselsyncfusion-react-carousel: A skill for development. This provides functionality for development workflows.337installs40Syncfusion React Timelinesyncfusion-react-timeline: A skill for development. This provides functionality for development workflows.337installs41Syncfusion React Progress Barsyncfusion-react-progress-bar: A skill for development. This provides functionality for development workflows.336installs42Syncfusion React Smithchartsyncfusion-react-smithchart: A skill for development. This provides functionality for development workflows.336installs43Syncfusion React Breadcrumbsyncfusion-react-breadcrumb: A skill for development. This provides functionality for development workflows.335installs44Syncfusion React Bullet Chartsyncfusion-react-bullet-chart: A skill for development. This provides functionality for development workflows.335installs45Syncfusion React Circular Gaugesyncfusion-react-circular-gauge: A skill for development. This provides functionality for development workflows.335installs46Syncfusion React Splittersyncfusion-react-splitter: A skill for development. This provides functionality for development workflows.335installs47Syncfusion React 3d Circular Chartsyncfusion-react-3d-circular-chart: A skill for development. This provides functionality for development workflows.334installs48Syncfusion React Steppersyncfusion-react-stepper: A skill for development. This provides functionality for development workflows.334installs49Syncfusion React Sankeysyncfusion-react-sankey: A skill for development. This provides functionality for development workflows.333installs50Syncfusion React Markdown Convertersyncfusion-react-markdown-converter: A skill for development. This provides functionality for development workflows.332installs51Syncfusion React Range Navigatorsyncfusion-react-range-navigator: A skill for development. This provides functionality for development workflows.332installs52Syncfusion React Stock Chartsyncfusion-react-stock-chart: A skill for development. This provides functionality for development workflows.332installs53Syncfusion React Linear Gaugesyncfusion-react-linear-gauge: A skill for development. This provides functionality for development workflows.331installs54Syncfusion React Treemapssyncfusion-react-treemaps: A skill for development. This provides functionality for development workflows.330installs55Syncfusion React Listviewsyncfusion-react-listview: A skill for development. This provides functionality for development workflows.302installs56Syncfusion React Accordionsyncfusion-react-accordion: A skill for development. This provides functionality for development workflows.299installs57Syncfusion React Cardssyncfusion-react-cards: A skill for development. This provides functionality for development workflows.297installs58Syncfusion React Context Menusyncfusion-react-context-menu: A skill for development. This provides functionality for development workflows.297installs59Syncfusion React Menusyncfusion-react-menu: A skill for development. This provides functionality for development workflows.296installs60Syncfusion React Toolbarsyncfusion-react-toolbar: A skill for development. This provides functionality for development workflows.296installs61Syncfusion React Sparklinesyncfusion-react-sparkline: A skill for development. This provides functionality for development workflows.293installs62Syncfusion React CalendarsProvides implementation guidance for Syncfusion React calendar and date/time picker components covering installation, binding, range selection, localization, and accessibility. A developer uses it when adding date and time input controls to a React app.205installs