Leia primeiro o arquivo README.md dentro desta skill — ele contém:
- O que é Vebidor (um cliente W3C WebDriver + WebDriver-BiDi em V) e o que não é (nenhum aplicativo, nenhum site, nenhum logo no código-fonte — cada visual é uma identidade proposta, sinalizada).
- FUNDAMENTOS DE CONTEÚDO — a voz (técnica, orientada a conquistas, focada em comparação), as regras de caixa, e o vocabulário de emoji de suporte (✅ ⚠️ 🐛 ✨ 🎉 🏆 ⚡ 🚀 📦 📖 🎯 🌐 🎭 📱). Emoji fazem parte desta marca; mantenha-os em documentação e superfícies de marketing.
- FUNDAÇÕES VISUAIS — paleta, tipo, espaçamento, movimento, superfície, anatomia de cartão.
- ICONOGRAFIA — emoji para status; Lucide para cromo de IU (substituição sinalizada); glifos SVG monocromáticos para logotipos de navegadores.
- Índice — onde cada coisa mora.
Em seguida, explore os outros arquivos:
colors_and_type.css— todos os tokens de design (--vb-blue-500,--slate-950,--code-keyword,--font-mono,--space-*,--radius-*,--shadow-*,--motion-*) mais estilos de tipo base e classes.chip. Adicione este<link rel="stylesheet">em qualquer coisa nova — é a base.preview/— 19 cartões independentes do sistema de design (cores, tipo, espaçamento, componentes, marca) dos quais você pode copiar marcação.assets/— logotipos placeholder (sinalizados) e glifos de navegadores.ui_kits/docs/— recriação de alta fidelidade do site de documentação React (TopNav, Sidebar, TocPanel, DocsPage, CodeBlock, Callout, ComparisonTable, ApiSignature). Escopo do componente: cada arquivo anexa suas exportações awindowpara que outros arquivos<script type="text/babel">possam usá-los. Para estender, copie componentes, adicione a tag<script type="text/babel" src="…">emindex.html, e siga o mesmo padrãowindow.X = X.ui_kits/marketing/— recriação da landing page (MarketingNav, Hero, FeatureGrid, BrowserMatrix, PhasesTimeline, MarketingFooter). Mesmo padrão de escopo de componente.fonts/README.md— fontes carregadas via CDN Google Fonts (Geist + JetBrains Mono). A substituição é sinalizada; troque se o usuário tiver fontes de marca diferentes.
Quando você é invocado
Se o usuário invocar esta skill sem outras orientações, pergunte o que eles querem construir (página de docs? seção de landing? mock de saída CLI? gráfico de release notes? tabela comparativa? screenshot de terminal?). Pergunte qual superfície (docs, marketing, terminal) e qual fatia da API eles querem destacar. Em seguida, aja como um designer especialista que gera artefatos HTML — ou código de produção se eles estiverem trabalhando no repositório real.
Ao criar artefatos visuais (slides, mocks, protótipos descartáveis)
- Copie os assets que você precisa de
assets/e quaisquer cartões de pré-visualização dos quais deseja pegar marcação. - Crie um arquivo HTML estático no projeto atual. Vincule
colors_and_type.css(caminho relativo). - Use as fundações:
--vb-blue-500para acentos,--code-bg/--code-fge classes de token para código,.chip chip--successetc para status,--font-sans+--font-mono. - Mantenha emoji onde a marca os usa. ✅ ⚠️ ✨ 🏆 são de suporte, não decoração.
- Não invente gradientes ou cartões com borda esquerda arredondada. Use superfícies planas, bordas e um nível de elevação.
Ao trabalhar em código de produção
Leia esta skill como referência de marca. Pegue valores (códigos hex, pilhas de fontes, raios, temporizações de movimento) de colors_and_type.css em vez de aproximar de capturas de tela. Padrões de componentes em ui_kits/ são recriações cosméticas, não código de produção — port o estilo, não a fiação JSX.
Caveats a sinalizar
Se o usuário pedir para você enviar um logotipo real, fontes reais, iconografia real — pause e confirme. Tudo aqui é inferido da prosa do repositório fonte (que não tem identidade visual). Rejeite a canonização.