# Convertisseur Images Shopify — Plan d'implémentation > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. **Goal:** Construire une app web client-side qui convertit des photos HEIC de produits en JPG avec suppression automatique du fond blanc et pipette manuelle pour les cas complexes, puis exporte un ZIP en conservant les noms de fichiers d'origine. **Architecture:** Page HTML unique avec Alpine.js pour la gestion d'état. Quatre modules ES (`heicConverter`, `bgRemover`, `imageProcessor`, `zipExporter`) chargés via `

Convertisseur Images Shopify

Zone d'upload (à construire)

Grille d'images (à construire)

Zone d'export (à construire)

``` - [ ] **Étape 3 : Créer les stubs des modules** `js/heicConverter.js` : ```javascript export async function convertHeicToJpeg(file) { throw new Error('Not implemented'); } ``` `js/bgRemover.js` : ```javascript export function chebyshevDistance(c1, c2) { throw new Error('Not implemented'); } export function createFloodFillMask(imageData, seedColor, tolerance) { throw new Error('Not implemented'); } export function applyMaskToImageData(imageData, mask, replacementColor) { throw new Error('Not implemented'); } export function softEdges(imageData, mask) { throw new Error('Not implemented'); } export function removeBackground(canvas, seedColor, tolerance = 30) { throw new Error('Not implemented'); } export async function pickColorFromCanvas(canvas) { throw new Error('Not implemented'); } ``` `js/imageProcessor.js` : ```javascript export async function processBatch(items, processFn, concurrency = 3) { throw new Error('Not implemented'); } ``` `js/zipExporter.js` : ```javascript export async function downloadAllAsZip(processedFiles) { throw new Error('Not implemented'); } ``` - [ ] **Étape 4 : Créer css/app.css** ```css .drop-active { border-color: #3b82f6 !important; background-color: #eff6ff !important; } .image-card { transition: box-shadow 0.2s; } .image-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .picking-color { cursor: crosshair; outline: 2px solid #7c3aed; } ``` - [ ] **Étape 5 : Créer test.html avec l'assistant d'assertions** ```html Tests — Convertisseur Images

Tests unitaires

``` - [ ] **Étape 6 : Ouvrir index.html dans Chrome et vérifier le chargement** Attendu : titre "Convertisseur Images Shopify" visible, aucune erreur console. - [ ] **Étape 7 : Ouvrir test.html dans Chrome et vérifier "0 passé(s), 0 échoué(s)"** - [ ] **Étape 8 : Commit initial** ```bash git init git add . git commit -m "feat: scaffold projet avec stubs et test runner navigateur" ``` --- ### Tâche 2 : Module HEIC Converter **Fichiers :** - Modifier : `js/heicConverter.js` - Modifier : `test.html` - [ ] **Étape 1 : Ajouter les tests dans test.html** Dans le `