Exemples de Workflows

Presque quotidiennement depuis la sortie de Workflows 2.0, nous continuons d'être émerveillés par les incroyables workflows créés par la communauté Supercode. Cependant, notre documentation Workflows semble extensive et le nombre de fonctionnalités peut être un peu intimidant pour les nouveaux utilisateurs, rendant peu clair par où commencer et comment éviter de rester bloqué.

Nous avons décidé que la meilleure aide est de simplement montrer des exemples de Workflows réels qui peuvent être téléchargés en un clic et utilisés dans votre projet. Ensuite - étudier comment ils fonctionnent et commencer à créer vos propres solutions pour vos tâches spécifiques.

Nous avons mis en évidence 5 exemples :

• (Très simple) Envoyer un message Telegram à la fin du travail
• (Simple) Exécution obligatoire des tests
• (Simple) Ralph Wiggum aka "Ralph est une boucle Bash" - résolution itérative de tâches
• (Moyen) Refactorisation en plusieurs étapes
• (Avancé) Traitement automatique des tâches Trello - prend depuis Todo, exécute, déplace vers Done

Envoyer un message Telegram à la fin du travail

Très simple

Cet exemple montre comment créer un workflow simple pour envoyer des notifications Telegram après que l'agent ait terminé son travail. Parfait pour les tâches de longue durée lorsque vous voulez recevoir une notification à propos de leur achèvement.

Que fait ce workflow ?

Dans cet exemple, nous créons deux workflows :

1. Send Telegram Notification (with task) - workflow principal avec un bouton dans l'UI. Lorsque vous cliquez :

• Exécute votre prompt actuel
• Envoie une notification à Telegram
• Efface le prompt

2. Send Telegram Push - workflow auxiliaire sans bouton, conçu pour être utilisé comme dernière étape dans d'autres workflows. Prend un message de $prompt, l'envoie, et efface le prompt.

Configuration

1. Créez un bot Telegram :

• Ouvrez Telegram et trouvez @BotFather
• Envoyez la commande /newbot
• Suivez les instructions pour créer un bot
• Copiez le token du bot (ressemble à 123456789:ABCdefGHIjklMNOpqrsTUVwxyz)

2. Obtenez le Chat ID :

• Démarrez une discussion avec votre bot
• Envoyez n'importe quel message au bot
• Ouvrez dans le navigateur : https://api.telegram.org/bot<YOUR_BOT_TOKEN>/getUpdates
• Trouvez dans la réponse "chat":{"id": - c'est votre Chat ID

3. Configurez les variables d'environnement :

Ajoutez les variables suivantes au fichier .env à la racine de votre projet :

TELEGRAM_BOT_TOKEN="123456789:ABCdefGHIjklMNOpqrsTUVwxyz"
TELEGRAM_CHAT_ID="123456789"

Si vous n'avez pas encore de fichier .env, créez-le :

touch .env
echo 'TELEGRAM_BOT_TOKEN="YOUR_BOT_TOKEN_HERE"' >> .env
echo 'TELEGRAM_CHAT_ID="YOUR_CHAT_ID_HERE"' >> .env

Important : Assurez-vous que .env est ajouté à .gitignore pour éviter de commiter les identifiants :

echo ".env" >> .gitignore

Utilisation

Option 1 : Workflow principal avec bouton

Entrez simplement une tâche dans le prompt et cliquez sur le bouton "Send Telegram Notification (with task)" :

• Entrez : "Refactoriser le module d'authentification et ajouter des tests"
• Cliquez sur le bouton du workflow
• L'agent terminera la tâche
• Vous recevrez une notification Telegram à l'achèvement

Option 2 : Utiliser dans d'autres workflows

Ajoutez une référence au workflow à la fin de votre propre workflow :

Your Workflow:
  icon: 🚀
  menu: buttons
  actions:
    - name: Do Something
      prompt: 'Analyze codebase'
      instantRun: true

    - name: Prepare notification
      prompt: '✅ Analysis complete! Found 3 possible improvements.'

    - 'Send Telegram Push'  # Reference by name

Structure de fichiers

Le workflow contient les fichiers suivants :

• telegram-push.yml - fichier principal avec deux workflows
• scripts/send-telegram.sh - script bash pour envoyer des messages
• .env.example - exemple de variables d'environnement
• README.md - documentation détaillée

La configuration est stockée dans le fichier .env à la racine du projet (pas dans le répertoire du workflow).

Exécution obligatoire des tests

Simple

Ce workflow garantit que les tests passeront avec succès. Si les tests échouent, il corrige automatiquement les erreurs et les exécute à nouveau dans une boucle jusqu'à ce que tous les tests passent.

Que fait ce workflow ?

Tests Must Pass est un workflow avec un bouton dans l'UI qui implémente l'exécution garantie des tests et la correction grâce à une gestion intelligente de l'état :

1. Exécute les tests - exécute npm test et capture la sortie avec le code de sortie
2. Efface en cas de succès - si le code de sortie est 0 (tests passés), efface le prompt
3. Corrige et répète - si le prompt n'est pas vide (tests échoués), corrige les problèmes et retourne à l'étape 1

Mécanique de la boucle

Le workflow utilise l'état du prompt pour gérer la boucle :

• Tests passés : Code de sortie = 0 → le prompt est effacé → l'étape "Fix and Loop" est ignorée (prompt vide) → le workflow se termine
• Tests échoués : Code de sortie ≠ 0 → le prompt contient la sortie d'erreur → "Fix and Loop" s'exécute → corrige les problèmes → retourne à "Run Tests"

Cette approche évite d'exécuter les tests deux fois dans les conditions et fournit à l'IA la sortie complète des tests pour l'analyse.

Structure du workflow

Tests Must Pass:
  icon: ✅
  menu: buttons
  actions:
    - name: 🧪 Run Tests
      prompt:
        command: 'npm test 2>&1; echo "Exit code: $?"'

    - name: ✓ Clear if Passed
      if:
        type: shell
        value: 'echo "$prompt" | grep -q "Exit code: 0"'
      prompt: ''

    - name: ❌ Fix and Loop
      if:
        type: js
        value: 'prompt.trim() !== ""'
      actions:
        - name: 🔧 Fix Test Issues
          prompt: |
            The tests failed with the following output:

            $prompt

            Analyze the test failures and fix all issues.
          instantRun: true
          actions:
            - 'Tests Must Pass'  # Reference to self = loop

Utilisation

Option 1 : Utilisation autonome

Cliquez simplement sur le bouton "Tests Must Pass" dans l'UI Supercode :

• Le workflow exécutera les tests
• Si les tests échouent, il corrigera automatiquement les problèmes
• Le processus se répète jusqu'à ce que tous les tests passent

Option 2 : Utiliser dans d'autres workflows (recommandé)

Ajoutez une référence au workflow à la fin de votre propre workflow pour garantir la qualité :

Your Workflow:
  icon: 🚀
  menu: buttons
  actions:
    - name: Implement Feature
      prompt: 'Implement user authentication'
      instantRun: true

    - name: Add Tests
      prompt: 'Write tests for authentication functionality'
      instantRun: true

    - 'Tests Must Pass'  # Guarantees test success before completion

Personnalisation

Le workflow utilise par défaut npm test. Pour d'autres exécuteurs de tests, changez simplement la commande dans la première étape :

# For Yarn
- name: 🧪 Run Tests
  prompt:
    command: 'yarn test 2>&1; echo "Exit code: $?"'

# For Python/pytest
- name: 🧪 Run Tests
  prompt:
    command: 'pytest 2>&1; echo "Exit code: $?"'

# For Go
- name: 🧪 Run Tests
  prompt:
    command: 'go test ./... 2>&1; echo "Exit code: $?"'

Ralph Wiggum aka "Ralph est une boucle Bash"

Simple

Ceci est un port de la technique canonique Ralph Wiggum de Claude Code - une méthodologie de développement IA itérative qui incarne la philosophie de l'itération persistante malgré les échecs.

Philosophie de Ralph Wiggum

La technique Ralph Wiggum est basée sur quatre principes clés :

1. Itération > Perfection - Ne cherchez pas des résultats parfaits au premier essai. Laissez la boucle affiner le travail.
2. Les erreurs sont des données - L'échec déterministe signifie que les erreurs sont prévisibles et informatives.
3. La compétence de l'opérateur compte - Le succès dépend de l'écriture de bons prompts, pas seulement d'avoir un bon modèle. Le LLM est un miroir des compétences de l'opérateur.
4. La persistance gagne - Continuez à essayer jusqu'au succès. La boucle gère automatiquement la logique de nouvelle tentative .

Comment ça fonctionne ?

La technique classique Ralph Wiggum dans Claude Code :

while :; do cat PROMPT.md | claude ; done

Dans Supercode Workflows, ceci est implémenté via deux workflows :

• Ralph Wiggum Loop (avec bouton) - initialise le compteur d'itération, définit le system prompt, démarre la boucle interne, nettoie le compteur à la fin
• Ralph Iteration (interne) - incrémente le compteur, effectue le travail, vérifie les conditions d'achèvement , et si pas complet - s'appelle récursivement

La boucle continue jusqu'à : signal d'achèvement, signal "stuck", ou maximum 20 itérations.

Compétence critique : écrire des prompts

Le succès avec Ralph dépend de l'écriture de bons prompts. Voici les meilleures pratiques :

Build a todo API and make it good.

Build a REST API for todos.

When complete:
- All CRUD endpoints working
- Input validation in place
- Tests passing (coverage > 80%)
- README with API docs

Output: <promise>COMPLETE</promise>

1. Critères d'achèvement clairs

Spécifiez toujours ce que signifie "terminé" et incluez un signal d'achèvement :

Implement user authentication system.

Completion criteria:
- JWT token generation and validation
- Login/logout endpoints
- Password hashing with bcrypt
- Auth middleware for protected routes
- Unit tests for all functions
- Integration tests for endpoints

Output: <promise>COMPLETE</promise>

2. Objectifs incrémentaux

Divisez les tâches complexes en phases :

Build e-commerce checkout flow:

Phase 1: Shopping cart
- Add/remove items
- Update quantities
- Calculate totals
- Tests for cart operations

Phase 2: Checkout process
- Shipping address form
- Payment integration
- Order confirmation
- Tests for checkout flow

Phase 3: Order management
- Order history page
- Order status tracking
- Email notifications
- Tests for order operations

Output <promise>COMPLETE</promise> when all phases done.

3. Modèle d'auto-correction

Guidez l'IA pour tester et corriger les problèmes :

Implement feature X following TDD:

1. Write failing tests for the feature
2. Implement the feature
3. Run the tests
4. If any fail, debug and fix
5. Refactor if needed
6. Repeat steps 3-5 until all tests green
7. Verify code quality (linting, formatting)

Output: <promise>COMPLETE</promise>

Utilisation

Utilisation de base :

1. Écrivez une tâche avec des critères d'achèvement clairs (voir exemples ci-dessus)
2. Incluez <promise>COMPLETE</promise> dans le prompt comme signal d'achèvement
3. Cliquez sur le bouton "Ralph Wiggum Loop"
4. Regardez Ralph itérer jusqu'à l'achèvement

Quand utiliser Ralph :

• ✅ Tâches complexes en plusieurs étapes nécessitant des itérations
• ✅ Tâches où la première tentative peut nécessiter un raffinement
• ✅ Workflows TDD (test, implémentation, correction, répétition)
• ✅ Développement exploratoire
• ✅ Tâches avec des étapes d'auto-vérification
• ❌ Tâches simples en une seule étape
• ❌ Tâches nécessitant une planification préalable minutieuse
• ❌ Tâches nécessitant des décisions humaines entre les étapes

Mécanismes de sécurité

Itérations maximales : Limite intégrée de 20 itérations empêche les boucles infinies sur des tâches impossibles.

Détection de "bloqué" : Si l'IA comprend qu'elle est bloquée, elle peut générer <promise>STUCK</promise> - cela arrêtera la boucle, et l'IA expliquera ce qui bloque la progression.

Compteur d'itérations : Chaque itération affiche le numéro actuel pour surveiller la progression : (Iteration: 5)

Structure du workflow

Ralph Wiggum Loop:           # Main workflow with button
  icon: 🔄
  menu: buttons
  actions:
    - Initialize Counter      # Set counter to 0
    - Activate Ralph Mode     # Set system prompt
    - Start Iteration Loop    # Call Ralph Iteration
    - Cleanup                 # Remove counter file

Ralph Iteration:             # Inner loop (no external trigger)
  actions:
    - Increment Counter       # counter++
    - Work on Task            # AI works on $initialPrompt
    - Loop Again              # If not ready, call Ralph Iteration

Deep Refactoring

Moyen

Un workflow complet en plusieurs étapes pour la refactorisation systématique de la base de code. Trouve automatiquement les duplications, planifie les améliorations et implémente les changements avec validation à chaque étape.

Que fait ce workflow ?

Deep Refactoring effectue un cycle complet de refactorisation en 6 étapes :

1. Analyser la structure du code - Cartographie tous les symboles clés, modèles architecturaux et relations de composants
2. Trouver les duplications explicites - Localise le code copié et les modèles répétés
3. Trouver les duplications implicites - Découvre les entités sémantiquement similaires qui peuvent être unifiées
4. Créer un plan de refactorisation - Génère un plan étape par étape avec priorisation des risques
5. Implémenter les refactorisations - Exécute les changements de manière incrémentale avec tests après chaque étape
6. Sauvegarder le résumé - Documente toutes les améliorations dans refactoring-summary.md

Fonctionnalités clés

Modes d'analyse spécialisés :

• SC:Architect - pour l'analyse structurelle et la planification
• SC:Refactor - pour trouver les duplications et les opportunités d'optimisation

Validation incrémentale (différenciateur clé) :

Le workflow utilise une boucle interne qui teste chaque refactorisation séparément :

• Implémente une refactorisation à la fois
• "Tests Must Pass" s'exécute après chaque changement
• La refactorisation suivante commence seulement si les tests passent
• Facile d'identifier quelle refactorisation spécifique a causé un problème (le cas échéant)
• Pas d'accumulation de régression

Sortie concise :

Pendant les étapes d'analyse, le workflow produit des points brefs (1-2 phrases par élément), gardant le processus ciblé et efficace.

Structure du workflow

Deep Refactoring:                    # Main workflow with button
  icon: 🏗️
  menu: buttons
  actions:
    - 🔍 Analyze Code Structure     # SC:Architect analysis
    - 🔎 Find Explicit Duplications # Find copied code
    - 🧩 Find Implicit Duplications # Find similar entities
    - 📋 Create Refactoring Plan    # Plan to .refactoring-plan.md
    - 🔧 Execute Refactorings Loop  # Start loop
    - 📝 Save Summary               # refactoring-summary.md
    - 🧹 Cleanup                    # Remove temp files

Deep Refactoring Iteration:          # Internal loop (no button)
  actions:
    - 📖 Read Current Plan          # Read the plan
    - 🔍 Check if More Items        # Check for [ ] in plan
    - 🛠️ Implement Next Item        # Execute + Tests Must Pass
    - Loop Recursion                # Next refactoring

Quand utiliser

Approprié pour :

• ✅ Bases de code avec dette technique accumulée
• ✅ Projets avec duplications de code notables
• ✅ Avant d'ajouter des fonctionnalités principales (base propre)
• ✅ Après la phase de prototypage rapide (consolidation)
• ✅ Cycles de maintenance réguliers

Meilleurs résultats quand :

• Vous avez une couverture de tests
• La base de code est sous contrôle de version
• Vous voulez une refactorisation systématique, pas ad-hoc

Résultat d'exemple

Avant la refactorisation :

src/
  UserCard.tsx        // 120 lines
  ProductCard.tsx     // 115 lines (95% similar)
  OrderCard.tsx       // 118 lines (93% similar)

Après le workflow :

src/
  components/
    Card.tsx          // 80 lines (generic component)
  UserCard.tsx        // 35 lines (uses Card)
  ProductCard.tsx     // 32 lines (uses Card)
  OrderCard.tsx       // 34 lines (uses Card)

Résultat : 353 lignes → 181 lignes, abstraction partagée, maintenance plus facile.

Trello Task Processor

Avancé

Un workflow entièrement automatisé pour traiter les tâches Trello : prend une tâche de la colonne Todo, l'exécute avec un agent IA, génère un résumé et la déplace vers Done.

Que fait ce workflow ?

Trello Task Processor est un workflow d'intégration avancé qui automatise tout le cycle de vie des tâches :

1. Charge une tâche de la colonne Todo de Trello (la marque comme "en cours")
2. Analyse et décompose la tâche en utilisant le mode SC:Architect
3. Crée un plan d'implémentation avec des cases à cocher dans un fichier
4. Exécute étape par étape via une boucle interne avec tests après chaque étape
5. Génère un résumé du travail accompli
6. Déplace vers Done et ajoute le résumé comme commentaire

Fonctionnalités clés

Automatisation du cycle complet des tâches :

• De la collecte de tâches au statut Done - sans intervention manuelle
• Indicateurs visuels dans Trello (couleurs de carte, préfixes)
• Documentation automatique des résultats dans les commentaires

Traitement intelligent :

• Mode SC:Architect pour l'analyse et la planification
• Décomposition des tâches complexes en étapes atomiques
• Implémentation cyclique avec validation

Fiabilité :

• Tests après chaque étape via "Tests Must Pass"
• Gestion des erreurs et cas limites
• État d'exécution transparent

Cycle de vie de la tâche

1. Tâche dans Todo - carte Trello régulière
2. Collectée pour travail - préfixe [🤖 AI Working] ajouté, la carte devient jaune
3. Analyse et planification - L'IA étudie la tâche, crée un plan
4. Implémentation - exécution étape par étape avec tests
5. Terminée - déplacée vers Done, la carte devient verte, commentaire de résumé ajouté

Structure du workflow

Trello Task Processor:           # Main workflow with button
  icon: 📋
  menu: buttons
  actions:
    - 🔍 Load Task from Trello      # Load from Todo
    - ❌ No Tasks Available         # If empty - exit
    - ✅ Process Task               # If available:
      - 📊 Parse Task Data          # Parse JSON
      - 🧠 Analyze & Decompose      # SC:Architect analysis
      - 📋 Create Plan              # Plan to trello-task-plan.md
      - 🛠️ Execute Implementation   # Start loop
      - 📝 Generate Summary         # Brief summary
      - ✅ Complete Task            # Prepare data
      - 📤 Move to Done             # Move + comment
      - 🧹 Cleanup                  # Clean up files

Trello Task Implementation Loop: # Internal loop
  - 📖 Read Plan
  - 🔍 Check if More Steps
    if: has [ ] steps
    - 🚀 Implement Next Step
      - Tests Must Pass            # After each!
      - Loop recursion             # Next step

Configuration

1. Obtenez les clés API Trello :

• API Key : https://trello.com/app-key
• Token : cliquez sur le lien "Token" sur la page ci-dessus
• Board ID : ouvrez votre tableau dans le navigateur, l'URL aura /b/BOARD_ID/...

2. Ajoutez à .env :

TRELLO_API_KEY=your_api_key_here
TRELLO_API_TOKEN=your_token_here
TRELLO_BOARD_ID=your_board_id_here

3. Assurez-vous d'avoir des colonnes :

• Todo - pour les nouvelles tâches
• Done - pour les tâches terminées

Exemple de workflow

Tâche dans Trello :

Title: Add user authentication

Description:
Implement JWT-based authentication with:
- Login endpoint
- Token validation middleware
- Password hashing with bcrypt
- Tests for auth flow

Ce qui se passera :

1. La carte devient [🤖 AI Working] Add user authentication (jaune)
2. L'IA analyse la tâche et crée un plan avec 6-7 étapes
3. Chaque étape : implémentation → tests → étape suivante
4. Après achèvement, la carte se déplace vers Done (vert)
5. Commentaire ajouté : "✅ Task completed by AI (2026-01-15) - Implemented JWT auth with login endpoint (auth.ts), middleware (authMiddleware.ts), bcrypt hashing. All tests passing, coverage 92%."

Conseils d'utilisation

1. Descriptions détaillées - plus de contexte dans la description = meilleurs résultats
2. Tâches atomiques - une tâche = une fonctionnalité/correction de bug
3. Réviser le code - faire une révision de code après l'exécution
4. Avoir des tests - le workflow s'appuie sur les tests pour la validation
5. Automatisation - vous pouvez ajouter runEvery: "5m" pour le traitement automatique de la file d'attente