# Report Designer

> Constrói a página de relatório das skills do Pipefy com o design system da Pipefy: tokens, componentes, tema claro e escuro, New Order embutida e as restrições do Artifact. Traz o design system duplicado dentro dela, então não depende de nada instalado ao lado. Use quando uma skill for publicar um relatório, documento, mapa ou resumo como Artifact, ou quando pedirem para desenhar, redesenhar ou padronizar uma página que já existe. Gatilhos - 'publica isso como página', 'gera o artefato', 'deixa com a cara da Pipefy', 'usa o design system', 'redesenha esse relatório', 'padroniza o visual das páginas'.

- Skill: `maurivanluiz/report-designer` (Agent Skill, multi-file: 22 files)
- Install (CLI): `npx skillmds@latest add maurivanluiz/report-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/maurivanluiz/report-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: maurivanluiz (https://skillmd.com/u/maurivanluiz)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/maurivanluiz/report-designer

---


# Report Designer

## Descrição

Dona da camada de artefato das skills deste repo. As outras skills sabem o que a
página diz; esta sabe como ela se parece.

O design system da Pipefy está duplicado em `assets/design-system/`, e não
referenciado: nenhuma pasta fora desta skill precisa existir para a página sair
certa. A procedência da cópia, o que ficou de fora e como atualizar estão em
`assets/design-system/SOURCE.md`.

A divisão de trabalho com quem chama é rígida, e vale mais que qualquer regra de
estilo daqui:

- **Esta skill decide aparência.** Token, componente, tipografia, tema,
  espaçamento, o que é permitido no sandbox do Artifact e o que não é.
- **A skill que chama decide conteúdo.** Quais seções existem, em que ordem,
  quais componentes usa, qual é a largura da coluna e, principalmente, **o que a
  cor semântica significa naquela peça**. Na `process-optimizer` ela codifica
  reversibilidade; na `process-documenter`, lacuna e nada mais; na
  `process-health`, severidade. O kit entrega a aparência de `danger`, `warn` e
  `ok`, e quem chama declara a tradução.

Esta skill não coleta dado, não calcula número, não decide ordem de informação e
não publica por iniciativa própria.

## Quando usar

- Uma skill chegou no passo de publicar e o usuário aceitou.
- Alguém pediu para redesenhar uma página que já existe, ou para padronizar o
  visual de várias.
- Uma skill nova precisa de uma entrega visual e não deve reinventar o visual.

Para o conteúdo da página, o dono é o `publish.md` da skill que chama. Para
diagrama de verdade, com nó e aresta, o dono é a `process-mapper`: aqui a fita de
fases é uma leitura em CSS do motivo Flow, não um motor de grafo.

## Referências

Este arquivo é o fluxo. O detalhe mora em `references/`, e cada arquivo é lido no
passo que precisa dele, não antes.

| Arquivo | Quando ler | O que tem |
|---|---|---|
| `references/build.md` | no passo 1, sempre | montagem do arquivo, ordem do `<style>`, fontes, o que o sandbox proíbe |
| `references/kit.md` | no passo 2, sempre | cada componente com a marcação que ele espera e quando usar |
| `references/composition.md` | no passo 3, sempre | layout, hierarquia, escrita da página, antipadrões |
| `references/publish.md` | no passo 4 | `Artifact`, título, favicon, atualizar sem trocar o link |

## Fluxo

**1. Montar o esqueleto.** Leia `references/build.md`. Cole os três CSS na ordem,
declare o `<title>` e escolha a largura da página conforme o tipo de peça. Nada
de conteúdo ainda.

**2. Escrever a marcação com o kit.** Leia `references/kit.md` e use as classes
que existem. Componente que falta é assunto do kit, não da página: se você
precisou escrever CSS novo, é sinal de que o kit está incompleto, e a resposta é
dizer isso e escolher o componente mais próximo, não inventar um estilo solto.

**3. Compor e revisar.** Leia `references/composition.md`. Revise a página contra
a lista de antipadrões antes de mostrar qualquer coisa.

**4. Publicar.** Leia `references/publish.md`, use a ferramenta `Artifact` e
entregue o link.

## Governança

- **Nenhuma cor literal na marcação.** Toda cor vem de token. Um `#` no atributo
  `style` de um elemento é bug, e a correção é no arquivo de tokens.
- **Nenhum script.** Sem `<script>`, sem canvas, sem biblioteca de CDN, sem
  imagem remota. Interatividade é `<details>` e `:target`, e nada mais.
- **Os três estados de tema funcionam ou a página não está pronta.** O Artifact
  renderiza no tema de quem abre, e "system" não marca nada no elemento raiz.
  Cor com definição única dentro de bloco de media ou de tema é bug.
- **Cor nunca carrega informação sozinha.** Todo estado tem a palavra escrita ao
  lado, e toda barra tem o número. Isso não é preferência: é o que faz a página
  funcionar para quem não distingue as matizes e para quem imprime em preto.
- **A cor semântica é de quem chama.** Esta skill não decide se um número é
  crítico. Ela pinta o que já foi classificado.
- **Ausência não é zero.** Célula sem valor recebe traço com `.rp-none`. Zero é
  uma medição; falta de medição é outra coisa, e trocar as duas é mentir com
  número.
- **Sem emoji dentro da página.** A regra é do design system da Pipefy, e é
  absoluta no conteúdo. O favicon é a única exceção, porque a plataforma exige um
  ou dois emoji e ele vive na aba do navegador, fora da peça.
- **Sem faixa colorida na borda do cartão.** O design system diz que a Pipefy não
  usa esse padrão. Severidade vai em pílula.
- **Nada é publicado por iniciativa própria.** Quem publica é a skill que chamou,
  depois de o usuário aceitar.

## Critério de qualidade

A página está pronta quando abre nos três estados de tema sem nenhuma cor
faltando; o corpo não rola de lado em 360 px de largura; todo estado tem palavra
além de cor e toda barra tem número; nenhum `#` de cor aparece fora dos arquivos
de token; nenhum componente foi estilizado fora do kit; o foco de teclado é
visível em tudo que recebe foco; a página fecha em método e em uma única próxima
ação; e não há emoji, hero, gradiente decorativo nem cartão dentro de cartão.

A régua final é a mesma das outras skills do repo: quem recebeu o link e não
esteve na conversa entende o que a página afirma e em que ela se baseia. Se para
isso a pessoa precisa perguntar algo a você, a página não está pronta.