O que html-report faz?
Habilidade Codex para relatórios HTML autônomos e polidos, diagramas, revisões, tabelas e apresentações de slides.
Esta habilidade permite que você crie relatórios HTML completos e visualmente atraentes diretamente no ambiente Codex. Todos os recursos (CSS, JavaScript) são embutidos no arquivo, tornando-o portátil e fácil de compartilhar.
Recursos
- Relatórios Autônomos: Geração de HTML com estilos e scripts embutidos, sem necessidade de arquivos externos.
- Diagramas: Suporte a diagramas usando Mermaid.js, gráficos e outras visualizações.
- Tabelas Formatadas: Criação de tabelas estilizadas para apresentação clara de dados.
- Slides: Criação de decks de slides em HTML para apresentações.
- Revisões: Formatação de revisões de código ou documentos de forma organizada.
Como Usar
Para utilizar esta habilidade, inclua o nome da habilidade (omshejul/html-report) no seu prompt Codex. Em seguida, descreva o tipo de relatório que deseja gerar (relatório, diagrama, tabela, slides, revisão).
Exemplo
Gere um relatório HTML autônomo com um diagrama de fluxo Mermaid mostrando o processo de login e uma tabela com as últimas 5 atualizações do sistema.
Plataformas Suportadas
- Codex: Execute comandos diretamente no ambiente Codex.
- Claude Code: Adaptável para uso em projetos Claude Code.
- Cursor: Pode ser utilizado com adaptações.
Estrutura do HTML Gerado
<!DOCTYPE html>com declaração de idioma.<head>com metadados, título e estilos embutidos.<body>com conteúdo (diagramas, tabelas, slides) e scripts embutidos (ex: Mermaid.js).- Todas as bibliotecas são carregadas via CDN ou embutidas diretamente para autonomia.
Personalização
Você pode solicitar alterações de estilo (cores, fontes, layout) diretamente no prompt. Exemplo:
Crie um relatório com tema escuro, fonte sans-serif, e um gráfico de barras mostrando vendas mensais.
Notas
- O HTML gerado é compatível com navegadores modernos.
- Para diagramas, recomenda-se usar Mermaid.js (embutido via CDN).
- Para tabelas, utilize classes CSS padronizadas (ex:
.data-table). - Para slides, cada slide é uma seção
<div class="slide">.
Licença
Consulte o repositório original para informações de licenciamento.