📦

chat-ui

Name: chat-ui
Author: inferen-sh

Révision du contenu r1 Sûr ⚙️ Commandes externes🌐 Accès réseau

Créer des interfaces de chat React

Les équipes ont besoin d’interfaces de chat cohérentes avec les applications React modernes. Cette compétence fournit des modèles de composants de chat réutilisables pour les projets React, Next.js et de style shadcn.

Prend en charge: Claude Codex Code(CC)

🥉 78 Bronze

Maintain this Skill? Claim it 🥉 78 Bronze

Installer avec mon Agent

Copiez cette demande dans votre Agent. Elle contient la page Skill de référence et le manifeste.

Demande d’agent

Review the Skillstore skill "chat-ui" from https://skillstore.io/skills/inferen-sh-chat-ui.md and its manifest at https://skillstore.io/api/skills/inferen-sh-chat-ui/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Votre Agent doit toujours présenter son plan et demander toute confirmation exigée par la politique de sécurité.

Ressources lisibles par les agents

Utilisez ces liens lorsqu’un Agent IA, un crawler ou un script a besoin d’un contexte propre au lieu de lire toute la page.

Détail Markdown GET /skills/inferen-sh-chat-ui.md manifest signé GET /api/skills/inferen-sh-chat-ui/manifest lockfile signé GET /api/skills/inferen-sh-chat-ui/lockfile

Tester

Utilisation de « chat-ui ». Créer un écran de chat de support basique pour une application Next.js.

Résultat attendu:

Une mise en page de chat React avec un conteneur de messages, des messages utilisateur et assistant, un état désactivé pendant le chargement et un champ d’envoi.

Utilisation de « chat-ui ». Ajouter un retour pour une réponse d’assistant qui est encore en cours de génération.

Résultat attendu:

Un flux de chat qui affiche le dernier message utilisateur, montre un indicateur de saisie et empêche les envois en double pendant le chargement.

Utilisation de « chat-ui ». Expliquer comment styliser différemment les messages de l’assistant.

Résultat attendu:

Des recommandations pour appliquer les tokens de design du projet aux arrière-plans des messages de l’assistant tout en préservant l’alignement basé sur les rôles.

Audit de sécurité

Sûr

v6 • 09/07/2026 Ouvrir le rapport versionné

Most static findings are false positives from Markdown fences, inline code formatting, React examples, and documentation links. The remaining confirmed risks are user-invoked install commands that fetch external component or skill content, so users should review remote sources before running them.

Fichiers analysés

141

Lignes analysées

Éléments à examiner

Faux positifs ignorés

Éléments d’évaluation des capacités (3)

Il s’agit de capacités locales réelles qui peuvent être attendues pour cette compétence ; elles nécessitent donc un examen, mais ne sont pas comptabilisées comme comportement malveillant confirmé.

Moyen

SKILL.md:14-17

Ruby/shell backtick execution

```bash

Lines 14-17 contain a bash quick-start example that runs npx and fetches a remote shadcn registry URL. This is user-invoked, but it still introduces external command and supply-chain risk.

Moyen

SKILL.md:122-131

Ruby/shell backtick execution

```bash

Lines 122-131 contain bash examples that run npx skills add for related packages. These are user-invoked install commands and can fetch external skill content.

Faible

SKILL.md:16

Hardcoded URL

npx shadcn@latest add https://ui.inference.sh/r/chat.json

The URL is passed to npx shadcn as a remote component registry source. This network dependency is expected, but users should review fetched code before installation.

Facteurs de risque

Audité par: codex Voir l’historique des audits →

Partager et citer ce rapport

Partagez le rapport d’évaluation versionné, le badge neutre, la carte intégrable et les citations. Skillstore présente les preuves sans décider si ce Skill est sûr.

Ouvrir le rapport versionné

Copier le lien du rapport

https://skillstore.io/skills/inferen-sh-chat-ui/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Badge Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/inferen-sh-chat-ui/security.svg)](https://skillstore.io/skills/inferen-sh-chat-ui?utm_source=security_passport_badge)

Badge HTML

<a href="https://skillstore.io/skills/inferen-sh-chat-ui?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/inferen-sh-chat-ui/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Carte intégrable

<iframe src="https://skillstore.io/embed/skills/inferen-sh-chat-ui.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Citations académiques (APA · BibTeX · CFF)

Citation APA

inferen-sh. (2026). chat-ui security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/inferen-sh-chat-ui/audits/6

Citation BibTeX

@techreport{inferen-sh-inferen-sh-chat-ui-2026,
  author = {inferen-sh},
  title = {chat-ui security audit report (audit version 6)},
  institution = {Skillstore},
  year = {2026},
  number = {6},
  url = {https://skillstore.io/skills/inferen-sh-chat-ui/audits/6},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "chat-ui security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
  - name: "inferen-sh"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/inferen-sh-chat-ui/audits/6"
identifiers:
  - type: other
    value: "skillstore:inferen-sh-chat-ui:audit:6"
    description: "Skillstore immutable audit report identifier"

Comparer les variantes

2 variantes installables

Chaque auteur reste un skill installable distinct. La variante recommandée est classée selon les preuves Skillstore.

Pourquoi cette variante est première

Meilleur score Skillstore

Auteur / source Score Skillstore Niveau de confiance des preuves Utilisation Skillstore Mis à jour

inferen-sh Recommandé Actuelle

inferen-sh-chat-ui

Score Skillstore 78

Niveau de confiance des preuves Élevé

Utilisation Skillstore 12

Mis à jour

2026-09-09

inference-sh-9

inference-sh-9-chat-ui

Score Skillstore 69

Niveau de confiance des preuves Élevé

Utilisation Skillstore 47

Mis à jour

2026-09-09

Score Skillstore

Pourquoi ce score Niveau de confiance des preuves: Élevé

Architecture

Maintenabilité

Contenu

Communauté

Conformité aux spécifications

Ce que vous pouvez créer

Prototyper un assistant IA

Créer un écran de chat avec des bulles de messages, une gestion de la saisie et un retour de chargement pour les premiers tests produit.

Standardiser les composants de chat

Utiliser des exemples React partagés pour maintenir des mises en page de messages et des états d’interaction cohérents dans toute une application.

Planifier l’UX de chat en streaming

Combiner des indicateurs de saisie et des recommandations liées pour concevoir des conversations d’agent réactives.

Essayez ces prompts

Créer une vue de chat basique

Utilisez la compétence chat-ui pour créer une vue de chat React simple avec des messages, un champ de saisie et un indicateur de saisie.

Adapter les composants à mon projet

Examinez la structure de mon projet React et indiquez où placer les composants de conteneur de chat, de message et de saisie.

Concevoir les états de chargement et vides

Étendez le modèle d’UI de chat avec des états vide, chargement, désactivé et erreur qui correspondent à mon système de design actuel.

Créer une interface d’assistant en streaming

Utilisez les exemples chat-ui pour concevoir une interface d’assistant en streaming avec des rôles de message, des réponses en attente et des contrôles accessibles.

Bonnes pratiques

Examiner le contenu du registre distant avant d’exécuter les commandes d’installation.
Synchroniser l’état du chat, l’état de chargement et l’état désactivé du champ de saisie.
Utiliser une gestion claire des rôles pour les messages utilisateur, assistant et système.

Éviter

Ne pas exécuter de commandes d’installation distantes sans examiner les fichiers récupérés.
Ne pas mélanger la logique d’API backend dans les composants de chat de présentation.
Ne pas masquer les états de chargement ou désactivés pendant l’envoi d’un message.

Foire aux questions

Qu’est-ce que cette compétence aide à créer ?

Elle aide à créer des interfaces de chat React et Next.js avec des modèles de composants réutilisables.

Inclut-elle un service de chat backend ?

Non. Elle se concentre sur les composants frontend et laisse l’intégration API à votre application.

Puis-je l’utiliser avec Claude, Codex et Claude Code ?

Oui. Le rapport indique la prise en charge de Claude, Codex et Claude Code.

Prend-elle en charge les réponses en streaming ?

Elle inclut des modèles d’UI et des liens de documentation qui aident à concevoir des expériences de chat en streaming.

Les commandes d’installation sont-elles sûres à exécuter automatiquement ?

Elles récupèrent du contenu externe, les utilisateurs doivent donc inspecter les sources et épingler d’abord des versions fiables.

Quels projets conviennent bien ?

Elle convient aux projets React ou Next.js qui utilisent Tailwind CSS et des composants de style shadcn.

Détails du développeur

Auteur

inferen-sh

Licence

MIT

Révision Skillstore

Avis de version

L’auteur n’a déclaré aucune version.

Dépôt

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

Réf

0519034dad657fb1f7706e0550e962beeda73fdf

Récence de maintenance

22/07/2026

Utilisation

3 téléchargements · 124 vues

Structure de fichiers

📄 SKILL.md