Mapa de la ruta
Contenido detallado
📊 beautiful-mermaid
Renderiza código Mermaid como SVG y PNG de alta resolución usando la lib Beautiful Mermaid — ideal para documentar flujos, arquitecturas y secuencias sin salir de Claude Code.
beautiful-mermaid es una skill que recibe código Mermaid (flowchart, sequence, class, ER…) y lo renderiza como SVG o PNG usando la biblioteca mermaid.js en un HTML intermedio.
Los diagramas generados a partir de texto se pueden versionar y editar: nada de arrastrar cajitas en herramientas visuales. Tú describes y Claude dibuja.
Mermaid DSL, renderizado programático, SVG vectorial, PNG rasterizado.
La skill admite todos los tipos de Mermaid: flowchart (LR/TD), secuencia, clase, ER, Gantt, gitGraph, mindmap y quadrantChart.
Cada tipo resuelve un problema diferente: elegir el adecuado comunica mejor y ahorra revisiones.
flowchart LR/TD, sequenceDiagram, classDiagram, erDiagram, gantt, mindmap.
Mermaid ofrece temas listos (default, dark, forest, neutral, base) y beautiful-mermaid selecciona el mejor para el contexto o acepta instrucciones directas.
Un diagrama con el tema correcto puede publicarse directamente en la documentación o en una diapositiva, sin posproducción.
%%{init: {"theme": "dark"}}%%, themeVariables, contraste, presentación vs. desarrollo.
La skill sigue 5 etapas: (1) generar/validar código Mermaid, (2) renderizar SVG mediante CLI, (3) crear un contenedor HTML, (4) capturar un PNG en alta resolución con agent-browser, (5) limpiar los archivos intermedios.
Entender el pipeline permite depurar cuando algo falla y saber qué etapa personalizar.
mmdc CLI, HTML wrapper, viewport, screenshot, cleanup.
SVG es vectorial (se escala sin pérdida, es editable) e ideal para la web; PNG se rasteriza en alta resolución (2×–3×) y está listo para documentos y presentaciones.
Elegir el formato incorrecto genera diagramas borrosos en PDF o archivos demasiado pesados para el repositorio.
SVG vectorial, PNG rasterizado, DPI, resolución 2×/3×, compatibilidad.
Los errores más comunes: tema sin aplicar (bloque init mal ubicado), diagrama recortado (viewport muy pequeño) y SVG vacío (sintaxis Mermaid no válida).
Reconocer el síntoma ahorra tiempo de depuración: cada error tiene una causa y una solución previsibles.
bloque init, viewport, sintaxis Mermaid, validación previa.
✏️ excalidraw
Genera diagramas de Excalidraw a partir de descripciones en texto — diagramas de flujo, arquitectura, mapas mentales, diagramas de relaciones — con salida en .excalidraw listo para abrir y editar.
La skill excalidraw convierte descripciones en texto (p. ej., "flujo de inicio de sesión con 3 pasos") en JSON válido de Excalidraw, listo para abrir en el editor visual y seguir editando manualmente.
Partir de un borrador generado es mucho más rápido que construir desde cero: lo perfeccionas, no lo creas de la nada.
Excalidraw JSON, lenguaje natural → estructura, archivo .excalidraw, edición colaborativa.
La skill reconoce 9 tipos: flowchart, relationship diagram, mind map, architecture, DFD, swimlane (business flow), class diagram, sequence diagram y ER diagram.
Cada tipo tiene su propio diseño y semántica: describir el contexto correcto genera un diagrama mucho más útil.
Intención del usuario → tipo de diagrama; swimlane, ER, sequence, mind map.
La skill posiciona los elementos con un espaciado horizontal de 200–300px y vertical de 100–150px, centra los elementos importantes y evita las superposiciones.
Las coordenadas bien calculadas generan diagramas legibles sin tener que reorganizar todo en el editor visual.
coordenadas x/y, gap horizontal/vertical, diseño radial (mapa mental), diseño en cuadrícula (relaciones).
Todos los elementos usan fontFamily: 5 (Excalifont) y una paleta coherente: azul claro para los elementos principales, verde claro para los secundarios, amarillo para el central y rojo claro para las alertas.
La consistencia visual hace que el diagrama parezca intencional, no un collage aleatorio de formas.
fontFamily: 5, strokeColor, backgroundColor, fontSize 16–24px, paleta de 4 colores.
El resultado es un archivo .excalidraw (JSON con type, version, elements y appState) guardado en el directorio actual y que puedes abrir directamente en la app Excalidraw o en VS Code.
Entender el formato permite inspeccionar y corregir manualmente cualquier elemento que haya quedado mal.
elements array, appState, unique IDs, type: "excalidraw".
La skill admite íconos de bibliotecas externas (AWS, Azure, GCP, Kubernetes) instaladas en Excalidraw —cuando están disponibles, enriquecen los diagramas de arquitectura con íconos oficiales.
Los diagramas de arquitectura con íconos oficiales comunican la tecnología al instante y sin ambigüedades.
Excalidraw libraries, .excalidrawlib, imageElement, alternativa sin ícono.
🕹️ agent-browser (Playwright)
Automatiza las interacciones con el navegador: navegar, completar formularios, tomar capturas de pantalla, probar aplicaciones web y extraer datos — el validador perfecto para confirmar que la página que construiste realmente funciona.
agent-browser es una skill que controla un navegador real (mediante Playwright) con comandos de texto: abrir URLs, interactuar con elementos, tomar screenshots y extraer datos de la página.
Automatizar el navegador es esencial para validar las páginas creadas, probar formularios y confirmar el comportamiento visual antes de entregar.
Playwright, navegador headless, automatización, validación visual.
El ciclo básico siempre es: (1) agent-browser open URL, (2) agent-browser snapshot -i para obtener referencias de los elementos interactivos, (3) interactuar usando las referencias devueltas.
El snapshot devuelve refs (@e1, @e2…) que son los identificadores estables para interactuar; sin ellos, los comandos no saben dónde hacer clic.
open, snapshot -i, refs @eN, click, type, fill.
La skill captura capturas de pantalla (agent-browser screenshot arquivo.png) y puede grabar un video completo de la sesión para documentar flujos o reportar errores visualmente.
Las capturas de pantalla son la evidencia definitiva de que una página está correcta, más confiables que inspeccionar el HTML.
screenshot PNG, video record, viewport 1920×1080, fullPage.
La skill completa campos (fill @ref "valor"), selecciona opciones, hace clic en botones y verifica el resultado: perfecto para probar flujos de registro, inicio de sesión y checkout.
Probar manualmente cada formulario después de cada cambio es inviable; automatizar garantiza una regresión rápida.
fill, select, check, submit, assert-text, assert-visible.
La skill extrae texto (get-text), atributos (get-attr), cookies, localStorage e incluso intercepta solicitudes de red para inspeccionar APIs en tiempo real.
Extraer datos del DOM o de la red es el atajo para validar que la página muestra lo que envió el backend.
get-text, get-attr, cookies, localStorage, network intercept.
La skill admite varias sesiones de navegador en paralelo, modo headed (visible) para debugging y guardado del estado de autenticación para reutilizar sesiones iniciadas.
Las sesiones paralelas permiten probar flujos multiusuario; el modo headed permite ver exactamente lo que ve el navegador.
session, headed mode, storage state, parallel browsers, auth reuse.
🔭 website-intelligence
Hace scraping del sitio del cliente, analiza a los 5 principales competidores y genera un informe de análisis competitivo en HTML; después construye un sitio premium con animaciones al hacer scroll basado en datos reales mediante Firecrawl MCP.
website-intelligence es una skill de 6 fases: extracción de la marca del cliente → análisis del nicho → informe competitivo → brief de construcción → build del sitio → auditoría de calidad.
En lugar de adivinar qué necesita el cliente, partes de datos reales del mercado: el sitio resultante se fundamenta en evidencia, no en opiniones.
Firecrawl MCP, scraping, análisis competitivo, diseño basado en datos.
La Fase 1 usa Firecrawl para extraer la identidad visual, el tono de voz y la estructura del sitio del cliente. La Fase 2 busca a los 10 principales competidores y hace scraping profundo de los 5 mejores.
Sin entender el mercado, el sitio queda genérico. Con datos reales, cada decisión de diseño tiene una justificación.
mcp__firecrawl__scrape, mcp__firecrawl__search, identidad visual, top 10%, patrones del mercado.
La skill genera un informe pulido en HTML (con @media print) que incluye perfiles de los 5 competidores, una tabla comparativa, un panorama de SEO y una dirección de diseño recomendada.
Un informe visual entregado al cliente justifica las decisiones creativas y genera confianza antes del build.
competitive-analysis.html, @media print, Instrument Serif, DM Sans, muestras de color, tabla comparativa.
Antes de construir, la skill se detiene y presenta un brief con la dirección de diseño, la arquitectura del sitio, el framework de contenido y el playbook de conversión — y exige aprobación explícita.
La parada obligatoria evita construir en la dirección equivocada: rehacer un sitio completo cuesta 10× más que revisar un brief.
Parada definitiva, aprobación, brief de construcción, dirección de diseño, arquitectura del sitio.
Con el brief aprobado, la skill construye el sitio completo: animaciones activadas por el scroll en todas las transiciones, parallax, microinteracciones premium y ritmo visual dark/light: calidad Apple/Stripe.
Ver el proceso completo de "investigación → sitio" muestra cómo se crean sitios premium con datos reales.
Activadas por el scroll, paralaje, microinteracciones, modo oscuro/claro, marcador de posición 3D, estilo cinematográfico.
La última fase audita SEO (H1, meta, schema), accesibilidad (alt text, contraste, ARIA), rendimiento (cache, lazy load) y verifica la client-ready checklist antes de declarar completo el build.
Un sitio atractivo que no pasa la auditoría no se puede entregar: la fase 6 garantiza que la forma y la función estén alineadas.
Auditoría SEO, accesibilidad WCAG, rendimiento, checklist, deploy preview.