🔎 Diagramas, navegador & pesquisa

beautiful-mermaid é uma skill que recebe código Mermaid (flowchart, sequence, class, ER…) e o renderiza como SVG ou PNG usando a biblioteca mermaid.js num HTML intermediário.

Diagramas gerados por texto são versionáveis e editáveis — nada de arrastar caixinhas em ferramentas visuais. Você descreve, o Claude desenha.

Mermaid DSL, renderização programática, SVG vetorial, PNG rasterizado.

A skill suporta todos os tipos do Mermaid: flowchart (LR/TD), sequência, classe, ER, Gantt, gitGraph, mindmap e quadrantChart.

Cada tipo resolve um problema diferente — escolher o certo comunica melhor e economiza revisões.

flowchart LR/TD, sequenceDiagram, classDiagram, erDiagram, gantt, mindmap.

O Mermaid oferece temas prontos (default, dark, forest, neutral, base) e o beautiful-mermaid seleciona o melhor para o contexto ou aceita instrução direta.

Um diagrama com tema correto é publicável direto na documentação ou slide — sem pós-produção.

%%{init: {"theme": "dark"}}%%, themeVariables, contraste, apresentação vs. desenvolvimento.

A skill segue 5 etapas: (1) gerar/validar código Mermaid, (2) renderizar SVG via CLI, (3) criar HTML wrapper, (4) capturar PNG em alta resolução com agent-browser, (5) limpar arquivos intermediários.

Entender o pipeline permite depurar quando algo falha e saber qual etapa customizar.

mmdc CLI, HTML wrapper, viewport, screenshot, cleanup.

SVG é vetorial (escala sem perda, editável) e ideal para web; PNG é rasterizado em alta resolução (2×–3×) e pronto para documentos e slides.

Escolher o formato errado gera diagramas borrados em PDF ou arquivos pesados demais para o repositório.

SVG vetorial, PNG raster, DPI, resolução 2×/3×, compatibilidade.

Os erros mais comuns: tema não aplicado (init block mal posicionado), diagrama cortado (viewport muito pequeno) e SVG vazio (sintaxe Mermaid inválida).

Reconhecer o sintoma economiza depuração — cada erro tem causa e solução previsíveis.

init block, viewport, sintaxe Mermaid, validação prévia.

A skill excalidraw converte descrições em texto (ex.: "fluxo de login com 3 etapas") em JSON Excalidraw válido, pronto para abrir no editor visual e continuar editando à mão.

Partir de um rascunho gerado é muito mais rápido do que construir do zero — você refina, não cria do nada.

Excalidraw JSON, linguagem natural → estrutura, arquivo .excalidraw, edição colaborativa.

A skill reconhece 9 tipos: flowchart, relationship diagram, mind map, architecture, DFD, swimlane (business flow), class diagram, sequence diagram e ER diagram.

Cada tipo tem layout e semântica próprios — descrever o contexto correto gera um diagrama muito mais útil.

Intenção do usuário → tipo de diagrama; swimlane, ER, sequence, mind map.

A skill posiciona elementos com espaçamento horizontal de 200–300px e vertical de 100–150px, centralizando elementos importantes e evitando sobreposições.

Coordenadas bem calculadas geram diagramas legíveis sem precisar reorganizar tudo no editor visual.

x/y coordinates, gap horizontal/vertical, radial layout (mind map), grid layout (relationship).

Todos os elementos usam fontFamily: 5 (Excalifont) e uma paleta consistente: azul claro para primários, verde claro para secundários, amarelo para central, vermelho claro para alertas.

Consistência visual faz o diagrama parecer intencional — não colagem aleatória de formas.

fontFamily: 5, strokeColor, backgroundColor, fontSize 16–24px, paleta de 4 cores.

A saída é um arquivo .excalidraw (JSON com type, version, elements e appState) salvo no diretório corrente e abrível diretamente no app Excalidraw ou VS Code.

Entender o formato permite inspecionar e corrigir manualmente se algum elemento saiu errado.

elements array, appState, unique IDs, type: "excalidraw".

A skill suporta ícones de bibliotecas externas (AWS, Azure, GCP, Kubernetes) instaladas no Excalidraw — quando disponíveis, enriquece os diagramas de arquitetura com ícones oficiais.

Diagramas de arquitetura com ícones oficiais comunicam tecnologia instantaneamente, sem ambiguidade.

Excalidraw libraries, .excalidrawlib, imageElement, fallback sem ícone.

agent-browser é uma skill que controla um navegador real (via Playwright) por comandos de texto — abrir URLs, interagir com elementos, tirar screenshots e extrair dados da página.

Automatizar o navegador é essencial para validar páginas construídas, testar formulários e confirmar comportamento visual antes de entregar.

Playwright, headless browser, automação, validação visual.

O ciclo básico é sempre: (1) agent-browser open URL, (2) agent-browser snapshot -i para obter refs dos elementos interativos, (3) interagir usando os refs retornados.

O snapshot retorna refs (@e1, @e2…) que são os identificadores estáveis para interação — sem eles, os comandos não sabem onde clicar.

open, snapshot -i, refs @eN, click, type, fill.

A skill captura screenshots (agent-browser screenshot arquivo.png) e pode gravar vídeo completo da sessão para documentar fluxos ou reportar bugs visualmente.

Screenshots são a evidência definitiva de que uma página está correta — mais confiável do que inspecionar HTML.

screenshot PNG, video record, viewport 1920×1080, fullPage.

A skill preenche campos (fill @ref "valor"), seleciona opções, clica em botões e verifica o resultado — perfeito para testar fluxos de cadastro, login e checkout.

Testar manualmente cada formulário depois de cada mudança é inviável — automatizar garante regressão rápida.

fill, select, check, submit, assert-text, assert-visible.

A skill extrai texto (get-text), atributos (get-attr), cookies, localStorage e até intercepta requisições de rede para inspecionar APIs em tempo real.

Extrair dados do DOM ou da rede é o atalho para validar que a página mostra o que o backend enviou.

get-text, get-attr, cookies, localStorage, network intercept.

A skill suporta múltiplas sessões de navegador em paralelo, modo headed (visível) para debugging, e salvamento de estado de autenticação para reusar sessões logadas.

Sessões paralelas permitem testar fluxos multi-usuário; modo headed deixa ver exatamente o que o navegador vê.

session, headed mode, storage state, parallel browsers, auth reuse.

website-intelligence é uma skill de 6 fases: extração da marca do cliente → análise de nicho → relatório competitivo → brief de construção → build do site → auditoria de qualidade.

Em vez de adivinhar o que o cliente precisa, você parte de dados reais do mercado — o site resultante é fundamentado em evidência, não em opinião.

Firecrawl MCP, scraping, análise competitiva, data-driven design.

Fase 1 usa Firecrawl para extrair identidade visual, tom de voz e estrutura do site do cliente. Fase 2 busca os 10 maiores concorrentes e faz scraping profundo dos 5 melhores.

Sem entender o mercado, o site fica genérico. Com dados reais, cada decisão de design tem justificativa.

mcp__firecrawl__scrape, mcp__firecrawl__search, identidade visual, top 10%, padrões do mercado.

A skill gera um relatório polido em HTML (com @media print) que inclui perfis dos 5 concorrentes, tabela comparativa, landscape de SEO e direção de design recomendada.

Um relatório visual entregue ao cliente justifica as decisões criativas e constrói confiança antes do build.

competitive-analysis.html, @media print, Instrument Serif, DM Sans, swatches, tabela comparativa.

Antes de construir, a skill para e apresenta um brief com direção de design, arquitetura do site, framework de conteúdo e playbook de conversão — exigindo aprovação explícita.

O hard stop evita construir na direção errada — retrabalhar um site completo é 10× mais caro do que revisar um brief.

Hard stop, aprovação, build brief, direção de design, arquitetura de site.

Com o brief aprovado, a skill constrói o site completo: animações scroll-triggered em todas as transições, parallax, micro-interações premium e ritmo visual dark/light — qualidade Apple/Stripe.

Ver o processo completo de "pesquisa → site" desmistifica como sites premium são construídos com dados reais.

Scroll-triggered, parallax, micro-interações, dark/light, placeholder 3D, cinematic feel.

A última fase audita SEO (H1, meta, schema), acessibilidade (alt text, contraste, ARIA), performance (cache, lazy load) e checa o client-ready checklist antes de declarar o build completo.

Um site bonito que não passa na auditoria não é entregável — a fase 6 garante que forma e função estejam alinhadas.

Auditoria SEO, acessibilidade WCAG, performance, checklist, deploy preview.