Shredder Theater

Was macht Shredder Theater?

Verwandle das „Löschen“ von Dateien in eine beeindruckende Show: Dateien hereinziehen → Schreddern → eine abschließende Zeile.

Die Ausgabe ist immer eine HTML-Datei: Doppelklick zum Öffnen, offline nutzbar, auf dem Handbildschirm nicht verzerrt.

Zu erfassende Eingaben

Vor dem Aufruf diese 4 Punkte abfragen. Fehlt ein Wert, wird der Standard verwendet. Nicht nachfragen, um Informationen zu sammeln:

Punkt	Standard	Beschreibung
Abschlusszeile	Eine aus references/message-templates.md je nach Szenario auswählen	Der einzige zwingend erforderliche Punkt
Atmosphärisches Farbschema	Ein Set aus references/visual-language.md auswählen	Nach Benutzervorgabe umsetzen
Interaktionsform	Echte Dateien via Drag & Drop + ein „Demo-Löschen“-Button	Der Button ist der sichere Demopfad
Endgröße	Responsive Einzelseite, vorrangig Hochformat auf Mobilgeräten	Mit clamp() + dvh umsetzen

• Die Abschlusszeile ist der emotionale Höhepunkt der gesamten Seite und muss ein konkreter Satz sein. Schreibe keine Systemmeldungen wie „Gelöscht“ oder „Vorgang erfolgreich“.
• Wenn der Benutzer eine Person nennt („für meine Mutter gemacht“, „an den Ex senden“), verwende diese Anrede, nicht automatisch „Herr“.
• Wenn der Benutzer keine Zeile vorgibt, sondern „irgendeine“ möchte, wähle je nach Szenario die kürzeste aus. Keine langen Absätze.

Ablauf

1. Zuerst die Abschlusszeile, dann die visuelle Gestaltung Die Abschlusszeile bestimmt die emotionale Grundstimmung, die visuelle Gestaltung folgt ihr. Umgekehrt erhält man eine Seite, die „schön, aber gefühllos“ ist. Wähle die Abschlusszeile aus references/message-templates.md und das Farbschema aus references/visual-language.md. Notiere in references/visual-language.md, warum die Kombination funktioniert – denn die Abschlusszeile und die Helligkeit des Hintergrunds müssen sich gegenseitig unterstützen.

2. Fünf Schichten aufbauen (Einzelseite HTML, CSS und JS inline, keine externen Ressourcen)

   • Bühne: Hintergrund. Dunkle Töne mit Vignette + Rauschen, helle Töne mit sanften Farbverläufen. Vermeide großflächige, reine Farben.
   • Schredderschicht: Mit CSS den Schredder zeichnen (Gehäuse, Anzeige, Einzug, Rollen). Keine Bilddateien, kein Emoji als Hauptmotiv.
   • Ablageschicht: Liste der zu verarbeitenden Dateien. Bei echten Dateien nur file.name anzeigen, nicht den Inhalt lesen. Bei Bilddateien kann mit URL.createObjectURL() ein Miniaturbild erzeugt werden – „mit eigenen Augen sehen, wie das Bild geschreddert wird“ ist der emotionale Höhepunkt. Nach dem Schreddern revokeObjectURL() aufrufen, um Speicher freizugeben. Das Miniaturbild verlässt nicht den lokalen Speicher.
   • Effektschicht: Papierschnipsel-Partikel. Nachdem das Papier in den Einzug eingesogen wurde, fallen unterhalb des Einzugs Schnipsel heraus. Jeder Schnipsel hat eine unabhängige, zufällige Geschwindigkeit/Drehung/Verzögerung.
   • Textschicht: Die Abschlusszeile erscheint zuletzt.

3. Sound mit Web Audio synthetisieren, keine Audiodateien einbetten

   • Mechanisches Brummen: Sägezahnwelle ~70 Hz + Tiefpassfilter, weißes Rauschen als Papierreiß-Hintergrundgeräusch
   • Schreddergeräusch: Bandpass-gefiltertes weißes Rauschen, kurze Pulse. Jeder Schnipsel fällt einmal, Abstand zufällig 30–60 ms
   • Abschluss: Ein einzelner Sinus-Ton (880→1320 Hz, exponentieller Abfall)
   • Die Autoplay-Richtlinie des Browsers blockiert die erste Wiedergabe. Der erste Klick muss das Audio entsperren. Ein Hinweis „Zum Starten klicken“ auf der Seite platzieren.

4. Animationen nur mit transform / opacity, keine Layout-Eigenschaften ändern

   • Papier wird eingesogen: scaleY komprimieren + translateY in den Einzug + leichte rotate, etwa 300 ms.
   • Gehäusevibration: Hochfrequentes, kleines translateX Zittern mit steps() für mechanischen Ruckeleffekt.
   • Text erscheint: Fade + scale(0.96 → 1) + Schriftabstand schließen, etwa 600 ms ease-out.
   • Schnipsel: translateY fallen + rotate drehen + Deckkraft verringern. Nach dem Aufprall als kleinen Haufen stapeln.

5. Selbsttest vor Auslieferung (dieser Schritt ist unverzichtbar) Öffne die generierte Datei im Browser und prüfe Punkt für Punkt:

   • Beim Klick ertönt wirklich ein Ton (nicht stumm)
   • Papier wird wirklich eingesogen, Schnipsel fallen wirklich
   • Die Abschlusszeile erscheint erst nach dem Schreddern
   • Bei 375 px breitem Mobilbildschirm: kein horizontaler Scrollbalken, Text läuft nicht über, chinesische Titel werden nicht in zwei Zeilen gebrochen
   • Bei hellem Thema hebt sich das Gehäuse deutlich vom Hintergrund ab (die Maschine „steht“ auf dem Hintergrund, schwebt nicht darin)
   • Browser-Konsole: keine Fehler, keine unbehandelten Promise-Ablehnungen (Uncaught (in promise) würde die gesamte Show still und leise töten)
   • Wenn etwas nicht stimmt, korrigieren und erneut ausliefern. Keine halbfertigen Ergebnisse an den Benutzer übergeben.

   Bei Orchestrierung des Ablaufs mit async function jeden Aufruf mit try/catch umschließen: Im Fehlerfall wenigstens die Abschlusszeile anzeigen und einen Hinweis geben. Die Seite darf nicht in einem „nichts passiert“-Zustand verharren.

6. Auslieferung Gib den absoluten Pfad zur HTML-Datei an und eine kurze Erklärung: Wie die Seite genutzt wird (Dateien hereinziehen / Demo-Button klicken) und was die Abschlusszeile ist. Falls ein Screenshot gemacht wurde, diesen anhängen.

Ausgabe-Vertrag

• Eine .html-Datei, eigenständig: keine externen CSS/JS/Schriftarten/Bilder-Abhängigkeiten, offline nutzbar
• Abschlusszeile und Farbschema am Anfang der Datei notieren, für spätere Anpassungen
• Mindestens zwei Wege unterstützen: echte Dateien hereinziehen, Demo-Button klicken
• Kein README, keine Konfigurationsdatei, kein Build-Skript

Fehlerbehandlung

• Benutzer möchte Dateien wirklich löschen: Diese Skill ist nur eine Show, berührt keine Festplatte. Klarstellen: „Die Seite ist nur eine Simulation, die Dateien sind noch da.“ Nicht heimlich löschen.
• Browser gibt keinen Ton von sich: Autoplay-Richtlinie blockiert. Der Benutzer muss zuerst auf die Seite klicken. Der Hinweis „Zum Starten klicken“ dient als Absicherung.
• Show bleibt während der Aktion stecken, nichts passiert: Meistens ein Fehler in der async-Ablauffunktion, der zu einer unbehandelten Promise-Ablehnung führt. Die Einstiegspunkte mit try/catch umschließen: Im Fehlerfall die Abschlusszeile und einen Hinweis anzeigen, nicht die Seite in der Mitte stehen lassen.
• Langer Dateiname sprengt Layout: Dateinamen mit text-overflow: ellipsis abschneiden, vollständigen Namen im title-Attribut ablegen.
• Überlauf auf Mobilgeräten: dvh ist auf Mobilgeräten genauer als vh; lange Texte mit clamp() steuern.
• Schrift auf dunklem Hintergrund schwer lesbar: Kontrast zwischen Text und Hintergrund mindestens 4,5:1. Dunkler Hintergrund mit cremefarbener Schrift, heller Hintergrund mit dunkler Schrift.

Beispiele

Eingabe: „Erstelle eine Schredderseite, die nach dem Löschen ‚Herr, alles erledigt‘ anzeigt“

Ausgabe: Einzelseite HTML. Dunkles, warmes gelbes Licht-Farbschema. Oben zentriert CSS-gezeichneter Schredder, Mitte Dateiablage (echte Dateien hereinziehbar), unten Demo-Button. Nach Klick wird das Papier in den Einzug gesogen, das Gehäuse vibriert, Web Audio erzeugt Schreddergeräusche, Schnipsel fallen von der Mitte und sammeln sich, nach 600 ms erscheint „Herr, alles erledigt“ mit einem sanften Klingelton.

Eingabe: „Ich möchte etwas Hartes: Lösche alle Dateien meines Ex-Partners“

Ausgabe: Gleiche Struktur, aber Farbschema: kalter, grauer Industriestil. Abschlusszeile: ein kurzer, sarkastischer Satz (z. B. „Endgültig vernichtet, keine Wiederherstellung“). Schreddergeräusche schwerer, Gehäusevibration stärker.

Hinweise für die Windows-Plattform (win32)

• Datei öffnen: start "" "<Pfad>\file.html" (macOS/Linux: open "<Pfad>/file.html")
• Generierte Dateipfade mit Backslash-sicherer Schreibweise oder in Python/Node mit path.join erstellen. Im SKILL.md-Text keine hartcodierten /tmp/-Pfade verwenden.
• macOS/Linux unterstützen Drag & Drop mit DataTransfer, Windows-Browser ebenfalls. Falls ein Browser Drag & Drop deaktiviert hat, den Demo-Button als einzigen Pfad erhalten – nicht mit einem Fehler abbrechen.