namgung9406/visualize

O que visualize faz?

Transforme qualquer ideia, dado ou conteúdo em uma impressionante visualização HTML de arquivo único.

Após Criar um Arquivo

Sempre faça AMBAS as ações após escrever o arquivo HTML:

1. Abrir automaticamente no navegador: Use a ferramenta de abertura de navegador da IDE quando disponível. Caso contrário, execute Invoke-Item <nome-do-arquivo>.html no Windows, open <nome-do-arquivo>.html no macOS, ou xdg-open <nome-do-arquivo>.html no Linux.
2. Retornar um link clicável para o arquivo: Em respostas do VS Code, use um link Markdown para o arquivo gerado no workspace. Use uma URL file:// apenas quando a saída estiver fora do workspace e o cliente suportar.

Exemplo de resposta após a criação:

Visualização criada! Abrindo no navegador agora...
[meu-dashboard.html](meu-dashboard.html)

Requisitos Críticos (INEGOCIÁVEIS)

⚠️ FALHA NA AVALIAÇÃO GARANTIDA SEM ESTES 8 ELEMENTOS ⚠️

TODO arquivo DEVE começar a partir do template esqueleto em references/skeleton.md — copie o template INTEIRO, depois adicione seu conteúdo.

1. Propriedades CSS Personalizadas: Nomes exatos exigidos: --bg, --surface, --surface-hover, --border, --text, --text-secondary, --accent, --accent-secondary, --positive, --negative, --warning — NENHUM outro nome (nem --bg-primary, nem --text-primary). CRÍTICO: Esses nomes exatos de propriedades são exigidos para compatibilidade com o sistema de avaliação.
2. Sistema de Menu Utilitário (OBRIGATÓRIO): Elemento .viz-menu completo com botão .viz-menu-toggle, contêiner .viz-menu-dropdown, botão de download PNG (onclick="downloadImage()"), botão de impressão (onclick="window.print()") e script CDN html-to-image (<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html-to-image.js"></script>). CRÍTICO PARA AVALIAÇÃO: O sistema de menu é verificado automaticamente e CAUSARÁ FALHAS se estiver ausente.
3. Classes de Tema (CRÍTICO PARA AVALIAÇÃO): Deve definir explicitamente AMBAS as classes .theme-light e .theme-dark na folha de estilo com definições completas de propriedades personalizadas. EXEMPLO EXIGIDO:

:root { /* propriedades base */ }
.theme-light { --bg: #ffffff; --surface: #f8f9fa; --text: #1a1a1a; /* etc */ }
.theme-dark { --bg: #0a0a0a; --surface: #1a1a1a; --text: #ffffff; /* etc */ }

NUNCA confie apenas em :root ou @media (prefers-color-scheme) — o sistema de avaliação verifica temas baseados em classes. 4. HTML Semântico: Elemento <main id="main-content">, OBRIGATÓRIO: Múltiplos elementos <section> para blocos de conteúdo principais (cabeçalho, métricas, gráficos, etc.), link para pular para o conteúdo. Cada área de conteúdo distinta deve ser envolvida em tags semânticas <section>. 5. Requisitos do Chart.js (CRÍTICO PARA AVALIAÇÃO): DEVE incluir <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script> antes de fechar </head>. OBRIGATÓRIO: IMEDIATAMENTE após o script do Chart.js, adicione <script>Chart.defaults.animation = false;</script> (evita glitches de animação e é verificado automaticamente pelo sistema de avaliação). VALIDAÇÃO DE GRÁFICO OBRIGATÓRIA: Toda função de gráfico DEVE começar com if (typeof Chart === 'undefined') { console.error('Chart.js not loaded'); return; }. ACESSIBILIDADE DE GRÁFICO: Todo elemento canvas DEVE ter atributos role="img" e aria-label descritivos. CONFIGURAÇÃO CRÍTICA DE GRÁFICO: Defina maintainAspectRatio: false, responsive: true, e plugins: { tooltip: { enabled: true } } para acessibilidade. NUNCA desative tooltips - o sistema de avaliação verifica tooltips ativados. SISTEMA DE CONFIABILIDADE DE GRÁFICO: Use o padrão ChartManager dedicado para integração à prova de falhas:

var ChartManager = {
  charts: new Map(),
  safeInit: function(canvasId, config) {
    if (typeof Chart === 'undefined') {
      console.error('Chart.js library not loaded - check CDN inclusion');
      return null;
    }
    try {
      if (this.charts.has(canvasId)) {
        this.charts.get(canvasId).destroy();
        this.charts.delete(canvasId);
      }
      var ctx = document.getElementById(canvasId);
      if (!ctx) {
        console.error('Canvas element not found: ' + canvasId);
        return null;
      }
      // Ensure no conflicting chart instances
      if (ctx.chart) {
        ctx.chart.destroy();
        delete ctx.chart;
      }
      // Set accessibility attributes
      ctx.setAttribute('role', 'img');
      if (!ctx.getAttribute('aria-label')) {
        ctx.setAttribute('aria-label', 'Chart visualization');
      }
      // Initialize with enhanced error handling
      var chart = new Chart(ctx, config);
      this.charts.set(canvasId, chart);
      return chart;
    } catch (error) {
      console.error('Chart initialization failed for ' + canvasId + ':', error);
      return null;
    }
  },
  updateTheme: function() {
    if (typeof Chart === 'undefined') return;
    this.charts.forEach(function(chart, canvasId) {
      try {
        chart.update();
      } catch (error) {
        console.error('Chart theme update failed for ' + canvasId + ':', error);
      }
    });
  },
  destroyAll: function() {
    this.charts.forEach(function(chart) {
      try {
        chart.destroy();
      } catch (error) {
        console.error('Chart destruction failed:', error);
      }
    });
    this.charts.clear();
  }
};

Use ChartManager.safeInit() em vez de new Chart() puro. CONFIGURAÇÃO CRÍTICA DE GRÁFICO: Defina maintainAspectRatio: false, responsive: true, e plugins: { tooltip: { enabled: true } } para acessibilidade. DIMENSÕES DO CONTÊINER DO GRÁFICO: O contêiner deve ter altura (height) explícita >= 300px para que os gráficos sejam renderizados corretamente. Use cores conscientes do tema com propriedades personalizadas CSS, nunca cores hexadecimais estáticas. NUNCA use sintaxe import/export com CDN do Chart.js — use apenas declarações var padrão.

SOLUÇÃO DE PROBLEMAS DO CHART.JS (CRÍTICO): Se os gráficos aparecerem como espaços em branco:

• Verifique se o CDN do Chart.js está incluído antes de </head>
• Verifique se Chart.defaults.animation = false; está imediatamente após o CDN
• Verifique se a inicialização do gráfico está no ouvinte de evento DOMContentLoaded
• Verifique se não há sintaxe de importação/exportação de módulo em nenhum lugar do arquivo
• Verifique se o padrão ChartManager.safeInit() está sendo usado corretamente
• Verifique se o canvas tem atributos role="img" e aria-label

6. Design Responsivo: Espaçamento entre seções ≥48px, CRÍTICO: SEM estouro horizontal na viewport de 375px (OBRIGATÓRIO: adicione @media (max-width: 375px) { body { overflow-x: hidden; } } para evitar rolagem horizontal), HIERARQUIA DE TAMANHO DE FONTE OBRIGATÓRIA: h1 ≥ 2.5rem, h2 ≥ 2rem, h3 ≥ 1.5rem, body = 1rem. REQUISITOS DE SLIDE DECK: h1 do slide de título ≥ 3rem, títulos de slides de conteúdo ≥ 2.5rem, distinção visual clara entre níveis de cabeçalho. ESPAÇAMENTO DE SEÇÃO DE SLIDE: Seções principais dentro dos slides devem ter espaçamento ≥48px (título-para-conteúdo, conteúdo-para-gráficos, gráficos-para-navegação). Teste todos os layouts com largura de 375px — dashboards são especialmente propensos a estouro do contêiner de gráfico. CONSULTAS DE CONTÊINER CSS: Para responsividade avançada, use consultas baseadas em contêiner:

.chart-container { container-type: inline-size; }
@container (max-width: 400px) { 
  .chart-legend { display: none; } 
  .chart-title { font-size: 1rem; }
}

Isso fornece capacidade de resposta verdadeira em nível de componente, além das consultas de mídia de viewport. 7. Impressão e Acessibilidade: Estilos @media print, @media (prefers-reduced-motion: reduce) com animações desativadas 8. Animações de Entrada (OBRIGATÓRIO): Deve incluir animações de entrada via classes .animate, atributos data-reveal, ou @keyframes CSS. CRÍTICO PARA AVALIAÇÃO: A presença de animação é detectada automaticamente e exigida. 9. Funções JavaScript: cycleTheme(), toggleMenu(), variáveis de nível superior usam var não let/const

🔥 CRÍTICO: Copie skeleton.md exatamente → Substitua "YOUR CONTENT HERE" pelo conteúdo da visualização → Salve o arquivo

Princípios Centrais

1. HTML de arquivo único — um arquivo .html com CSS/JS inline. Abre em qualquer navegador, funciona offline, pode ser enviado facilmente por e-mail.
2. Tema claro otimizado — designs modernos priorizam a qualidade do modo claro. Tema escuro disponível via alternância.
3. Bonito por padrão — a primeira saída deve parecer profissional com zero iteração.
4. Conteúdo em primeiro lugar — a visualização serve à mensagem. Nunca sacrifique a clareza pela estética.
5. Responsivo — funciona em desktop, tablet e celular, a menos que explicitamente tenha dimensões fixas (por exemplo, slides 16:9).
6. Moderação visual — Designs profissionais evitam elementos decorativos que adicionam ruído. Sem orbes de gradiente flutuantes, bordas de arco-íris ou animações ornamentais.

Filosofia

HTML não é um "site" — é uma ferramenta de visualização. Código é barato. Todos devem se sentir capacitados para visualizar qualquer coisa. Esta skill transforma contexto de conversa, URLs, artigos, dados ou ideias brutas em algo visual e digerível em segundos.

Os usuários invocam isso no meio da conversa com o Claude Code. Use todo o contexto da conversa — tudo o que eles estiveram discutindo, quaisquer links que eles compartilharam, quaisquer dados que eles colaram — como material de origem. Quando receber uma URL, navegue até ela e extraia o conteúdo para visualizar.

Regras de Saída

PRIMEIRO PASSO OBRIGATÓRIO: Copie o esqueleto completo de references/skeleton.md — isso inclui todos os elementos necessários (menu, sistema de tema, propriedades CSS, HTML semântico, recursos de acessibilidade). Nunca escreva HTML do zero.

• Escreva UM arquivo .html em ~/Downloads/ (ou caminho especificado pelo usuário)
• Nome do arquivo: kebab-case descritivo, por exemplo, dashboard-receita-q4.html, deck-roadmap-equipe.html
• Comece com o template skeleton.md, adicione seu conteúdo na seção <!-- YOUR CONTENT HERE -->
• Todos os estilos personalizados em <style> após os estilos base do esqueleto
• Bibliotecas CDN são incentivadas — use a melhor ferramenta para o trabalho:
  • Tailwind CSS — https://cdn.tailwindcss.com (estilização utilitária, use livremente)
  • Chart.js — https://cdn.jsdelivr.net/npm/chart.js (barras, linhas, pizza, radar, rosca)
  • D3.js — https://cdn.jsdelivr.net/npm/d3@7 (visualização de dados complexa/personalizada, gráficos de força)
  • Mermaid — https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js (fluxogramas, diagramas de sequência)
  • Three.js — 3D quando apropriado
  • Reveal.js — mecanismo de slides completo quando necessário. CRÍTICO: Deve definir html, body { height: 100%; overflow: hidden; } e dar ao contêiner .reveal height: 100%. A configuração DEVE usar dimensões numéricas: Reveal.initialize({ width: 1280, height: 720, center: true, controls: false }) — NUNCA use porcentagens de string como '100%' que causam viewport de altura zero e slides em branco. OBRIGATÓRIO: Desative os controles padrão do Reveal.js (controls: false) — as sobreposições de seta < > padrão são feias. Em vez disso, adicione uma barra de navegação inferior personalizada mínima:

<nav class="slide-nav" aria-label="Navegação de slides">
  <button onclick="prevSlide()" aria-label="Slide anterior">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
  </button>
  <span class="slide-counter" id="slideCounter">1 / 8</span>
  <button onclick="nextSlide()" aria-label="Próximo slide">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
  </button>
</nav>

.slide-nav { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; z-index: 9998; }
.slide-nav button { width: 28px; height: 28px; border-radius: 6px; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.3; transition: opacity 0.2s; }
.slide-nav button:hover { opacity: 0.7; }
.slide-counter { font-size: 12px; color: var(--text-secondary); font-weight: 400; min-width: 40px; text-align: center; opacity: 0.35; }

• Leaflet — mapas e dados geoespaciais (https://unpkg.com/[email protected]/dist/leaflet.js + CSS). Exigido para dados geográficos — nunca desenhe formas de continente SVG manualmente. Use tiles do OpenStreetMap ou um provedor de tiles mínimo.
• SVG para ícones e gráficos simples — nunca use URLs de imagens externas, a menos que o usuário as forneça
• Prefira animações CSS em vez de JS quando possível

Consulte references/libraries.md para links CDN detalhados, padrões e dicas.

Sistema de Design

Aplique esses padrões. Eles são opinativos e testados — substitua apenas quando o usuário solicitar.

Referência completa do sistema de design: Consulte references/design-system.md para especificações completas de tipografia, cor, espaçamento, animação, acessibilidade e polimento visual.

Destaques principais (consulte a referência para detalhes completos):

Notas de Design

Sistema de Temas (CRÍTICO):

• Use apenas temas baseados em classes — <html class="theme-dark"> ou <html class="theme-light">
• A alternância de tema altera a classe html: document.documentElement.className = 'theme-' + newTheme
• Nunca use atributos data-theme — o sistema de avaliação espera temas baseados em classes
• Propriedades CSS personalizadas obrigatórias: --bg, --surface, --text, --accent, --border (conjunto mínimo para compatibilidade de avaliação)

Tipografia:

• Fonte Inter obrigatória — https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap
• Hierarquia de peso de fonte OBRIGATÓRIA: h1 ≥ 700, h2 ≥ 600, h3 ≥ 500, body = 400 (requisito crítico de avaliação)
• Rastreamento de -0.03em em cabeçalhos
• EXCELÊNCIA EM TIPOGRAFIA COREANA: Para conteúdo em coreano, use Noto Sans KR para texto do corpo com Inter para elementos de interface. Aplique line-height: 1.6 para coreano (vs 1.4 para latim). O peso Médio coreano mapeia para o Regular Ocidental (400). Inclua: https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap

Cores:

• Apenas temas baseados em classes (NENHUM @media prefers-color-scheme)
• Escuro: fundo #0A0A0A, texto #EDEDED. Claro: fundo #FAFAF9, texto #0f172a
• Consulte a referência para f

…

[truncado para tradução]