Exibição de Projetos

Skill de Exibição de Projetos

Esta skill automatiza a "última milha" do desenvolvimento: apresentar seu trabalho ao mundo. Ela identifica componentes-chave de UI, captura-os automaticamente e gera documentação profissional.

Comandos

• /showcase: A Pílula Mágica (Padrão). Executa Captura de UI + Gravação de Terminal + Atualização de README + Release no GitHub + Metadados (Sobre/Labels).
• /select: Abre uma interface interativa para selecionar funcionalidades específicas.
• /capture: Dispara capturas de UI de alta fidelidade usando Playwright.
• /record: Grava uma demonstração de terminal usando VHS.
• /audit: Realiza uma Auditoria de Saúde do Repositório (Pontuação e Plano de Cura).
• /readme: Atualiza cirurgicamente o README com galerias visuais e badges.
• /release: Cria um Release oficial no GitHub (v0.1.0-alpha).
• /metadata: Detecta e atualiza automaticamente a seção "Sobre" e "Tópicos" do GitHub.
• /socials: Gera conteúdo pronto para publicação no LinkedIn e Reddit.
• /scan: Executa uma verificação de segurança focada em privacidade, buscando segredos e vazamentos de .env.
• /license: Verifica ou adiciona uma Licença MIT.
• /setup: Garante que todas as dependências (Playwright, VHS, ffmpeg) estejam instaladas.

Fluxos de Trabalho Principais

1. Análise Inicial e Configuração Automática

• Objetivo: Identificar o tipo de projeto e garantir que o ambiente esteja pronto.
• Geração Autônoma de Assets:
  • Se as capturas de UI ou gravações de terminal estiverem ausentes, o agente NÃO DEVE ignorá-las ou deixar links quebrados.
  • Passo 1: Tentar captura real via Playwright/VHS.
  • Passo 2: Se o Passo 1 falhar, gerar um diagrama de "Arquitetura Visual" de alta fidelidade ou um SVG estilizado que represente a lógica do projeto.
  • Resultado: Todo repositório apresentado DEVE conter um elemento visual, real ou gerado.
• Detecção de Framework e Gerenciamento de Segredos:
  • Projetos Streamlit: Detectados via streamlit_app.py ou streamlit em requirements.txt.
  • Migração de Segredos: Se detectado, propor migração das chaves de .env para .streamlit/secrets.toml para alinhamento com os padrões do Streamlit Cloud.
• Verificação de Segurança e Privacidade (/scan):
  • Antes de qualquer captura, o agente deve verificar o projeto em busca de padrões comuns de chaves de API (OpenAI, Anthropic, Google, AWS, etc.).
  • Se segredos forem encontrados no código-fonte ou em arquivos .env, o agente deve alertar o usuário e propor adicioná-los ao .gitignore.
• Verificação de Licença (/license):
  • Verificar se o projeto possui um arquivo LICENSE. Se não, propor adicionar uma Licença MIT.
• Verificação de Dependências (/setup):
  • Antes de qualquer captura, o agente deve verificar se playwright (Python), vhs (Sistema) e ffmpeg estão instalados.

2. Captura Automatizada (/capture, /record)

• Captura de UI: Usa scripts/capture.py. Suporta modo responsivo, página inteira, mascaramento e modo escuro.
• Gravação de Terminal: Usa scripts/record_cli.tape e VHS.
• Verificação e Correção Automática:
  • Após a captura, inspecionar os assets gerados.
  • Detecção de Falhas: Procurar por páginas 404, telas em branco ou erros de parser do vhs.
• Limpeza:
  • Assim que a apresentação for verificada e o README atualizado, deletar todos os arquivos temporários.
  • Garantir que apenas os assets finais de alta qualidade (ex: landing.png, demo.gif) permaneçam na pasta showcase/.

3. Documentação e Higiene do README (/readme)

• Objetivo: Construir um README profissional que "Mostra primeiro, conta depois."
• Read the Docs (Opcional / Foco Não-UI):
  • Detecção: Se o projeto for uma ferramenta CLI, biblioteca ou API back-end (não-UI), o agente DEVE sugerir a configuração do "Read the Docs" usando MkDocs.
  • Ação: Propor a criação de um mkdocs.yml básico e uma estrutura docs/.
  • Escolha do Usuário: Sempre perguntar: "Como isso é um [CLI/Biblioteca], gostaria que eu configurasse também um site de documentação no estilo 'Read the Docs'?"
• Integridade dos Assets:
  • NUNCA incluir links de imagem quebrados ou placeholders (como landing.png se ele não existir).
  • Se uma captura real for impossível, o agente DEVE gerar uma alternativa de alta fidelidade (ex: um diagrama Mermaid).
• O README "Foco no Clima" (Vibe-First):
  • Sem Inchaço de Metadados: Remover a tabela de saúde diagnóstica e as linhas de checkmark/porcentagem (ex: ✅ Seguro | ✅ 92/100). Elas parecem robóticas e poluídas.
  • Frase de Contexto Natural: Em vez de palavras-chave, gerar uma única frase de alto sinal que misture naturalmente a essência do projeto, a pilha tecnológica e o propósito.
    • Exemplo: "Um agente de IA focado em privacidade, construído com React e TypeScript para auditoria automatizada de UI."
    • Regra: Esta frase deve parecer um subtítulo escrito por um humano, não um relatório de auditoria.
  • Auditoria Externa de Saúde: Toda pontuação detalhada, tabelas de saúde e dados de diagnóstico DEVEM ser movidos para um repositório/arquivo externo dedicado (ex: ayush-repos-health) ou mantidos no final de um arquivo REPO_HEALTH.md separado. O README principal permanece focado estritamente no produto e no "Clima".
• Injeção Cirúrgica e Desduplicação:
  • Nunca Duplicar: Se uma seção já existir (ex: "Arquitetura", "Funcionalidades", "Instalação"), o agente NÃO DEVE adicionar uma segunda versão.
  • Escolha pela Superioridade: Comparar o conteúdo existente com o gerado. Se a versão gerada for melhor (mais clara, mais visual), substituir a antiga.
  • Mesclagem Híbrida: Se ambas tiverem valor único, mesclá-las em uma única seção coesa.
  • Zero Redundância: Uma única fonte de verdade simplificada para cada aspecto do projeto. Sem cabeçalhos redundantes.
• Posicionamento no Topo: Sempre tentar colocar a Galeria Visual imediatamente após o elevator pitch para maximizar o impacto inicial.

4. Entrega Profissional e Release (/release, /metadata)

• Objetivo: Empacotar o projeto para distribuição oficial.
• Release Profissional no GitHub (/release):
  • Criar um Release automatizado (ex: v0.1.0-alpha/beta/stable) ao finalizar a apresentação.
• Metadados do GitHub (/metadata):
  • Detectar e atualizar a descrição "Sobre" e "Tópicos" (labels) usando scripts/manage_metadata.py.
• Verificação e Validação:
  • Auditoria do Repositório ao Vivo:
    • Antes de finalizar, confirmar visualmente que o README, Badges, Galeria Visual e Tópicos do GitHub estão renderizados corretamente.
  • Estado Limpo: Se um push forçado foi necessário para limpar segredos, garantir que o release seja reassociado ao hash do commit limpo mais recente.

5. Saúde e Cura do Repositório (/audit)

• Objetivo: Diagnosticar a "Prontidão" do projeto e oferecer melhorias cirúrgicas.
• Pontuação: Atribuir uma pontuação ponderada em uma Escala de 0 a 100.
• Itens da Lista de Verificação:
  • Documentação (README, LICENSE).
  • Segurança (Segredos, .gitignore).
  • Automação (setup.sh, Testes).
  • Apresentação (Screenshots, VHS).
  • Bônus (+5 pts): Documentação Estendida (MkDocs/Read the Docs) - Especialmente recomendado para aplicações não-UI.
• Prescrição Reflexiva: Antes de corrigir, o agente deve apresentar um "Plano de Cura".
• A Cura: Somente após a aprovação do usuário, aplicar as correções cirurgicamente e reauditar para mostrar a pontuação melhorada.

6. Mídias Sociais e PR (/socials)

• Objetivo: Resumir o projeto para comunicação externa.
• Formatos:
  • LinkedIn: Profissional, orientado a valor e focado em badges.
  • Reddit: Técnico, de desenvolvedor para desenvolvedor e centrado em GIFs.

Melhores Práticas

• Aguardar Carregamento: Sempre incluir page.wait_for_selector() ou time.sleep() para garantir que gráficos e respostas de LLM sejam renderizados.
• Qualidade Verificada: Executar python3 tests/test_readme_injection.py para confirmar que a lógica de injeção ainda está sólida.
• Higiene da Documentação: Nunca sacrificar a beleza do README por dados de diagnóstico. Manter o README para o "Clima" e mover a "Auditoria" para REPO_HEALTH.md.

---

Construído com ❤️ para Vibe Coders em todo lugar.