Compétences chat-ui
💬

chat-ui

Sûr

Construa Interfaces de Chat em React com Componentes Prontos

Criar interfaces de chat do zero requer tempo significativo e esforço de design. Esta skill fornece componentes React prontos para uso com estilização shadcn/ui para desenvolvimento rápido de interfaces de chat.

Prend en charge: Claude Codex Code(CC)
📊 71 Adéquat
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "chat-ui". Create a chat input that shows a loading spinner when disabled

Résultat attendu:

Um componente ChatInput com prop disabled vinculado ao estado isLoading, exibindo um ícone de spinner e estilização desbotada quando as mensagens estão sendo processadas.

Utilisation de "chat-ui". Show how to display a typing indicator while waiting for AI response

Résultat attendu:

Padrão de renderização condicional: {isLoading && <TypingIndicator />} posicionado entre a lista de mensagens e o ChatInput, com pontos animados mostrando que a IA está gerando uma resposta.

Audit de sécurité

Sûr
v1 • 3/21/2026

Static analyzer flagged 28 patterns that are all false positives. Markdown code block delimiters (```) were incorrectly detected as shell backtick execution. URLs are documentation links, not runtime network calls. No cryptographic code exists. This is a legitimate React UI component library documentation file with no security concerns.

1
Fichiers analysés
141
Lignes analysées
2
résultats
1
Total des audits
Problèmes à risque moyen (1)
SKILL.md:14-131
False Positive: Markdown Code Block Delimiters
Static analyzer detected 'Ruby/shell backtick execution' but these are Markdown code fence delimiters (```bash, ```tsx) used for documentation, not shell execution backticks. No command injection risk exists.
Problèmes à risque faible (1)
SKILL.md:8SKILL.md:10SKILL.md:16SKILL.md:135-139
False Positive: Documentation URLs
Hardcoded URLs detected are documentation and CDN links in markdown content (ui.inference.sh, inference.sh). These are reference links for users, not runtime network requests made by code.
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
31
Communauté
98
Sécurité
91
Conformité aux spécifications

Ce que vous pouvez construire

Interface de Chat de Assistente de IA

Construa uma interface conversacional para assistentes de IA com histórico de mensagens, indicadores de digitação e exibição de respostas em streaming.

Widget de Suporte ao Cliente

Crie widgets de chat de suporte ao cliente incorporados com estilização profissional e threading de mensagens.

Ferramenta de Comunicação Interna de Equipe

Prototipe rapidamente interfaces de mensagens de equipe com estilização de mensagens baseada em funções e manipulação de entrada.

Essayez ces prompts

Configuração Básica de Componente de Chat 
Gere uma interface de chat básica usando os componentes chat-ui com um ChatContainer, componentes ChatMessage de exemplo para funções user e assistant, e um ChatInput para enviar mensagens.
Aplicação de Chat Completa com Estado 
Crie um componente de chat completo com gerenciamento de estado React. Inclua array de histórico de mensagens, estado de carregamento para respostas de IA, exibição de TypingIndicator durante o processamento e manipulação adequada de envio de mensagens.
Mensagens de Chat com Estilização Personalizada 
Gere componentes ChatMessage com estilização personalizada usando Tailwind CSS. Mostre cores de fundo diferentes, avatares e formatação de timestamp para mensagens de usuário versus assistente.
Interface de Chat Multi-Modal 
Estenda os componentes chat-ui para suportar blocos de código, renderização de markdown em mensagens, indicadores de anexos de arquivos e botões de ação dentro das mensagens de chat. Inclua a estrutura completa do componente com as importações necessárias.

Bonnes pratiques

  • Sempre envolva os componentes de chat em ChatContainer para layout e estilização consistentes
  • Use valores de função distintos (user, assistant, system) para alinhamento e estilização adequados das mensagens
  • Implemente estados de carregamento com TypingIndicator para fornecer feedback ao usuário durante o processamento de IA

Éviter

  • Não codifique mensagens em código de produção - use gerenciamento de estado para conteúdo dinâmico
  • Evite bloquear a thread de UI durante o envio de mensagens - use manipuladores assíncronos com estados de carregamento
  • Não pule atributos de acessibilidade - certifique-se de que as mensagens de chat tenham labels ARIA apropriadas para leitores de tela

Foire aux questions

Quais frameworks esta skill de chat-ui suporta?
Esta skill fornece componentes React e Next.js usando TypeScript. Os componentes são estilizados com Tailwind CSS e se integram com os tokens de design do shadcn/ui.
Estes componentes incluem integração com API de backend?
Não, estes são apenas componentes de UI. Você precisa implementar suas próprias chamadas de API para enviar mensagens e receber respostas de IA. Os exemplos mostram comentários de placeholder para pontos de integração de API.
Posso personalizar a aparência das mensagens de chat?
Sim, todos os componentes aceitam props className para personalização com Tailwind CSS. Os componentes usam tokens de design do shadcn/ui que podem ser sobrescritos com estilos personalizados.
Como adiciono timestamps às mensagens do chat?
Estenda o componente ChatMessage para aceitar uma prop timestamp e renderizá-la dentro da bolha de mensagem. Use formatação de data JavaScript ou uma biblioteca como date-fns para formatação.
O suporte a respostas em streaming está incluído?
Os componentes suportam exibir conteúdo em streaming atualizando o estado da mensagem incrementalmente. Você precisa implementar a lógica de streaming no seu backend e atualizar o estado React conforme os blocos chegam.
Estes componentes são acessíveis?
Os componentes base seguem as melhores práticas de acessibilidade com HTML semântico. Para acessibilidade total, adicione labels ARIA às mensagens, garanta navegação por teclado para ChatInput e anuncie novas mensagens para leitores de tela.

Détails du développeur

Auteur

inferen-sh

Licence

MIT

Dépôt

https://github.com/inferen-sh/skills/tree/main/ui/chat-ui/

Réf

main

Structure de fichiers

📄 SKILL.md