| name | portal-user-manual |
| description | Crear, revisar o adaptar manuales de usuario, guías operativas, presentaciones o decks para portales internos de GGSoluciones. Usar cuando el usuario quiera documentar cómo usar un portal, sus módulos, pantallas, roles, flujos, botones, tablas, filtros, acciones, errores frecuentes y funciones disponibles para usuarios finales.
|
Portal User Manual
Usá este skill cuando el usuario quiera crear o revisar un manual de usuario de un portal interno para que las personas sepan cómo usarlo y qué hace cada función.
Diseño Visual - Template Estándar
Archivo de referencia: usar la guía HTML vigente del proyecto cuando exista. No asumir rutas locales absolutas.
Este es el diseño base para TODOS los portales y manuales internos de GGSoluciones.
Logo (OBLIGATORIO)
{URL_LOGO_EMPRESA}
Fuente (OBLIGATORIA)
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;800&display=swap" rel="stylesheet"/>
USAR SOLO ROBOTO - No usar Roboto Condensed, Roboto Mono u otras fuentes.
Colores CSS (OBLIGATORIOS)
:root {
--red: #E30613;
--red-light: #fef2f2;
--blue: #4BBFDF;
--blue-dark: #1a7a9a;
--blue-light: #f0fbff;
--dark: #1a1a2e;
--bg: #f8f9fb;
--panel: #ffffff;
--text: #1f2937;
--muted: #6b7280;
--line: #e5e7eb;
--shadow: 0 4px 20px rgba(0,0,0,.07);
--radius: 16px;
--green: #16a34a;
--green-light: #f0fdf4;
--orange: #d97706;
--orange-light: #fffbeb;
}
Estructura de la página
┌─────────────────────────────────────────────────────────┐
│ HEADER (sticky, fondo dark #1a1a2e, border-bottom red) │
│ [Logo] [Brand Title] [Botones de acción] │
└─────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│ HERO (gradiente dark, texto claro) │
│ [Badge] [H1] [Párrafo introductorio] │
└─────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│ CONTENT │
│ .section (padding, border-bottom) │
│ .section-label (uppercase, red) │
│ .section-title (h2, bold) │
│ .section-sub (muted) │
│ [grid-2 / grid-3 / grid-4] │
│ [cards / usecases / tips] │
└─────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│ FOOTER (dark, centrado) │
└─────────────────────────────────────────────────────────┘
Elementos de UI
| Elemento | Clase CSS | Descripción |
|---|
| Cards | .card | Fondo white, border, radius 16px, shadow |
| Cards con borde colored | .card.green, .card.red, .card.blue, .card.orange | border-left 4px colored |
| Grid 2 columnas | .grid-2 | display: grid; grid-template-columns: 1fr 1fr |
| Grid 3 columnas | .grid-3 | display: grid; grid-template-columns: repeat(3, 1fr) |
| Use case | .usecase | Card con icono + body (título + descripción + tag) |
| Tips | .tip-row | Número + cuerpo con ejemplo |
| Semáforo | .semaforo-grid | 3 columnas: verde/amarillo/rojo |
| Callout | .callout-final | Gradient dark, icono + texto |
| Badges | .pill | Pills de estado |
Responsive
@media(max-width: 95%) {
.grid-2, .grid-3, .grid-4, .semaforo-grid, .profile-grid { grid-template-columns: 1fr; }
}
Referencia editorial obligatoria
Antes de estructurar el manual, leé:
references/intranet-ia-guide-page-skill.md
Esa referencia define tono interno, claridad, estructura didáctica, seguridad, navegación y checklist visual. No limita el manual a IA: se usa como estándar editorial y UX para contenido interno GGSoluciones.
Objetivo del manual
El manual debe permitir que un usuario final entienda:
- para qué sirve el portal;
- qué roles existen y qué ve cada uno;
- cómo ingresar y navegar;
- qué hace cada módulo/pantalla;
- cómo usar botones, filtros, tablas, formularios y acciones;
- qué mensajes o errores puede ver y qué hacer;
- qué datos no debe cargar o compartir;
- a quién pedir ayuda.
Objetivo del manual
El manual debe permitir que un usuario final entienda:
- para qué sirve el portal;
- qué roles existen y qué ve cada uno;
- cómo ingresar y navegar;
- qué hace cada módulo/pantalla;
- cómo usar botones, filtros, tablas, formularios y acciones;
- qué mensajes o errores puede ver y qué hacer;
- qué datos no debe cargar o compartir;
- a quién pedir ayuda.
Reglas
- Manual accionable, no decorativo: explicar pasos concretos con resultado esperado.
- Una función = una explicación: objetivo, pasos, campos/botones y errores comunes.
- Role-aware: separar instrucciones por rol cuando el portal cambie navegación o permisos.
- Evidencia real: no inventar pantallas; validar contra archivos, HTML servido, screenshots o descripción confirmada.
- Lenguaje de usuario: evitar nombres internos técnicos salvo que sean visibles para el usuario.
- Capturas si aplican: pedir o usar screenshots cuando la explicación visual mejore el manual.
- Formato reusable: dejar estructura fácil de versionar como Markdown, HTML o PPTX según pida el usuario.
Estructura recomendada
- Portada: nombre del portal, versión/fecha y audiencia.
- Introducción: para qué sirve y qué problemas resuelve.
- Acceso: login, recuperación/ayuda, roles disponibles.
- Navegación general: menú, header, búsqueda, cambio de tema si existe.
- Módulos del portal: una sección por módulo.
- Funciones por pantalla: botones, filtros, tablas, formularios, exportaciones, estados.
- Flujos frecuentes: paso a paso de tareas reales.
- Errores comunes: mensaje visible, causa probable, qué hacer.
- Buenas prácticas: datos, seguridad, validación y soporte.
- Glosario breve si hay términos propios del negocio.
Flujo obligatorio
- Identificar portal, audiencia, roles y formato esperado del manual.
- Verificar evidencia disponible: repo, screenshots, HTML servido, rutas o descripción funcional.
- Leer
references/intranet-ia-guide-page-skill.md para tono y estructura.
- Armar índice del manual antes de escribir contenido largo.
- Redactar por módulos y funciones, con pasos claros.
- Validar que no falten funciones visibles ni roles principales.
- Si el output es
.pptx, usar la skill/herramienta de Presentations.
Checklist de diseño visual
Checklist de contenido
