Madeline-design/shredder-theater

Shredder Theater

Convierte «eliminar archivos» en un espectáculo visual: arrastra → se tritura → una frase final.

El resultado siempre es un archivo HTML: se abre con doble clic, funciona sin conexión y no se rompe en móvil.

Entradas a recopilar

Antes de llamar, confirma estos 4 puntos; si faltan, usa valores predeterminados. No preguntes repetidamente para llenar la información:

Elemento	Valor predeterminado	Descripción
Frase final	Elegir una de references/message-templates.md según el escenario	El único elemento obligatorio
Paleta de colores	Elegir un conjunto de references/visual-language.md	Si el usuario da un estilo, síguelo
Forma de interacción	Soporta arrastre de archivos reales + un botón «Demostración de eliminación»	El botón es la ruta de respaldo
Tamaño de despliegue	Página responsiva, prioridad modo vertical en móvil	Usa clamp() + dvh

• La frase final es el clímax emocional de la página; debe ser una frase concreta. No uses mensajes de sistema como «Eliminado» o «Operación exitosa».
• Si el usuario menciona un destinatario ("hecho para mamá", "para mi ex"), usa ese nombre en la frase; no cambies a "dueño" por defecto.
• Si el usuario no da frase y solo dice «pon una cualquiera», elige la más corta según el escenario; no escribas párrafos largos.

Procedimiento

1. Primero la frase, luego lo visual La frase marca el tono emocional; lo visual lo sigue. Hacerlo al revés da una página que "se ve bien pero no transmite nada". Elige la frase de references/message-templates.md y la paleta de references/visual-language.md; en ambos casos, anota en references/visual-language.md por qué combinan, porque la frase final y el fondo deben potenciarse mutuamente.

2. Construye cinco capas (archivo HTML único, CSS y JS inline, sin recursos externos)

   • Capa escenario: Fondo. Tonos oscuros: viñeta + ruido; tonos claros: degradado suave; evita colores planos grandes.
   • Capa trituradora: Dibujada con CSS (panel, indicadores, ranura de entrada, rodillos). Sin imágenes ni emojis como elemento principal.
   • Capa bandeja: Lista de archivos pendientes. Al arrastrar archivos reales, solo muestra file.name; no leas el contenido. Para imágenes, usa URL.createObjectURL() para una miniatura —ver cómo esa imagen se tritura es el punto emocional—; luego llama a revokeObjectURL() para liberar memoria; la miniatura no sale del dispositivo.
   • Capa animación: Partículas de papel triturado. Al ser succionado por la ranura, desde el borde inferior salen tiras de papel, cada una con velocidad/rotación/retraso aleatorios.
   • Capa texto: La frase final, que aparece al final.

3. Sonido sintetizado con Web Audio, sin archivos de audio

   • Zumbido mecánico: onda diente de sierra ~70 Hz + filtro paso bajo; ruido blanco para el desgarro de fondo.
   • Sonido de trituración: pulsos cortos de ruido blanco con filtro paso banda; una por cada tira de papel, con intervalo aleatorio de 30–60 ms.
   • Final: un tono sine "ding" (880→1320 Hz, decaimiento exponencial).
   • La política de reproducción automática del navegador bloqueará el primer sonido; se debe desbloquear el audio con el primer clic. Incluye un mensaje «Haz clic para empezar».

4. Animaciones con transform / opacity; no modifiques propiedades de layout

   • Papel succionado: scaleY comprime + translateY hacia la ranura + ligero rotate; ~300 ms.
   • Vibración de la máquina: pequeñas sacudidas rápidas con translateX usando steps() para efecto mecánico.
   • Aparición de la frase: fade + scale(0.96 → 1) + cierre de espaciado entre letras; ~600 ms ease-out.
   • Tiras de papel: translateY caída + rotate giro + opacidad decreciente; al caer se amontonan.

5. Autocomprobación antes de entregar (este paso no se omite) Abre el archivo en el navegador y verifica punto por punto:

   • Al hacer clic, realmente suena (no silencio)
   • El papel se succiona, las tiras caen
   • La frase aparece solo después de la trituración
   • En un viewport de 375 px de ancho (móvil): sin desplazamiento horizontal, la frase no se desborda, el título chino no se parte en dos líneas
   • Con tema claro, la máquina se distingue del fondo (debe "estar de pie", no flotar)
   • Consola del navegador sin errores, sin promesas rechazadas sin capturar (Uncaught (in promise) mataría el espectáculo en silencio) Si algo falla, corrige antes de entregar; no entregues un trabajo a medias.

   Al orquestar el flujo con async function, envuelve la llamada en try/catch: si ocurre un error, al menos muestra la frase final y un mensaje, evitando que la página se quede en un estado "no pasó nada".

6. Entrega Proporciona la ruta absoluta del archivo HTML y una breve descripción de cómo usarla (arrastrar archivos / botón de demostración) y cuál es la frase final. Si tomaste una captura de pantalla, inclúyela.

Contrato de salida

• Un solo archivo .html, autónomo: sin dependencias externas de CSS/JS/fuentes/imágenes; funciona sin conexión
• Frase y paleta escritas al inicio del archivo para facilitar modificaciones
• Al menos dos rutas: arrastrar archivos reales y botón de demostración
• No se genera README, archivos de configuración ni scripts de compilación

Manejo de fallos

• El usuario quiere eliminar archivos reales: Esta habilidad solo hace teatro; no toca el disco. Di directamente "La página es una simulación; los archivos siguen ahí". No ejecutes eliminación real.
• El navegador no reproduce sonido: La política de reproducción automática lo bloquea. El usuario debe hacer clic primero; la página incluye un mensaje "Haz clic para empezar" como respaldo.
• La animación se queda a medio camino, no pasa nada: Generalmente es una promesa no capturada lanzada por la función async. Añade try/catch en la entrada; si falla, muestra la frase final y un mensaje de error; no dejes la página en un punto muerto.
• Nombres de archivo largos rompen el diseño: Recorta el nombre con text-overflow: ellipsis; pon el nombre completo en el atributo title.
• Desbordamiento en móvil: dvh es más preciso que vh en navegadores móviles; controla el tamaño del texto con clamp().
• Texto ilegible sobre fondo oscuro: El contraste entre texto y fondo debe ser al menos 4.5:1; fondo oscuro con texto blanco crema, fondo claro con texto negro tinta.

Ejemplos

Entrada: "Haz una página de trituradora que al borrar muestre 'Dueño, procesado correctamente'"

Salida: Archivo HTML único. Paleta de colores cálida (lámpara de mesa), trituradora dibujada con CSS centrada arriba, bandeja de archivos en el medio (permite arrastrar archivos reales), botón de demostración abajo. Al hacer clic, el papel es succionado por la ranura, la máquina vibra, Web Audio sintetiza sonidos de trituración, las tiras caen y se amontonan, y tras 600 ms aparece «Dueño, procesado correctamente» con un suave "ding".

Entrada: "Quiero algo más duro, que los archivos de mi ex se hagan trizas"

Salida: Misma estructura, pero paleta de colores gris industrial fría, frase final con tono sarcástico y corto (por ejemplo, «Destruido permanentemente, no se acepta reconciliación»), sonidos de trituración más pesados, vibración de mayor amplitud.

Notas para Windows (win32)

• Abrir archivo: start "" "<ruta>\archivo.html" (macOS/Linux: open "<ruta>/archivo.html")
• Genera rutas seguras con barras invertidas o usa path.join en Python/Node; no codifiques /tmp/ en el cuerpo de SKILL.md
• En macOS/Linux el arrastre funciona con DataTransfer; los navegadores Windows también lo soportan. Si algún navegador deshabilita el arrastre, el botón de demostración es la única ruta; no generes un error por ello.