Skip to main content
affpapa.org
RU EN
skill CX Codex

syncfusion-react-chat-ui — Claude Code skill

This skill helps build React chat interfaces with messages, attachments, typing states, user presence, and configurable layouts.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-chat-ui -a claude-code
Open on GitHub

What syncfusion-react-chat-ui does

The skill guides implementation of Syncfusion’s ChatUIComponent from @syncfusion/ej2-react-interactive-chat. It covers the initial setup, message insertion and updates, automatic scrolling, on-demand history loading, message states, and toolbar actions.

Its guidance includes user models, avatars, presence states, message and empty-chat templates, typing indicators, suggestions, and footer customization. It also covers headers, timestamps, date separators, mentions, localization, and right-to-left layouts. File attachments require an upload endpoint and can use file type and size restrictions.

The skill targets Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode. A basic implementation uses ChatUIComponent, MessagesDirective, and MessageDirective.

What it helps with

  • build a React support chat
  • insert messages with automatic scrolling
  • add file uploads to a conversation
  • customize message and typing templates
  • show user presence and mentions

Example prompts for the agent

  • Create a React support chat with ChatUIComponent, a header, and two sample messages.
  • Add attachments, timestamps, and copy, reply, and delete actions to the chat.
  • Set up message, empty-chat, and typing-indicator templates with syncfusion-react-chat-ui.

How to install syncfusion-react-chat-ui

1Skills CLI (Vercel)

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-chat-ui -a claude-code

2Manually: put the files in place

~/.claude/skills/syncfusion-react-chat-ui/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-chat-ui/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about syncfusion-react-chat-ui

How do I install syncfusion-react-chat-ui in Claude Code?

Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-chat-ui -a claude-code, then open ~/.claude/skills/syncfusion-react-chat-ui/SKILL.md.

What does syncfusion-react-chat-ui do?

It guides the implementation and customization of Syncfusion’s React chat component, including messages, users, attachments, events, templates, themes, and live updates.

What is required for file attachments?

Enable attachment support and configure an upload endpoint. File type and size limits can be applied as well.

Similar skills

Everything for Frontend and UI →
integrate-atlas-chat cognitedata A skill that wires the Atlas chat into your app's own UI. Use it when the Fusion/EOS sidebar is not an option. CX Codex +1 1,900installs chat-motion-overlay nexu-io Builds animated chat scenes from text or screenshots, then prepares them for Remotion rendering. Use it for message bubbles, app-style chat views, and transparent overlays. CX Codex +1 829installs chat-cards official John Haugabook A GitHub Copilot plugin that renders the agent's answers as a live deck of interactive cards: tabs, tables, SVG charts, forms and collapsible sections. ★ 40,451repo stars gws-chat official googleworkspace Manages Google Chat spaces and messages straight from your AI coding agent. Helpful for creating spaces, sharing files, and inspecting chat memberships. CX Codex +1 33,200installs gws-chat-send official googleworkspace A skill that posts a plain-text message to a Google Chat space from the command line. Useful when your agent needs to notify a team. CX Codex +1 32,000installs chat-sdk vercel Assists in building multi-platform TypeScript chat bots using Vercel's Chat SDK. Useful when configuring unified bot logic across Slack, Discord, Telegram, or WhatsApp. CX Codex +1 5,400installs

From the same set37

syncfusion-react-charts This skill helps build Syncfusion charts in React, covering axes, series, data sources, styling, and interactions. Use it for dashboards and analytics views. CX Codex +1 749installs syncfusion-react-license Walks through Syncfusion licensing in React apps: issuing a key, registering it, and clearing validation errors. Useful when your build starts warning about licenses. CX Codex +1 718installs syncfusion-react-image-editor A skill for the Syncfusion React Image Editor component: tells the agent how to wire image editing into a React app. CX Codex +1 718installs syncfusion-react-tabs Guides the agent through building and customizing Syncfusion Tab components in React: headers, drag-and-drop, content rendering. CX Codex +1 715installs syncfusion-react-accumulation-chart This skill guides React implementations of Pie, Doughnut, Funnel, and Pyramid charts. Use it for proportional data, percentage views, and hierarchical displays. CX Codex +1 711installs syncfusion-react-barcode A skill for generating barcodes, QR codes and Data Matrix codes in React with Syncfusion components. Useful when codes go into a form, report or label. CX Codex +1 711installs syncfusion-react-pivot-table Build and customize Syncfusion PivotView in React with guidance for data binding, grouping, filters, aggregation, exports, and pivot charts. CX Codex +1 709installs syncfusion-react-dashboard-layout A skill that tells your coding agent how to build React dashboards with draggable Syncfusion panels. CX Codex +1 709installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor