Théâtre Déchiqueteur Madeline-design

Théâtre Déchiqueteur

Transformez la « suppression de fichiers » en un spectacle visuel : glisser-déposer, déchiquetage, et une phrase de conclusion.

Le résultat est toujours un fichier HTML : double-cliquez pour l'ouvrir, utilisable hors ligne, et qui tient sur mobile.

Éléments à recueillir

Avant d'appeler cette compétence, confirmez ces 4 éléments. Par défaut, utilisez les valeurs par défaut — ne posez pas de questions inutiles pour tout obtenir :

Élément	Valeur par défaut	Description
Phrase de conclusion	Choisissez-en une dans references/message-templates.md selon le scénario	Le seul élément obligatoire
Palette de couleurs	Choisissez un thème dans references/visual-language.md	Appliquez le style si l'utilisateur en donne un
Interaction	Prise en charge du glisser-déposer de fichiers réels + un bouton « Supprimer de démonstration »	Le bouton garantit un chemin de démonstration
Dimension	Page responsive, priorité portrait sur mobile	Utilisez clamp() + dvh

• La phrase de conclusion est le point émotionnel de toute la page — elle doit être une phrase concrète. N'utilisez pas de messages système comme « Supprimé » ou « Opération réussie ».
• Si l'utilisateur mentionne une personne (ex. « pour ma mère », « à envoyer à mon ex »), utilisez le terme donné par l'utilisateur, ne le remplacez pas par « maître ».
• Si l'utilisateur ne donne pas de phrase et dit simplement « n'importe quoi », choisissez la plus courte selon le scénario, n'écrivez pas un long paragraphe.

Procédure

1. D'abord la phrase, ensuite le visuel La phrase détermine le ton émotionnel ; le visuel suit. Faire l'inverse donne une page « jolie mais sans émotion ». Choisissez la phrase dans references/message-templates.md et la palette dans references/visual-language.md. Notez dans les deux fichiers pourquoi cette combinaison fonctionne, car la phrase finale et l'arrière-plan doivent se compléter.

2. Construisez une structure en cinq couches (fichier HTML unique, CSS et JS en ligne, aucune ressource externe)

   • Couche scène : arrière-plan. Tons foncés : coins sombres + bruit ; tons clairs : dégradés doux. Évitez les aplats de couleur unie.
   • Couche déchiqueteuse : dessinez la machine en CSS (panneau, voyants, entrée papier, rouleaux). Pas d'image, pas d'emoji comme visuel principal.
   • Couche plateau : liste des fichiers à traiter. Pour les fichiers réels déposés, affichez uniquement file.name ; ne lisez pas le contenu. Pour les images, utilisez URL.createObjectURL() pour un aperçu — « voir l'image se déchiqueter sous ses yeux » est le point fort. Après déchiquetage, appelez revokeObjectURL() pour libérer la mémoire ; l'aperçu ne quitte pas la machine.
   • Couche animation : particules de papier. Après aspiration dans l'entrée, des bandes de papier jaillissent du bas de l'entrée ; chaque bande a une vitesse/rotation/délai de chute aléatoires indépendants.
   • Couche texte : la phrase finale apparaît en dernier.

3. Son synthétisé via Web Audio, pas de fichier audio

   • Bourdonnement mécanique : onde en dents de scie ~70 Hz + filtre passe-bas, bruit blanc pour le fond de déchiquetage.
   • Bruit de déchiquetage : impulsions de bruit blanc passe-bande, une par bande de papier, intervalle aléatoire 30–60 ms.
   • Conclusion : un « ding » sine (880→1320 Hz, décroissance exponentielle).
   • La politique de lecture automatique du navigateur bloque la première lecture : le premier clic doit déverrouiller l'audio ; affichez un message « Cliquez ici pour commencer ».

4. Animations avec transform / opacity, ne touchez pas aux propriétés de layout

   • Aspiration du papier : scaleY compression + translateY vers l'entrée + léger rotate, environ 300 ms.
   • Vibrations de la machine : translateX hautes fréquences et faible amplitude, utilisez steps() pour un effet mécanique saccadé.
   • Apparition du texte : fade + scale(0.96 → 1) + resserrement de l'espacement des lettres, environ 600 ms ease-out.
   • Bandes de papier : translateY chute + rotate retournement + atténuation de l'opacité, puis empilage au sol.

5. Auto-vérification avant livraison (étape obligatoire) Ouvrez le fichier généré dans un navigateur et vérifiez point par point :

   • Le son fonctionne au clic (pas silencieux).
   • Le papier est aspiré, les bandes tombent.
   • La phrase apparaît après la fin du déchiquetage.
   • Sur un écran de 375 px de large en portrait, pas de défilement horizontal, la phrase ne déborde pas, les titres chinois ne sont pas coupés sur deux lignes.
   • En thème clair, la machine se détache bien de l'arrière-plan (elle doit « se tenir » dessus, pas flotter).
   • Console du navigateur sans erreur, aucune promesse non capturée (Uncaught (in promise) tuerait le spectacle en silence). Une seule condition non satisfaite : corrigez avant de livrer. Ne remettez pas un travail à moitié fait.

   Lorsque le spectacle est orchestré avec une async function, enveloppez l'appel dans un try/catch : en cas d'erreur, affichez au moins la phrase de conclusion et un message indicatif, ne laissez pas la page dans un état « rien ne se passe ».

6. Livraison Donnez le chemin absolu du fichier HTML et une phrase expliquant comment l'utiliser (glisser-déposer / bouton de démonstration) et quelle est la phrase de conclusion. Si vous avez fait une capture d'écran, joignez-la.

Contrat de sortie

• Un fichier .html, autonome : aucune dépendance externe (CSS, JS, polices, images) ; fonctionne hors ligne.
• La phrase et la palette sont écrites en haut du fichier pour une modification facile.
• Prend en charge au moins deux chemins : glisser-déposer de vrais fichiers, et bouton de démonstration.
• Ne produit pas de README, de fichier de configuration ni de script de build.

Gestion des échecs

• L'utilisateur veut vraiment supprimer des fichiers : cette compétence ne fait que du spectacle, elle ne touche pas au disque. Dites clairement « La page est une simulation, les fichiers sont intacts », n'exécutez pas de suppression réelle.
• Aucun son : la politique de lecture automatique du navigateur bloque l'audio. L'utilisateur doit d'abord cliquer sur la page ; un message « Cliquez ici pour commencer » sert de filet de sécurité.
• Le spectacle se fige, rien ne se passe : probablement une erreur dans la fonction async du spectacle transformée en promesse non capturée. Ajoutez un try/catch à l'entrée, affichez la phrase de conclusion et une indication, ne laissez pas la page en plan.
• Nom de fichier trop long et qui casse la mise en page : tronquez le nom avec text-overflow: ellipsis, mettez le nom complet dans l'attribut title.
• Débordement sur mobile : dvh est plus précis que vh sur les navigateurs mobiles ; pour les textes longs, utilisez clamp() pour contrôler la taille de police.
• Texte illisible sur fond sombre : le contraste entre le corps du texte et le fond doit être d'au moins 4.5:1. Fond sombre → texte blanc cassé ; fond clair → texte noir profond.

Exemples

Entrée : « Crée une page de déchiqueteuse qui affiche 'Maître, tout a été traité' après la suppression. »

Sortie : Fichier HTML unique. Palette sombre chaude éclairée par une lampe. La déchiqueteuse CSS centrée en haut, le plateau de fichiers au milieu (glisser-déposer de vrais fichiers), bouton de démonstration en bas. Au clic, le papier est aspiré, la machine vibre, Web Audio synthétise le bruit de déchiquetage, les bandes tombent et s'empilent au milieu. Après 600 ms, « Maître, tout a été traité » apparaît en fondu avec un léger « ding ».

Entrée : « Je veux quelque chose de plus brutal, tous les fichiers de mon ex sont déchiquetés. »

Sortie : Même structure, mais palette gris froid industriel. Phrase courte et sarcastique (ex. « Détruit à jamais, pas de réconciliation »). Bruits de déchiquetage plus lourds, vibrations de la machine plus amples.

Notes pour Windows (win32)

• Pour ouvrir le fichier : start "" "<chemin>\fichier.html" (macOS/Linux : open "<chemin>/file.html")
• Chemin de génération : utilisez des backslash-safe ou, en Python/Node, path.join ; ne codez pas en dur /tmp/ dans le texte SKILL.md.
• Sous macOS/Linux, le glisser-déposer utilise DataTransfer ; les navigateurs Windows le supportent aussi. Si un navigateur désactive le glisser-déposer, utilisez uniquement le bouton de démonstration comme chemin, sans générer d'erreur.