Shredder Theater — Teatro do Triturador

Teatro do Triturador

Transforme a "exclusão de arquivos" em uma bela performance: arraste para dentro → triture → finalize com uma frase.

O resultado é sempre um arquivo HTML: clique duas vezes para abrir, funciona offline, não quebra em celulares.

Entradas a coletar

Antes de chamar, confirme estes 4 itens. Se faltar, use os padrões; não fique perguntando repetidamente para completar informações:

Item	Padrão	Descrição
Frase de desfecho	Escolha uma de references/message-templates.md conforme o cenário	O único item obrigatório
Paleta de cores	Escolha um conjunto de references/visual-language.md	Se o usuário definir um estilo, siga-o
Forma de interação	Suporte arrastar arquivos reais + um botão "Demonstração de exclusão"	O botão é o caminho de demonstração padrão
Tamanho de exibição	Página única responsiva, priorizando retrato em dispositivos móveis	Use clamp() + dvh

• A frase de desfecho é o ponto emocional de toda a página, deve ser uma frase concreta. Não escreva mensagens de sistema como "Excluído" ou "Operação concluída com sucesso".
• Se o usuário mencionar um destinatário ("fiz para minha mãe", "vou mandar para o ex"), use o tratamento que o usuário deu, não mude para "mestre".
• Se o usuário não disser a frase e apenas disser "qualquer uma", escolha a mais curta conforme o cenário, não escreva parágrafos longos.

Procedimento

1. Primeiro defina a frase, depois o visual A frase determina o tom emocional, o visual segue. Fazer o contrário resulta em uma página "bonita, mas sem sentimento". Escolha a frase de references/message-templates.md e a paleta de references/visual-language.md. Em ambos os lugares, registre em references/visual-language.md "por que essa combinação funciona", pois a frase final e o brilho do fundo devem se complementar.

2. Monte a estrutura em cinco camadas (arquivo HTML único, CSS e JS inline, sem recursos externos)

   • Camada de palco: fundo. Cores escuras usam vinheta + ruído, cores claras usam gradientes suaves, evite grandes áreas de cor sólida.
   • Camada do triturador: desenhe o corpo do triturador com CSS (painel, luz indicadora, entrada de papel, rodas), não use imagens nem emoji como elemento visual principal.
   • Camada da bandeja: lista de arquivos a processar. Ao arrastar arquivos reais, exiba apenas file.name, não leia o conteúdo. Para arquivos de imagem, use URL.createObjectURL() para gerar uma miniatura — "ver a imagem sendo triturada" é o ponto alto emocional; após triturar, chame revokeObjectURL() para liberar memória, a miniatura não sai do dispositivo.
   • Camada de efeitos: partículas de papel picado. Após o papel ser sugado pela entrada, partículas de papel picado são expelidas pela parte inferior da entrada, cada uma com velocidade/rotação/atraso de queda aleatórios.
   • Camada da frase: a frase de desfecho, que aparece por último.

3. Som sintetizado em tempo real com Web Audio, sem empacotar arquivos de áudio

   • Zumbido mecânico: onda dente de serra ~70Hz + passa-baixa, ruído branco como base de rasgo de papel
   • Som de papel picado: pulso curto de ruído branco com passa-banda, uma vez para cada partícula de papel, com intervalo aleatório de 30–60ms
   • Desfecho: um 'ding' de onda senoidal (880→1320Hz com decaimento exponencial)
   • A política de reprodução automática do navegador bloqueará a primeira reprodução; é necessário que o primeiro clique desbloqueie o áudio; inclua uma dica "Clique para começar" na página.

4. Efeitos com transform / opacity, não mexa em propriedades de layout Papel sendo sugado: scaleY comprimir + translateY para a entrada + leve rotate, cerca de 300ms. Vibração do corpo: tremor translateX de alta frequência e pequena amplitude, use steps() para sensação mecânica. Aparecimento da frase: fade + scale(0.96 → 1) + espaçamento entre letras diminuindo, cerca de 600ms ease-out. Partículas de papel: translateY caindo + rotate girando + opacidade diminuindo, acumulam-se em uma pilha ao cair.

5. Auto-verificação antes de entregar (esta etapa não pode ser pulada) Abra o arquivo gerado no navegador e verifique item por item:

   • Um clique realmente produz som (não está mudo)
   • O papel realmente é sugado e as partículas caem
   • A frase aparece somente após a trituração terminar
   • Em viewport de 375px de largura no celular, sem rolagem horizontal, frase não transborda, título em chinês não é quebrado em duas linhas
   • Em tema claro, o corpo do triturador se destaca do fundo (a máquina parece "em pé" sobre o fundo, não flutuando)
   • Console do navegador sem erros, sem rejeições de Promise não capturadas (Uncaught (in promise) pode matar silenciosamente toda a performance no meio) Se qualquer item falhar, corrija antes de entregar; não entregue produto pela metade.

   Ao usar async function para orquestrar o fluxo da performance, envolva a chamada com try/catch: se ocorrer erro, pelo menos exiba a frase de desfecho com uma dica, para que a página não pare em um estado "nada aconteceu".

6. Entrega Forneça o caminho absoluto do arquivo HTML e uma frase explicando: como usar esta página (arrastar arquivos / clicar no botão de demonstração) e qual é o desfecho. Se tiver capturado uma imagem, anexe-a também.

Contrato de saída

• Um arquivo .html, autossuficiente: sem dependências externas de CSS/JS/fontes/imagens, pode abrir offline
• Frase e paleta escritas no topo do arquivo para facilitar alterações posteriores
• Suporta pelo menos dois caminhos: arrastar arquivos reais e clicar no botão de demonstração
• Não produza README, arquivos de configuração ou scripts de build

Tratamento de falhas

• Usuário quer realmente excluir arquivos: esta skill só faz performance, não mexe no disco. Diga claramente "A página é simulada, os arquivos ainda estão lá", não execute exclusão.
• Navegador não responde: Política de reprodução automática bloqueia. O usuário precisa clicar na página primeiro; a página já inclui dica "Clique para começar" como fallback.
• Performance trava no meio, nada acontece: Provavelmente erro na função async da performance virou rejeição de Promise não capturada. Adicione try/catch na entrada; se erro, exiba a frase de desfecho e uma dica, não deixe a página parada no meio.
• Nome de arquivo muito longo quebra o layout: Use text-overflow: ellipsis para truncar, coloque o nome completo no atributo title.
• Transbordamento em dispositivos móveis: dvh é mais preciso que vh em navegadores móveis; controles de tamanho de fonte com clamp().
• Texto ilegível em fundo escuro: Contraste entre texto e fundo pelo menos 4.5:1, fundo escuro com texto creme claro, fundo claro com texto tinta escura.

Exemplos

Entrada: "Crie uma página de triturador que, ao excluir, mostre 'Mestre, processamento concluído'"

Saída: Arquivo HTML único. Tema escuro com luz amarela de abajur, triturador desenhado em CSS centralizado no topo, bandeja de arquivos no meio (pode arrastar arquivos reais), botão de demonstração na parte inferior. Ao clicar, papel é sugado pela entrada, corpo vibra, som de trituração sintetizado com Web Audio, partículas de papel caem do meio e se acumulam, após 600ms a frase "Mestre, processamento concluído" aparece com fade e um 'ding' leve.

Entrada: "Quero um mais agressivo, todos os arquivos do meu ex destruídos"

Saída: Mesma estrutura, mas paleta muda para cinza frio industrial, frase trocada para tom sarcástico curto (ex.: "Permanentemente destruído, sem reconciliação"), som de trituração mais pesado, vibração do corpo maior.

Notas para plataforma Windows (win32)

• Abrir arquivo: start "" "<caminho>\arquivo.html" (macOS/Linux: open "<caminho>/arquivo.html")
• Caminhos de arquivo gerados use barras invertidas seguras, ou em Python/Node use path.join; não codifique /tmp/ no corpo do SKILL.md
• Em macOS/Linux, arrastar funciona com DataTransfer, navegadores Windows também suportam; se algum navegador desabilitar arrasto, mantenha o botão de demonstração como único caminho, não levante erro.