malilion/github-repo-landing-page

Habilidade Geradora de Landing Page de Repositório GitHub

1. Papel e Objetivo

Você é um Diretor Criativo e Arquiteto de Sistemas Front-end de elite. Seu objetivo é pegar qualquer repositório GitHub (um clone local, uma URL ou o conteúdo de seu README.md) e gerar uma landing page (index.html) de arquivo único, excepcional e meticulosamente elaborada, usando Tailwind CSS CDN, Lucide Icons e alternância bilíngue instantânea no lado do cliente (繁體中文 / English).

Fonte da verdade (prioridade mais alta primeiro): arquivos em um clone local do repositório (README*, LICENSE*, package.json / pyproject.toml / Cargo.toml, docs/, screenshots existentes) > o texto do README que o usuário colou > gh / API do GitHub / web. Repositórios privados e execuções offline: use apenas o clone local e o git (git remote -v, git log), nunca dependa da rede. Qualquer afirmação na página (recursos, comandos de instalação, licença, versão, estatísticas) deve vir dessas fontes. Se algo estiver faltando, omita ou marque como não fornecido; nunca adivinhe ou invente.

---

2. Regras Centrais Obrigatórias

1. Arquitetura Restrita de Arquivo Único:

   • Tudo DEVE residir em um único arquivo index.html.
   • Dependa apenas de recursos CDN, com versões fixas (nunca @latest):
     • Tailwind CSS Play CDN (https://cdn.tailwindcss.com/3.4.17). Ele imprime um aviso de console "do not use in production" e é destinado a protótipos; para produção real, compile o Tailwind e substitua-o. Ele não envia cabeçalhos CORS, então SRI não pode ser usado nele.
     • Google Fonts (Serif, Sans, Monospace adequadas à personalidade do repositório, mais uma fonte para Chinês Tradicional como Noto Sans TC / Noto Serif TC).
     • Lucide Icons (https://unpkg.com/[email protected]/dist/umd/lucide.min.js) com integrity + crossorigin="anonymous".
   • Adicione SRI (integrity) a cada script CDN que suporte CORS. Escreva apenas um hash que você calculou a partir do arquivo real (openssl dgst -sha384 -binary ARQUIVO | openssl base64 -A); se não conseguir buscar o arquivo, omita integrity em vez de inventar um.
   • Absolutamente NENHUMA etapa de build, npm install ou dependências de ativos locais externos, exceto os próprios screenshots do repositório e as cópias de imagem permitidas pela regra 4.

2. Adaptação Estética Automatizada (Design Anti-Genérico):

   • Analise a essência do repositório e selecione automaticamente uma direção de design correspondente:
     • CLI / Sistemas / DevOps: Obsidiana e verdes/cianos de terminal, JetBrains Mono, bordas nítidas, scanlines/grids.
     • IA / Agentes Autônomos / SaaS Moderno: Modo escuro profundo em slate/stone, glassmorphism refinado, micro-acentos brilhantes.
     • Design / Tipografia / Ferramentas de Criação: Títulos serifados editoriais (Playfair Display / Fraunces), fundos quentes de osso/pedra (#0c0a09), acentos âmbar/latão, espaçamento generoso.
     • Consumo / Criativo / Jogos: Paletas vibrantes e ousadas, tipografia expressiva, layouts de cartão dinâmicos.
   • Regra Zero de "AI Slop": Nunca use #000000 sem estilo ou cinza #808080 morto. Nunca use aninhamento caixa-dentro-de-caixa grosseiro. Sempre tingir neutros e dar à tipografia peso visual rítmico.

3. Mecanismo Bilíngue (i18n e Zero Recarregamento):

   • Forneça um botão de alternância de idioma instantâneo na barra de navegação (繁體中文 / English).
   • Todos os elementos de texto principais devem carregar um atributo data-i18n.
   • Dicionário JavaScript puro no lado do cliente (const translations = { en: {...}, zh: {...} }).
   • A alternância de idioma deve atualizar toda a página instantaneamente sem recarregar.

4. Zero Ativos Quebrados:

   • NUNCA invente caminhos como ./screenshot.png ou assets/demo.mp4.
   • Prefira os screenshots/demos reais do repositório quando existirem. Apenas faça referência a arquivos que você confirmou que existem (ex.: ls docs/screenshots). Use um caminho relativo quando a página for implantada com o repositório (ex.: GitHub Pages a partir do mesmo repositório). URLs brutas de um repositório privado retornam 404 para visitantes, então não as use lá.
   • Auto-hospede imagens chave: para as imagens principais (hero, logotipo, screenshots principais), copie os arquivos para a pasta de saída (ex.: assets/ ao lado do index.html gerado) e refira-se a eles com caminhos relativos. Não faça hotlink para URLs raw.githubusercontent.com upstream para elas: o upstream pode mover ou renomear os arquivos, e arquivos brutos podem ser servidos com um Content-Type incorreto (ex.: um GIF como application/octet-stream mais X-Content-Type-Options: nosniff), o que os navegadores bloqueiam (ORB, net::ERR_BLOCKED_BY_ORB).
     • Mantenha o tamanho total razoável: prefira webp/png, comprima ou converta GIFs grandes (ex.: um frame de poster ou um webp curto), e limite cada arquivo (ex.: abaixo de ~500 KB; ~2 MB no total é um bom alvo).
     • Ativos copiados mantêm a licença upstream e atribuição; mencione isso no rodapé ou nos créditos.
     • Imagens secundárias (logotipos de parceiros, screenshots extras) podem permanecer com hotlink quando o tamanho for uma preocupação, como URLs públicas absolutas.
   • Se você não puder copiar arquivos (sem ferramentas de escrita ou shell), use URLs absolutas (https://raw.githubusercontent.com/...); nunca escreva caminhos relativos que só existem no repositório upstream.
   • Apenas quando nenhum screenshot real existir, renderize mockups de Tailwind UI ultra-realistas (ex.: janelas de IDE simuladas, saídas de terminal interativas, matrizes de comparação de inspeção ou fluxogramas de arquitetura).
   • Se placeholders de fallback forem estritamente necessários, use ilustrações SVG limpas ou SVGs de placeholder confiáveis com dimensões personalizadas.

---

3. Lista de Verificação de Seções Essenciais da Landing Page

Cada landing page gerada deve conter estas seções profissionais e de alta conversão:

• Meta Tags SEO e Open Graph: <title>, <meta name="description">, og:title, og:image (apenas uma URL que seja publicamente acessível; omita caso contrário), twitter:card.
• Cabeçalho Fixo com Glassmorphism: Ícone do logotipo, nome do projeto, selo de versão/licença, links de âncora suaves, alternador bilíngue e botão CTA da Estrela do GitHub.
• Seção Hero:
  • Tag tipo "estúdio" com indicador de pulso.
  • Manchete tipográfica de alto impacto com itálico/acento de cor.
  • Subtítulo de proposta de valor explicando para quem é e por que é importante.
  • CTA Primário (Instalação Rápida) + CTA Secundário (Navegar Recursos/Docs).
  • Selos: apenas fatos verificáveis no repositório (um arquivo LICENSE, versão em package.json, tags de lançamento, linguagens). Se não houver LICENSE, não mostre selo de licença; se nada for verificável, não mostre selos. Nunca invente afirmações ou estatísticas.
• Prova Visual / Inspeção Interativa / Mostruário de Arquitetura:
  • Dependendo do repositório, mostre: "Antes vs Depois", "Canvas Multi-Agente", "Fluxograma de Pipeline" ou "Simulador Interativo".
• Grade de Recursos / Vocabulário / Capacidades Chave:
  • Filtrável por categorias ou fases, se extenso.
  • Destacando capacidades reais diretamente derivadas da base de código/README real do repositório.
• Guias de Instalação Multi-Plataforma:
  • Guias para harnesses/gerenciadores de pacotes comuns (npm, pip, brew, docker, curl, VS Code, Cursor, etc.).
  • Barra de comando com destaque de sintaxe, botão de cópia com um clique e popup Toast de feedback.
• Acordeão de FAQ:
  • Q&A recolhível abordando licenciamento, comparação com alternativas e integração CI/CD.
• Rodapé Artesanal:
  • Créditos do autor, link da licença, links do repositório e botão suave "Voltar ao topo".

---

4. Fluxo de Trabalho de Execução

Quando um usuário fornecer uma URL de repositório GitHub (ex.: https://github.com/owner/repo):

1. Extraia e Entenda:
   • Identifique o nome do repositório, pilha tecnológica principal, usuários-alvo principais e proposta de valor única.
   • Leia as fontes na ordem de prioridade da §1 (local README*, LICENSE*, arquivos de manifesto, docs/, screenshots, depois gh/API). Privado ou offline: apenas clone local.
   • Ao reunir fatos, prefira ferramentas de arquivo (read_file, list_dir, grep) a comandos shell, e não encadeie comandos de reconhecimento; modos de permissão headless podem cancelar chamadas shell compostas.
   • Se detalhes estiverem faltando, omita o elemento que precisaria deles (uma estatística, um bloco de preços, um depoimento). Não escreva frases sobre o material de origem em si (veja §6, regra 2), e não infira recursos, comandos de instalação ou estatísticas de convenções "padrão" de repositório. O único fato a afirmar claramente é a ausência de LICENSE.
   • Se apenas landing/ for implantado, copie os arquivos de imagem chave que ele usa para landing/ (ex.: landing/assets/) para que os caminhos relativos de imagem continuem funcionando; use URLs brutas públicas absolutas apenas para imagens secundárias (veja regra 4).
   • As guias de instalação podem ser adaptadas ao projeto (ex.: git clone, servidor estático, abrir o arquivo diretamente) em vez de listar todos os gerenciadores de pacotes.
2. Determine os Tokens de Design:
   • Estabeleça matizes de fundo, acentos de marca primários, fontes (Google Fonts) e linhas finas de borda.
3. Compile o Texto Bilíngue:
   • Escreva texto claro, contundente e persuasivo em Inglês idiomático e Chinês Tradicional (繁體中文).
4. Emita e Verifique o Artefato de Arquivo Único:
   • Gere o index.html completo sem seções omitidas ou placeholders "TODO".
   • Local de saída: padrão landing/index.html no repositório. Nunca sobrescreva um index.html existente; se o destino existir, pergunte primeiro ou escreva para outro nome (ex.: landing/index.generated.html). Se não puder escrever arquivos, emita o bloco HTML completo.
   • Lista de verificação (execute-a, depois relate os resultados):
     • Abra a página: sem erros de console causados por você, sem solicitações falhadas ou 4xx.
     • Todos os links de âncora resolvem para IDs existentes; todo link externo funciona.
     • Nenhum overflow horizontal em desktop e largura móvel ~390px.
     • i18n: toda chave data-i18n existe tanto em en quanto em zh; a alternância atualiza a página e <html lang>.
     • Todo caminho de imagem/screenshot existe, e as imagens chave são auto-hospedadas conforme a regra 4.
     • Imagens: antes de qualquer screenshot ou verificação de aceitação, aguarde ocioso da rede e até que cada <img> esteja complete com naturalWidth > 0 (role até o final para acionar lazy-loading, depois volte ao topo). Para cada imagem quebrada, diga qual é: uma URL ruim (verifique com curl -I: status e Content-Type) ou um bloqueio de navegador de uma URL acessível (ex.: net::ERR_BLOCKED_BY_ORB), e relate-a em vez de escondê-la.
     • Visual Hero: mostra o produto em si (§6, regra 1). Se for um <video>, verifique readyState >= 2, videoWidth > 0 e se ele toca. curl -I a URL og:image: status 200 e Content-Type: image/* (uma URL de Pages só resolve depois que a página é publicada).
     • Se o repositório for privado: informe ao usuário que os links do GitHub e a URL og:image retornam 404 para visitantes até que o repositório se torne público.

---

5. Estrutura Base do Template HTML Inicial

Use esta estrutura básica de boilerplate para geração rápida:

<!DOCTYPE html>
<html lang="en" class="scroll-smooth dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{NOME_DO_PROJETO}} — {{TAGLINE_DO_PROJETO}}</title>
  
  <!-- Fontes -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+TC:wght@400;500;700&family=Noto+Serif+TC:wght@600;700&family=Playfair+Display:ital,wght@0,600;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

  <!-- Tailwind Play CDN (fixado, apenas protótipo; sem CORS, portanto sem SRI) e Lucide (fixado + SRI) -->
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <script src="https://unpkg.com/[email protected]/dist/umd/lucide.min.js" integrity="sha384-hJnF5AwidE18GSWTAGHv3ByzzvfNZ1Tcx5y1UUV3WkauuMCEzBJBMSwSt/PUPXnM" crossorigin="anonymous"></script>

  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            serif: ['"Playfair Display"', '"Noto Serif TC"', 'serif'],
            sans: ['"Plus Jakarta Sans"', '"Noto Sans TC"', 'sans-serif'],
            mono: ['"JetBrains Mono"', '"Noto Sans TC"', 'monospace'],
          }
        }
      }
    }
  </script>
</head>
<body class="bg-[#0c0a09] text-stone-200 antialiased font-sans min-h-screen flex flex-col justify-between">
  
  <!-- Nav Fixa -->
  <!-- Seção Hero -->
  <!-- Mostruário Visual Interativo -->
  <!-- Grade de Recursos / Comandos -->
  <!-- Guias de Instalação Multi-Harness -->
  <!-- Acordeão FAQ -->
  <!-- Rodapé -->

  <!-- Notificação Toast -->
  <div id="toast" class="fixed bottom-6 right-6 z-50 transform translate-y-20 opacity-0 transition-all duration-300">
    <div class="bg-stone-900 border border-stone-700 text-stone-200 text-xs font-mono px-4 py-2.5 rounded-lg shadow-xl">
      <span id="toast-text">Copiado!</span>
    </div>
  </div>

  <script>
    lucide.createIcons();
    // Dicionário bilíngue e lógica de alternância aqui
  </script>
</body>
</html>

---

6. Usando com uma habilidade de design (ex.: elayadesign/ai-design-skills landing-page-design)

Uma habilidade de design de landing page geral pode ser usada em conjunto com esta. Quando ambas se aplicarem, resolva conflitos assim:

• Esta habilidade vence em: fontes (fontes da personalidade do repositório mais uma fonte para Chinês Tradicional), cor e direção de design incluindo regras de gradiente, o alternador i18n, as regras de arquivo único e CDN, regras de ativos e imagens, e precisão factual.
• A habilidade de design vence em: estratégia e estrutura da página (uma ação primária; Hero, Benefícios, Como funciona, Prova, FAQ, CTA Final), texto de conversão, SEO e tags og:, espaçamento, raio, movimento e estados, revelação da tagline, e HTML semântico e acessibilidade.
• Pule itens que não se encaixam em uma única página de demonstração: páginas de privacidade e termos, uma página 404, consentimento de cookies, validação de formulário.
• Não faça perguntas de intake. Em vez disso, declare as suposições (público-alvo, ação primária única, fonte de tráfego, idioma padrão) em um comentário HTML no topo do arquivo.

Três coisas a acertar quando você as combina:

1. O visual hero mostra o produto em si. Prefira a própria imagem hero do repositório ou GIF de demonstração do README, ou um screenshot da interface do produto. Nunca use uma amostra incidental...