# Chatbot Web

> Trigger: chatbot, chat, asistente, conversación, mensajes. Crear interfaces conversacionales para portales internos de GGSoluciones.

- Skill: `agallardo2802/chatbot-web` (Agent Skill)
- Install (CLI): `npx skillmds@latest add agallardo2802/chatbot-web`
- Raw SKILL.md: https://api.skillmd.com/api/skills/agallardo2802/chatbot-web/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: Apache-2.0
- Author: agallardo2802 (https://skillmd.com/u/agallardo2802)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/agallardo2802/chatbot-web

---


# Chatbot Web - Estándar GGSoluciones

## Activation Contract

Usá esta skill cuando el usuario pida un chatbot, asistente conversacional, panel de mensajes, soporte interno o experiencia de chat embebida en un portal.

No la uses para formularios tradicionales, tickets o reportes si no hay interacción conversacional.

## Hard Rules

- Diseñá el chat como herramienta operativa, no como demo visual.
- Mostrá estados claros: vacío, escribiendo, respuesta parcial, error, reconexión y sin permisos.
- Nunca muestres tokens, prompts internos, stack traces ni nombres técnicos de servicios.
- Separá mensajes de usuario, asistente y sistema con jerarquía visual consistente.
- Todo mensaje automático debe explicar qué pasó y qué puede hacer el usuario.
- Si hay streaming, permití cancelar o reintentar sin duplicar mensajes.
- Incluí accesibilidad: foco visible, `aria-live` para respuestas y navegación por teclado.

## Decision Gates

| Caso | Decisión |
|---|---|
| Chat simple de soporte | Layout de una columna con historial y composer fijo |
| Chat dentro de portal operativo | Panel lateral o drawer, sin bloquear la tarea principal |
| Respuestas con datos sensibles | Mostrar fuente, fecha y alcance del dato |
| Error del modelo/API | Mensaje humano + acción de reintento, nunca error técnico crudo |

## Execution Steps

1. Definí el objetivo del asistente y qué NO puede hacer.
2. Diseñá historial, composer, acciones rápidas y estados vacíos.
3. Agregá indicadores de carga/streaming y manejo de errores.
4. Validá contraste claro/oscuro con tokens GGSoluciones.
5. Documentá permisos, límites y datos usados por el asistente.

## Output Contract

Entregar estructura UI, estados requeridos, copy de errores, criterios de accesibilidad y notas de integración.