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.

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.