quaesitor-scientiam/vebidor

Primero lee el archivo README.md de esta skill — contiene:

• Qué es Vebidor (un cliente W3C WebDriver + WebDriver-BiDi en V) y qué no es (no es una app, ni un sitio web, ni tiene un logotipo en el código fuente — cada imagen es una identidad propuesta, marcada como tal).
• FUNDAMENTOS DE CONTENIDO — la voz (técnica, orientada a logros, comparativa), las reglas de capitalización y el vocabulario de emojis de carga (✅ ⚠️ 🐛 ✨ 🎉 🏆 ⚡ 🚀 📦 📖 🎯 🌐 🎭 📱). Los emojis son parte de esta marca; mantenlos en documentación y superficies de marketing.
• FUNDAMENTOS VISUALES — paleta, tipografía, espaciado, movimiento, superficies, anatomía de tarjetas.
• ICONOGRAFÍA — emojis para estado; Lucide para la interfaz de usuario (sustitución marcada); glifos SVG monocromáticos para logotipos de navegadores.
• Índice — qué va dónde.

Luego explora los otros archivos:

• colors_and_type.css — todos los tokens de diseño (--vb-blue-500, --slate-950, --code-keyword, --font-mono, --space-*, --radius-*, --shadow-*, --motion-*) más estilos tipográficos base y clases .chip. Inserta <link rel="stylesheet"> en cualquier cosa nueva: es la base.
• preview/ — 19 tarjetas independientes del sistema de diseño (colores, tipografía, espaciado, componentes, marca) de las que puedes copiar marcado.
• assets/ — logotipos provisionales (marcados) y glifos de navegadores.
• ui_kits/docs/ — recreación de alta fidelidad de un sitio de documentación en React (TopNav, Sidebar, TocPanel, DocsPage, CodeBlock, Callout, ComparisonTable, ApiSignature). Ámbito de componentes: cada archivo asigna sus exportaciones a window para que otros archivos <script type="text/babel"> puedan usarlos. Para extender, copia los componentes, agrega la etiqueta <script type="text/babel" src="…"> en index.html y sigue el mismo patrón window.X = X.
• ui_kits/marketing/ — recreación de la página de aterrizaje (MarketingNav, Hero, FeatureGrid, BrowserMatrix, PhasesTimeline, MarketingFooter). Mismo patrón de ámbito de componentes.
• fonts/README.md — fuentes cargadas a través de Google Fonts CDN (Geist + JetBrains Mono). La sustitución está marcada; cambia si el usuario tiene otras fuentes de marca.

Cuando te invocan

Si el usuario invoca esta skill sin otras indicaciones, pregúntale qué quiere construir (¿página de docs?, ¿sección de aterrizaje?, ¿maqueta de salida de CLI?, ¿gráfico de notas de lanzamiento?, ¿tabla comparativa?, ¿captura de terminal?). Pregunta qué superficie (docs, marketing, terminal) y qué parte de la API quiere destacar. Luego actúa como un diseñador experto que produce artefactos HTML o código de producción si están trabajando en el repositorio real.

Al crear artefactos visuales (diapositivas, maquetas, prototipos desechables)

1. Copia los activos que necesites de assets/ y cualquier tarjeta de vista previa de la que quieras tomar marcado.
2. Crea un archivo HTML estático en el proyecto actual. Enlaza colors_and_type.css (ruta relativa).
3. Usa los fundamentos: --vb-blue-500 para acentos, --code-bg/--code-fg y clases de token para código, .chip chip--success etc. para estado, --font-sans + --font-mono.
4. Mantén los emojis donde la marca los usa. ✅ ⚠️ ✨ 🏆 son de carga, no decorativos.
5. No inventes degradados ni tarjetas con bordes redondeados a la izquierda. Usa superficies planas, bordes y un solo nivel de elevación.

Al trabajar en código de producción

Lee esta skill como referencia de marca. Toma valores (códigos hex, pilas de fuentes, radios, tiempos de movimiento) de colors_and_type.css en lugar de aproximarlos a partir de capturas de pantalla. Los patrones de componentes en ui_kits/ son recreaciones cosméticas, no código de producción: transpórtate el estilo, no el cableado JSX.

Advertencias a señalar

Si el usuario te pide enviar un logotipo real, fuentes reales o iconografía real, haz una pausa y confírmalo. Todo aquí se infiere de la prosa del repositorio fuente (que no tiene identidad visual). Rechaza la canonización.