Communitygithub.com

quaesitor-scientiam/vebidor

Utilisez cette compétence pour générer des interfaces et des ressources bien identifiées pour Vebidor — une bibliothèque WebDriver + WebDriver-BiDi en langage V avec une API de style Playwright — que ce soit pour la production ou pour des prototypes jetables, des pages de documentation, des maquettes marketing, des tableaux de comparaison et des visuels riches en blocs de code.

Qu'est-ce que vebidor ?

Cette compétence fournit une identité de marque complète et des kits d'interface utilisateur pour Vebidor, une bibliothèque de pilotage de navigateur en langage V. Elle inclut des directives de ton de marque (technique, orienté accomplissement, mettant l'accent sur la comparaison), un vocabulaire d'emoji spécifique (✅ ⚠️ 🐛 ✨ 🎉 🏆 ⚡ 🚀 📦 📖 🎯 🌐 🎭 📱) qui font partie intégrante des supports de documentation et marketing, et des tokens de design (couleurs, typographie, espacement) via un fichier CSS. Les kits d'interface utilisateur React pour le site de documentation (TopNav, Sidebar, DocsPage, CodeBlock, ComparisonTable, etc.) et la page d'accueil marketing (MarketingNav, Hero, FeatureGrid, BrowserMatrix) sont fournis sous forme de composants attachés à `window` pour une utilisation dans des fichiers HTML avec Babel. La compétence permet de créer rapidement des artefacts visuels statiques (maquettes, prototypes, captures d'écran de terminal) en se référant aux tokens CSS plutôt qu'en devinant les valeurs, tout en rappelant que les logos, polices et icônes proposés sont des substituts non officiels et doivent être validés avant utilisation en production.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/quaesitor-scientiam/vebidor/tree/HEAD/docs
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Lisez d'abord le fichier README.md de cette compétence — il contient :

  • Ce qu'est Vebidor (un client W3C WebDriver + WebDriver-BiDi en langage V) et ce qu'il n'est pas (pas d'application, pas de site Web, pas de logo dans le code source — chaque visuel est une identité proposée, signalée).
  • FONDAMENTAUX DE CONTENU — le ton (technique, axé sur la réussite, focalisé sur la comparaison), les règles de casse et le vocabulaire d'emoji porteur de sens (✅ ⚠️ 🐛 ✨ 🎉 🏆 ⚡ 🚀 📦 📖 🎯 🌐 🎭 📱). Les emoji font partie intégrante de cette marque ; conservez-les dans la documentation et les supports marketing.
  • FONDATIONS VISUELLES — palette, typographie, espacement, mouvement, surface, anatomie des cartes.
  • ICONOGRAPHIE — emoji pour les statuts ; Lucide pour l'interface utilisateur (substitution signalée) ; glyphes SVG monochromes pour les logos de navigateurs.
  • Index — où se trouve quoi.

Ensuite, explorez les autres fichiers :

  • colors_and_type.css — tous les tokens de design (--vb-blue-500, --slate-950, --code-keyword, --font-mono, --space-*, --radius-*, --shadow-*, --motion-*) ainsi que les styles de base de typographie et les classes .chip. Ajoutez le <link rel="stylesheet"> dans tout nouveau fichier — c'est la base.
  • preview/ — 19 cartes autonomes du système de design (couleurs, typographie, espacement, composants, marque) dont vous pouvez copier le balisage.
  • assets/ — logos de substitution (signalés) et glyphes de navigateurs.
  • ui_kits/docs/ — reconstitution haute fidélité du site de documentation en React (TopNav, Sidebar, TocPanel, DocsPage, CodeBlock, Callout, ComparisonTable, ApiSignature). Portée des composants : chaque fichier attache ses exportations à window afin que d'autres fichiers <script type="text/babel"> puissent les utiliser. Pour étendre, copiez les composants, ajoutez la balise <script type="text/babel" src="…"> dans index.html, et suivez le même modèle window.X = X.
  • ui_kits/marketing/ — reconstitution de la page d'accueil (MarketingNav, Hero, FeatureGrid, BrowserMatrix, PhasesTimeline, MarketingFooter). Même modèle de portée des composants.
  • fonts/README.md — polices chargées via le CDN Google Fonts (Geist + JetBrains Mono). La substitution est signalée ; remplacez si l'utilisateur a des polices de marque différentes.

Lorsque vous êtes invoqué

Si l'utilisateur invoque cette compétence sans autre indication, demandez ce qu'il souhaite construire (page de documentation ? section de page d'accueil ? maquette de sortie CLI ? graphique de notes de version ? tableau de comparaison ? capture d'écran de terminal ?). Demandez quelle surface (docs, marketing, terminal) et quelle partie de l'API il souhaite mettre en avant. Agissez ensuite en tant que designer expert qui produit des artefacts HTML — ou du code de production s'il travaille sur le dépôt réel.

Lors de la création d'artefacts visuels (diapositives, maquettes, prototypes jetables)

  1. Copiez les ressources nécessaires depuis assets/ ainsi que les cartes d'aperçu dont vous souhaitez reprendre le balisage.
  2. Créez un fichier HTML statique dans le projet en cours. Liez colors_and_type.css (chemin relatif).
  3. Utilisez les fondations : --vb-blue-500 pour les accents, --code-bg/--code-fg et les classes de tokens pour le code, .chip chip--success etc. pour les statuts, --font-sans + --font-mono.
  4. Conservez les emoji là où la marque les utilise. ✅ ⚠️ ✨ 🏆 sont porteurs de sens, pas de la décoration.
  5. N'inventez pas de dégradés ou de cartes avec bordure arrondie à gauche. Utilisez des surfaces planes, des bordures et un seul niveau d'élévation.

Lors du travail sur du code de production

Lisez cette compétence comme référence de marque. Prélevez les valeurs (codes hexadécimaux, empilements de polices, rayons, durées d'animation) de colors_and_type.css plutôt que de les approximer à partir de captures d'écran. Les motifs de composants dans ui_kits/ sont des reconstitutions cosmétiques, pas du code de production — portez le style, pas le câblage JSX.

Mises en garde à signaler

Si l'utilisateur vous demande de livrer un vrai logo, de vraies polices, une vraie iconographie — faites une pause et confirmez. Tout ici est déduit du texte descriptif du dépôt source (qui n'a pas d'identité visuelle). Opposez-vous à la canonisation.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community