# Chat Ui > Bloques de construcción de UI de chat para React/Next.js de ui.inference.sh: contenedor, mensajes, input, indicadores de escritura y avatares. Fuente: https://skillsagentes.com/skills/skills-101/superpowers/chat-ui Markdown: https://skillsagentes.com/skills/skills-101/superpowers/chat-ui.md Repositorio: https://github.com/skills-101/superpowers Autor: skills-101 Licencia: no declarada Actualizado: hace 4 meses Coste de contexto: 108 tok instalada, 839 tok al activarse, 839 tok con todos los archivos del bundle Bundle: 1 archivo, 3 KB Permisos que pide: ninguno declarado ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add skills-101/superpowers --skill chat-ui --agent claude-code # Cursor npx -y skills add skills-101/superpowers --skill chat-ui --agent cursor # Codex npx -y skills add skills-101/superpowers --skill chat-ui --agent codex # Gemini CLI npx -y skills add skills-101/superpowers --skill chat-ui --agent gemini # Windsurf npx -y skills add skills-101/superpowers --skill chat-ui --agent windsurf # Cline npx -y skills add skills-101/superpowers --skill chat-ui --agent cline ``` ## Qué hace - Instala componentes de chat para React/Next.js vía shadcn (ChatContainer, ChatMessage, ChatInput, TypingIndicator) - Proporciona bloques listos para construir interfaces de chat con roles user/assistant/system - Ofrece un ejemplo completo de chat con manejo de estado de mensajes y carga ## Cuándo usarla - Al construir UIs de chat personalizadas - Al crear interfaces de mensajería o asistentes de IA - Al necesitar listas de mensajes, input de chat o indicadores de escritura ## Qué la activa - "Crea una interfaz de chat con shadcn para mi app de Next.js" - "Necesito un componente de input de chat con indicador de escritura" - "Agrega una lista de mensajes estilo chat con roles user y assistant" ## Antes de instalar - Requiere shadcn CLI y un proyecto React/Next.js con Tailwind CSS configurado. - Necesita en el PATH: npx - makes network requests ## Archivos - SKILL.md — 3 KB ## SKILL.md No se reproduce aquí. Léelo en https://github.com/skills-101/superpowers/blob/main/ui/chat-ui/SKILL.md ## Dónde encaja - Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual. - Creador: [skills-101](https://skillsagentes.com/creators/skills-101.md) — 86 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Otras skills del mismo repositorio - [Agent Tools](https://skillsagentes.com/skills/skills-101/superpowers/agent-tools.md): Ejecuta apps de IA vía el CLI de inference.sh: generación de imágenes y video, LLMs, búsqueda web, 3D y automatización de Twitter, con modelos como FLUX, Veo, Gemini, Claude y OpenRouter. - [Ai Avatar Video](https://skillsagentes.com/skills/skills-101/superpowers/ai-avatar-video.md): Crea videos de avatares IA y talking heads con el CLI de inference.sh: P-Video-Avatar (TTS integrado), OmniHuman, Fabric, PixVerse, para presentadores, dobleaje, UGC y avatares de juegos. - [Ai Image Generation](https://skillsagentes.com/skills/skills-101/superpowers/ai-image-generation.md): Genera imágenes con IA usando GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve y más de 50 modelos vía el CLI de inference.sh. - [Ai Music Generation](https://skillsagentes.com/skills/skills-101/superpowers/ai-music-generation.md): Genera música y canciones con IA usando ElevenLabs, Diffrythm y Tencent Song Generation vía el CLI de inference.sh, para fondos musicales, redes sociales, podcasts y bandas sonoras. - [Ai Video Generation](https://skillsagentes.com/skills/skills-101/superpowers/ai-video-generation.md): Genera videos con IA usando Google Veo, Seedance 2.0, HappyHorse, Wan, Grok y más de 40 modelos a través del CLI de inference.sh. ## Skills relacionadas - [Ai Image Generation](https://skillsagentes.com/skills/skills-101/superpowers/ai-image-generation.md): Genera imágenes con IA usando GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve y más de 50 modelos vía el CLI de inference.sh. - [Ai Product Photography](https://skillsagentes.com/skills/skills-101/superpowers/ai-product-photography.md): Genera fotografía de producto y comercial con IA usando FLUX, Imagen 3, Grok y Seedream: tomas de estudio, escenas lifestyle, packaging y fotos para e-commerce. - [App Store Screenshots](https://skillsagentes.com/skills/skills-101/superpowers/app-store-screenshots.md): Creación de screenshots para App Store y Google Play con specs exactas de plataforma: dimensiones iOS/Android, orden de galería, mockups de dispositivo y vídeos de preview. - [Background Removal](https://skillsagentes.com/skills/skills-101/superpowers/background-removal.md): Elimina fondos de imágenes con BiRefNet vía el CLI de inference.sh; útil para fotos de producto, retratos, e-commerce, PNGs transparentes y edición fotográfica. - [Book Cover Design](https://skillsagentes.com/skills/skills-101/superpowers/book-cover-design.md): Diseño de portadas de libros con convenciones por género, reglas de tipografía y generación de imágenes con IA, para autopublicación, ebooks, impresos y audiolibros. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)