Recurso gratuito · Novo

Skill de Relatório HTML

Complementa a skill de Análise — gera um relatório HTML autocontido, com sumário lateral, abrível em qualquer browser e fácil de compartilhar

⬇ Baixar (.skill)

name: tecjustica-relatorio-html

description: Gera relatorio HTML rico (dashboard navegavel, dark mode, timeline visual, KPIs, callouts coloridos) sobre um processo judicial brasileiro a partir das tools pdpj_*, alimentadas por fontes publicas oficiais do Judiciario (PJe/MNI, DJEN, robos de coleta e APIs abertas dos tribunais). Use quando o usuario pedir para "gerar relatorio HTML", "exportar processo", "analisar em HTML", "salvar como HTML", "documento navegavel", "compartilhar analise", "relatorio para Drive", "relatorio civel/criminal", "dashboard do processo", ou mencionar que quer abrir em browser. Requer a skill `tecjustica-mcp-lite` instalada (provedora das 12 tools MCP).

TecJustica Relatorio HTML — Dashboard navegavel

Esta skill **complementa** a skill `tecjustica-mcp-lite` (instale-a primeiro).

Apos coletar os dados de um processo via tools `pdpj_*`, voce monta um arquivo

HTML autocontido (single-file, sem CDN) com **dashboard rico**: hero com

gradiente, KPI cards, timeline visual de movimentos, bar chart de documentos,

callouts coloridos para decisoes, cards de partes com avatares, dark mode

toggle, filtro JS nos movimentos e responsivo mobile + print-friendly.

O HTML **NAO** deve parecer markdown convertido. Aproveite os componentes

visuais ricos descritos abaixo — `<dl>` simples e `<table>` minimalista sao

fallback **so** quando voce nao tem dados suficientes para preencher os

componentes visuais.

Pre-requisitos

1. Skill `tecjustica-mcp-lite` instalada (provedora das 12 tools MCP).

2. Servidor MCP `tecjustica` configurado no cliente.

3. Pasta `templates/` da skill, com `template-civel.html` e

`template-criminal.html`, presente em

`~/.claude/skills/tecjustica-relatorio-html/templates/`.

Como decidir civel vs criminal

Apos a primeira chamada (`pdpj_visao_geral_processo`), inspecione a

`classeProcessual` retornada — campo `nome` ou `codigo`.

**Indicadores de CRIMINAL** (use `template-criminal.html`, paleta vermelha):

• Termos no nome da classe: "penal", "criminal", "execucao penal",

"habeas corpus", "inquerito", "auto de prisao", "denuncia".

• Codigos comuns: 283, 282, 411, 386, 1710.

• "Ministerio Publico" no polo ativo + "Reu/Acusado" no passivo.

**Indicadores de CIVEL** (use `template-civel.html`, paleta azul):

• Qualquer classe que nao se enquadre nos indicadores criminais.

• Default em caso de duvida (juizado, infancia, fazenda, familia, trabalho).

Fluxo canonico de geracao (sequencial, NUNCA paralelo)

1. `pdpj_visao_geral_processo(numero_processo)` — peso 6

2. `pdpj_analise_essencial(numero_processo)` — peso 5

3. `pdpj_list_partes(numero_processo)` — peso 1

4. `pdpj_list_movimentos(numero_processo)` — peso 1

5. (local) Decidir civel vs criminal pela `classeProcessual`.

6. (local) Ler template apropriado:

`~/.claude/skills/tecjustica-relatorio-html/templates/template-{civel|criminal}.html`.

7. (local) Computar KPIs (dias tramitando, total movs/docs/partes, dias desde

ultima mov), classificar movimentos por tipo (decisao/audiencia/juntada/...

intimacao/recurso/sentenca/outros), agrupar documentos por categoria.

8. (local) **Renderizar HTML rico** para cada placeholder `{{...}}_HTML`

usando os snippets de componentes documentados abaixo. **Escape sempre**

o conteudo textual de cada campo (`<` -> `<`, `>` -> `>`, `&` ->

`&`, `"` -> `"`). Nao embuta `<script>` adicional — o template

ja contem todo o JS necessario.

9. (local) Substituir os placeholders no template.

10. (local) Salvar como `./analise-<CNJ-com-hifens>.html` no CWD do usuario

(substitua pontos do CNJ por hifens: `3000066-83-2025-8-06-0203.html`).

**Custo total por relatorio: ~13 weighted.** Em cota de 20 weighted/min,

**maximo 1 relatorio por minuto**. Lotes: SEQUENCIAL — nunca paralelo.

Placeholders disponiveis

Cabecalho / metadados

Placeholder	Conteudo	Origem

|---|---|---|

`{{CNJ}}`	Numero formatado `NNNNNNN-DD.AAAA.J.TT.OOOO`	Parametro
{{TITULO}}	Classe + numero	visao_geral.classeProcessual.nome
{{TRIBUNAL}}	Sigla + nome do tribunal	visao_geral.tribunal
{{CLASSE}}	Classe processual completa	visao_geral.classeProcessual.nome
{{ASSUNTOS}}	Lista (<ul>) ou string separada por ;	visao_geral.assuntos[]
{{STATUS}}	"Em tramitacao", "Arquivado", etc.	visao_geral.situacao
{{DATA_DISTRIBUICAO}}	DD/MM/AAAA	visao_geral.dataDistribuicao
{{VALOR_CAUSA}}	R$ 1.234,56 ou "-"	visao_geral.valorCausa
{{GERADO_EM}}	Timestamp DD/MM/AAAA HH:MM	Relogio local

KPIs (cards no topo)

Placeholder	Conteudo	Como calcular

|---|---|---|

`{{KPI_DIAS_TRAMITANDO}}`	Numero inteiro (ex `437`)	hoje - dataDistribuicao em dias
{{KPI_TOTAL_MOVIMENTOS}}	Total de movs (ex 142)	len(movimentos)
{{KPI_TOTAL_DOCUMENTOS}}	Total de docs (ex 58)	len(documentos) ou da analise essencial
{{KPI_TOTAL_PARTES}}	Total de partes (ex 6)	len(partes)
{{KPI_DIAS_DESDE_ULTIMA_MOV}}	Numero (ex 3)	hoje - data do ultimo movimento
{{KPI_INSTANCIA}}	"1o Grau", "2o Grau", "Recurso"	visao_geral.grauJurisdicao
{{ULTIMA_MOVIMENTACAO}}	Texto curto descritivo (ex "Conclusao para decisao")	movimentos[0].descricao truncado

Quando faltar dado, use `-` (hifen) no `{{KPI_*}}`. Nao deixe vazio.

Blocos HTML ricos

Placeholder	Componente

|---|---|

`{{RESUMO_EXECUTIVO_HTML}}`	Card de destaque com paragrafo curto (3-5 linhas)
{{ALERTAS_HTML}}	Lista de callouts amarelos/vermelhos com pendencias
{{PARTES_ATIVO_HTML}}	Cards visuais (.parte-card) do polo ativo
{{PARTES_PASSIVO_HTML}}	Cards visuais do polo passivo
{{PARTES_TERCEIROS_HTML}}	Cards visuais de terceiros
{{PARTES_DONUT_HTML}}	Donut SVG da proporcao ativo/passivo/terceiros
{{MOVIMENTOS_HTML}}	Timeline vertical (<ol class="timeline">)
{{DOC_DISTRIBUICAO_HTML}}	Bar chart horizontal (.bar-chart) por categoria
{{DOCUMENTOS_HTML}}	Lista agrupada por categoria (.doc-categoria)
{{DECISOES_CALLOUTS_HTML}}	Callouts coloridos (.callout) por importancia
{{DECISOES_HTML}}	Lista textual de decisoes (fallback)
{{ANALISE_ESSENCIAL_HTML}}	Paragrafos da analise essencial

Snippets prontos — copie e adapte

1. KPI card (ja renderizado pelo template, voce so popula valores)

Os 5 KPI cards estao prontos no template. Voce so substitui os placeholders

`{{KPI_*}}`. Nao precisa gerar HTML aqui.

2. Timeline vertical de movimentacoes (`{{MOVIMENTOS_HTML}}`)

```html

<button id="toggle-compact" type="button">Compactar</button>

</div>

<h4 class="timeline-title">Decisao</h4>

<p class="timeline-body">Concedida tutela de urgencia para...</p>

</div>

</li>

<h4 class="timeline-title">Audiencia de instrucao</h4>

<p class="timeline-body">Designada para 20/06/2026 as 14h.</p>

</div>

</li>

<h4 class="timeline-title">Juntada de peticao</h4>

<p class="timeline-body">Procuracao do reu.</p>

</div>

</li>

</ol>

```

Classes de tipo (escolha 1 por item):

Classe	Cor do bullet	Quando usar

|---|---|---|

`tipo-decisao`	Roxo	Decisao, despacho
tipo-sentenca	Verde	Sentenca, julgamento final
tipo-audiencia	Azul	Audiencia, sessao
tipo-juntada	Cinza	Juntada de peticao/documento
tipo-intimacao	Amarelo	Intimacao, citacao, notificacao
tipo-recurso	Laranja	Recurso, apelacao, agravo
tipo-distribuicao	Ciano	Distribuicao, redistribuicao
tipo-outros	Cinza claro	Qualquer outro

Ordene **decrescente por data** (mais recente primeiro). Mostre os primeiros

100 movs — se houver mais, encerre com `<li class="timeline-item tipo-outros">

<div class="timeline-content"><p class="timeline-body empty">... e mais X movs

omitidos.</p></div></li>`.

3. Callouts de decisoes (`{{DECISOES_CALLOUTS_HTML}}`)

```html

<h4>Liminar concedida (14/05/2026)</h4>

<p>Juiz determinou suspensao do protesto ate decisao final.</p>

</div>

<h4>Multa diaria de R$ 500 (12/05/2026)</h4>

<p>Em caso de descumprimento da liminar.</p>

</div>

<h4>Audiencia designada (10/05/2026)</h4>

</div>

<h4>Tutela indeferida (02/05/2026)</h4>

<p>Ausencia de probabilidade do direito.</p>

</div>

```

**Variantes:** `callout-success` (verde, decisoes favoraveis), `callout-warning`

(amarelo, multas/prazos), `callout-info` (azul, designacoes/audiencias),

`callout-danger` (vermelho, indeferimentos/extincoes), `callout-neutral`

(cinza, despachos comuns).

4. Cards de partes (`{{PARTES_ATIVO_HTML}}`, etc.)

```html

<p class="parte-nome">Joao da Silva</p>

<p class="parte-qualif">Autor · CPF 123.***.***-90</p>

<span class="adv-pill">Dr. Maria Souza (OAB/CE 12345)</span>

<span class="adv-pill">Dr. Pedro Lima (OAB/CE 67890)</span>

</div>

<p class="parte-nome">Empresa XYZ Ltda</p>

<span class="adv-pill empty">Sem advogado cadastrado</span>

</div>

```

O `parte-avatar` mostra **iniciais** (primeiras 2 letras dos sobrenomes ou

nome). A cor de fundo do avatar vem do tema.

5. Bar chart de documentos por categoria (`{{DOC_DISTRIBUICAO_HTML}}`)

```html

<span class="bar-label">Peticoes</span>

</div>

<span class="bar-label">Decisoes</span>

</div>

<span class="bar-label">Atas / audiencia</span>

</div>

```

O `width` e `valor / max_valor * 100` (porcentual). Maximo de 8 categorias

ordenadas por contagem decrescente.

6. Donut SVG de partes (`{{PARTES_DONUT_HTML}}`)

Calcule porcentuais (ativo / passivo / terceiros) somando = 100. Use esses

valores no `stroke-dasharray` (formato `<porcentagem> <100-porcentagem>`) e

empilhe via `stroke-dashoffset` cumulativo. Cores fixas no template.

```html

<circle class="donut-segment seg-ativo" cx="18" cy="18" r="15.91549431"

stroke-dasharray="40 60" stroke-dashoffset="25"></circle>

<circle class="donut-segment seg-passivo" cx="18" cy="18" r="15.91549431"

stroke-dasharray="40 60" stroke-dashoffset="-15"></circle>

<circle class="donut-segment seg-terceiros" cx="18" cy="18" r="15.91549431"

stroke-dasharray="20 80" stroke-dashoffset="-55"></circle>

<text x="18" y="23" class="donut-cap">partes</text>

</svg>

<li><span class="dot dot-ativo"></span>Ativo: 2 (40%)</li>

<li><span class="dot dot-passivo"></span>Passivo: 3 (40%)</li>

<li><span class="dot dot-terceiros"></span>Terceiros: 1 (20%)</li>

</ul>

```

Se nao tiver dados suficientes, omita o donut e renderize uma lista simples

no lugar.

7. Alertas / pendencias (`{{ALERTAS_HTML}}`)

Lista 0 a 4 alertas curtos (callouts amarelos/vermelhos). Exemplos: prazo

proximo, audiencia nao designada, ausencia de citacao, parte sem advogado.

```html

<h4>Audiencia nao designada</h4>

<p>Saneamento concluido em 02/05 mas audiencia de instrucao pendente.</p>

</div>

```

Se **nao houver alertas**, use:

```html

<h4>Sem pendencias identificadas</h4>

<p>Processo em andamento regular.</p>

</div>

```

8. Resumo executivo (`{{RESUMO_EXECUTIVO_HTML}}`)

Um paragrafo curto (3-5 linhas) com tese central, pedido, ultima decisao e

proximo passo esperado. Use `<p>` direto, sem cabecalho.

```html

<p>Acao de cobranca de honorarios advocaticios proposta em fev/2024 por

Joao da Silva (autor) em face da Empresa XYZ Ltda. Pedido principal de

R$ 45.000 com juros e correcao. Em 14/05/2026 foi concedida tutela de

urgencia para suspensao do protesto, com multa diaria de R$ 500. Aguarda

audiencia de instrucao designada para 20/06/2026.</p>

```

9. Documentos agrupados (`{{DOCUMENTOS_HTML}}`)

```html

<h4>Peticao inicial & emendas <span class="doc-count">4</span></h4>

<li><a href="#" class="doc-link">id 1234 · Peticao inicial · 14/02/2024</a></li>

<li><a href="#" class="doc-link">id 1289 · Emenda · 28/02/2024</a></li>

</ul>

</div>

<h4>Decisoes <span class="doc-count">3</span></h4>

<li><a href="#" class="doc-link">id 4521 · Decisao · 14/05/2026</a></li>

</ul>

</div>

```

Use `pdpj_get_documento_url` para popular o `href` se disponivel; caso

contrario use `#`.

Cota e custo (compartilhada com a skill base)

• **20 requests por minuto** e **300 por hora** por API key (sliding window).

• **Cap global do servidor: 130 weighted/minuto** — soma dos pesos de TODOS

os clientes. Protege a capacidade compartilhada do servidor.

• Stateless HTTP: cada tool call e uma request independente.

• Pesos (custo real upstream — `tools/_common.py:TOOL_WEIGHTS`):

Tool	Peso

|---|---|

`pdpj_visao_geral_processo`	6
pdpj_analise_essencial	5
pdpj_read_documentos_batch	3
pdpj_read_documento	2
demais 8 tools	1

• Em rate limit, PARE. O servidor responde com mensagem amigavel e tempo de

espera (`aguarde Xs`) — respeite o intervalo, NUNCA faca retry imediato.

**Atencao especifica desta skill:** cada relatorio custa ~13 weighted, entao

em pior cenario voce gera **1 relatorio por minuto** sem violar a cota

individual. Para lote de 5 processos: 5 min sequenciais — avise o usuario.

Lote >10: ofereca paginacao manual ou pergunte se ele quer realmente.

Como salvar o arquivo

Use a ferramenta nativa de escrita de arquivo do cliente (Write em Claude

Code, ou equivalente). Caminho final: `./analise-<CNJ-com-hifens>.html` no

diretorio atual.

Exemplo de nome para CNJ `3000066-83.2025.8.06.0203`:

`analise-3000066-83-2025-8-06-0203.html`.

Apos salvar, **informe o caminho ao usuario** e diga que o arquivo pode ser

aberto em qualquer navegador, compartilhado por upload no Drive/Slack/Email

sem dependencia externa. Mencione tambem que ele pode imprimir / salvar como

PDF (Ctrl+P) — o template tem `@media print` configurado.

Limitacoes

• **1 processo por arquivo HTML.** Para comparar varios processos, gere um

arquivo para cada e depois sumarize em texto na conversa.

• **Dark mode opcional.** Botao no canto da sidebar; preferencia salva em

localStorage.

• **Sem reordenacao interativa.** Tabelas/timeline sao estaticas; existe

filtro de busca nos movimentos.

• **Sem PDFs anexos.** O HTML referencia documentos por id/nome mas nao

embute binarios — use `pdpj_get_documento_url` se o usuario precisar do

link de visualizacao.

Como instalar esta skill

Distribuida como `tecjustica-relatorio-html.skill` (zip) na landing:

https://tecjusticamcp-lite-production.up.railway.app/skill-relatorio.

Claude Code

```bash

curl -L -o tecjustica-relatorio-html.skill \

https://tecjusticamcp-lite-production.up.railway.app/skill-relatorio-download

mkdir -p ~/.claude/skills

unzip -o tecjustica-relatorio-html.skill -d ~/.claude/skills/

```

Windows (PowerShell):

```powershell

Invoke-WebRequest `

-Uri "https://tecjusticamcp-lite-production.up.railway.app/skill-relatorio-download" `

-OutFile "$env:TEMP\tecjustica-relatorio-html.skill"

New-Item -ItemType Directory -Force "$env:USERPROFILE\.claude\skills" | Out-Null

Expand-Archive -Force `

-Path "$env:TEMP\tecjustica-relatorio-html.skill" `

-DestinationPath "$env:USERPROFILE\.claude\skills"

```

Reinicie o Claude Code. A skill ativa sozinha quando o usuario mencionar

"relatorio HTML", "exportar processo", "salvar como HTML", "dashboard do

processo", etc.