Iniciar sesión

Ejemplos de Workflows

Casi a diario desde el lanzamiento de Workflows 2.0, seguimos sorprendidos por los increíbles workflows creados por la comunidad de Supercode. Sin embargo, nuestra documentación de Workflows se ve extensa y el número de características puede ser un poco intimidante para los nuevos usuarios, haciendo que no esté claro por dónde empezar y cómo evitar quedarse atascado.

Decidimos que la mejor ayuda es simplemente mostrar ejemplos de Workflows reales que se pueden descargar con un clic y usar en tu proyecto. Luego - estudiar cómo funcionan y comenzar a crear tus propias soluciones para tus tareas específicas.

Destacamos 5 ejemplos:

  • (Muy simple) Enviar mensaje de Telegram al final del trabajo
  • (Simple) Ejecución obligatoria de pruebas
  • (Simple) Ralph Wiggum aka "Ralph es un bucle Bash" - resolución iterativa de tareas
  • (Medio) Refactorización en múltiples pasos
  • (Avanzado) Procesamiento automático de tareas de Trello - toma de Todo, ejecuta, mueve a Done

Enviar mensaje de Telegram al final del trabajo
Muy simple

Este ejemplo muestra cómo crear un workflow simple para enviar notificaciones de Telegram después de que el agente complete su trabajo. Perfecto para tareas de larga duración cuando quieres recibir una notificación sobre su finalización.

¿Qué hace este workflow?

En este ejemplo, creamos dos workflows:

1. Send Telegram Notification (with task) - workflow principal con un botón en la UI. Cuando haces clic:

  • Ejecuta tu prompt actual
  • Envía una notificación a Telegram
  • Limpia el prompt

2. Send Telegram Push - workflow auxiliar sin botón, diseñado para usarse como el último paso en otros workflows. Toma un mensaje de $prompt, lo envía, y limpia el prompt.

Workflows de Telegram

Configuración

1. Crea un bot de Telegram:

  • Abre Telegram y busca @BotFather
  • Envía el comando /newbot
  • Sigue las instrucciones para crear un bot
  • Copia el token del bot (se ve como 123456789:ABCdefGHIjklMNOpqrsTUVwxyz)

2. Obtén el Chat ID:

  • Inicia un chat con tu bot
  • Envía cualquier mensaje al bot
  • Abre en el navegador: https://api.telegram.org/bot<YOUR_BOT_TOKEN>/getUpdates
  • Encuentra en la respuesta "chat":{"id": - este es tu Chat ID

3. Configura las variables de entorno:

Agrega las siguientes variables al archivo .env en la raíz de tu proyecto:

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

Si aún no tienes un archivo .env, créalo:

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

Importante: Asegúrate de que .env esté agregado a .gitignore para evitar confirmar credenciales:

echo ".env" >> .gitignore

Uso

Opción 1: Workflow principal con botón

Simplemente ingresa una tarea en el prompt y haz clic en el botón "Send Telegram Notification (with task)" :

  • Ingresa: "Refactorizar módulo de autenticación y agregar pruebas"
  • Haz clic en el botón del workflow
  • El agente completará la tarea
  • Recibirás una notificación de Telegram al finalizar

Opción 2: Usar en otros workflows

Agrega una referencia al workflow al final de tu propio 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

Estructura de archivos

El workflow contiene los siguientes archivos:

  • telegram-push.yml - archivo principal con dos workflows
  • scripts/send-telegram.sh - script bash para enviar mensajes
  • .env.example - ejemplo de variables de entorno
  • README.md - documentación detallada

La configuración se almacena en el archivo .env en la raíz del proyecto (no en el directorio del workflow).

Ejecución obligatoria de pruebas
Simple

Este workflow asegura que las pruebas pasen con éxito. Si las pruebas fallan, corrige automáticamente los errores y las ejecuta de nuevo en un bucle hasta que todas las pruebas pasen.

¿Qué hace este workflow?

Tests Must Pass es un workflow con un botón en la UI que implementa la ejecución garantizada de pruebas y corrección a través de una gestión inteligente del estado:

  1. Ejecuta pruebas - ejecuta npm test y captura la salida con código de salida
  2. Limpia en caso de éxito - si el código de salida es 0 (pruebas pasaron), limpia el prompt
  3. Corrige y repite - si el prompt no está vacío (pruebas fallaron), corrige problemas y vuelve al paso 1

Mecánica del bucle

El workflow usa el estado del prompt para gestionar el bucle:

  • Pruebas pasaron: Código de salida = 0 → el prompt se limpia → el paso "Fix and Loop" se omite (prompt vacío) → el workflow se completa
  • Pruebas fallaron: Código de salida ≠ 0 → el prompt contiene la salida de error → "Fix and Loop" se ejecuta → corrige problemas → vuelve a "Run Tests"

Este enfoque evita ejecutar las pruebas dos veces en condiciones y proporciona a la IA la salida completa de las pruebas para análisis.

Estructura del 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

Uso

Opción 1: Uso independiente

Simplemente haz clic en el botón "Tests Must Pass" en la UI de Supercode:

  • El workflow ejecutará las pruebas
  • Si las pruebas fallan, corregirá automáticamente los problemas
  • El proceso se repite hasta que todas las pruebas pasen

Opción 2: Usar en otros workflows (recomendado)

Agrega una referencia al workflow al final de tu propio workflow para garantizar la calidad:

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

Personalización

El workflow usa por defecto npm test. Para otros ejecutores de pruebas, simplemente cambia el comando en el primer paso:

# 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 es un bucle Bash"
Simple

Este es un port de la técnica canónica Ralph Wiggum de Claude Code - una metodología de desarrollo de IA iterativa que encarna la filosofía de iteración persistente a pesar de los fracasos.

Ralph Wiggum es un personaje de Los Simpson, conocido por sus intentos persistentes pero caóticos de ayudar. La técnica encarna este espíritu: iteración determinista que puede parecer caótica pero finalmente hace el trabajo.

Filosofía de Ralph Wiggum

La técnica Ralph Wiggum se basa en cuatro principios clave:

  1. Iteración > Perfección - No busques resultados perfectos en el primer intento. Deja que el bucle refine el trabajo.
  2. Los errores son datos - El fracaso determinista significa que los errores son predecibles e informativos.
  3. La habilidad del operador importa - El éxito depende de escribir buenos prompts, no solo de tener un buen modelo. El LLM es un espejo de las habilidades del operador.
  4. La persistencia gana - Sigue intentando hasta el éxito. El bucle maneja automáticamente la lógica de reintento .

¿Cómo funciona?

La técnica clásica Ralph Wiggum en Claude Code:

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

En Supercode Workflows, esto se implementa a través de dos workflows:

  • Ralph Wiggum Loop (con botón) - inicializa el contador de iteración, establece el system prompt, inicia el bucle interno, limpia el contador al final
  • Ralph Iteration (interno) - incrementa el contador, realiza el trabajo, verifica las condiciones de finalización , y si no está completo - se llama a sí mismo recursivamente

El bucle continúa hasta: señal de finalización, señal "stuck", o máximo 20 iteraciones.

Habilidad crítica: escribir prompts

El éxito con Ralph depende de escribir buenos prompts. Aquí están las mejores prácticas:

❌ Mal prompt

Build a todo API and make it good.

✅ Buen prompt

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. Criterios de finalización claros

Siempre especifica qué significa "listo" e incluye una señal de finalización:

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. Objetivos incrementales

Divide tareas complejas en fases:

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. Patrón de auto-corrección

Guía a la IA para probar y corregir problemas:

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>

Uso

Uso básico:

  1. Escribe una tarea con criterios de finalización claros (ver ejemplos arriba)
  2. Incluye <promise>COMPLETE</promise> en el prompt como señal de finalización
  3. Haz clic en el botón "Ralph Wiggum Loop"
  4. Observa a Ralph iterar hasta la finalización

Cuándo usar Ralph:

  • ✅ Tareas complejas de múltiples pasos que requieren iteraciones
  • ✅ Tareas donde el primer intento puede necesitar refinamiento
  • ✅ Flujos de trabajo TDD (prueba, implementa, corrige, repite)
  • ✅ Desarrollo exploratorio
  • ✅ Tareas con pasos de auto-verificación
  • ❌ Tareas simples de un solo paso
  • ❌ Tareas que requieren planificación cuidadosa previa
  • ❌ Tareas que requieren decisiones humanas entre pasos

Mecanismos de seguridad

Iteraciones máximas: Límite incorporado de 20 iteraciones previene bucles infinitos en tareas imposibles.

Detección de "atascado": Si la IA entiende que está atascada, puede generar <promise>STUCK</promise> - esto detendrá el bucle, y la IA explicará qué está bloqueando el progreso.

Contador de iteraciones: Cada iteración muestra el número actual para monitorear el progreso: (Iteration: 5)

Estructura del 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
Medio

Un workflow completo de múltiples pasos para la refactorización sistemática del código base. Encuentra automáticamente duplicaciones, planifica mejoras e implementa cambios con validación en cada paso.

¿Qué hace este workflow?

Deep Refactoring realiza un ciclo completo de refactorización en 6 etapas:

  1. Analizar estructura del código - Mapea todos los símbolos clave, patrones arquitectónicos y relaciones de componentes
  2. Encontrar duplicaciones explícitas - Localiza código copiado y patrones repetidos
  3. Encontrar duplicaciones implícitas - Descubre entidades semánticamente similares que se pueden unificar
  4. Crear plan de refactorización - Genera un plan paso a paso con priorización de riesgos
  5. Implementar refactorizaciones - Ejecuta cambios incrementalmente con pruebas después de cada paso
  6. Guardar resumen - Documenta todas las mejoras en refactoring-summary.md

Características clave

Modos de análisis especializados:

  • SC:Architect - para análisis estructural y planificación
  • SC:Refactor - para encontrar duplicaciones y oportunidades de optimización

Validación incremental (diferenciador clave):

El workflow usa un bucle interno que prueba cada refactorización por separado:

  • Implementa una refactorización a la vez
  • "Tests Must Pass" se ejecuta después de cada cambio
  • La siguiente refactorización comienza solo si las pruebas pasan
  • Fácil de identificar qué refactorización específica causó un problema (si lo hay)
  • Sin acumulación de regresión

Salida concisa:

Durante las etapas de análisis, el workflow produce puntos breves (1-2 oraciones por elemento), manteniendo el proceso enfocado y eficiente.

Estructura del 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

Cuándo usar

Adecuado para:

  • ✅ Bases de código con deuda técnica acumulada
  • ✅ Proyectos con duplicaciones de código notables
  • ✅ Antes de agregar características principales (base limpia)
  • ✅ Después de la fase de prototipado rápido (consolidación)
  • ✅ Ciclos de mantenimiento regulares

Mejores resultados cuando:

  • Tienes cobertura de pruebas
  • La base de código está bajo control de versiones
  • Quieres refactorización sistemática, no ad-hoc

Resultado de ejemplo

Antes de la refactorización:

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

Después del 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)

Resultado: 353 líneas → 181 líneas, abstracción compartida, mantenimiento más fácil.

Trello Task Processor
Avanzado

Un workflow completamente automatizado para procesar tareas de Trello: toma una tarea de la columna Todo, la ejecuta con un agente de IA, genera un resumen y la mueve a Done.

¿Qué hace este workflow?

Trello Task Processor es un workflow de integración avanzado que automatiza todo el ciclo de vida de las tareas:

  1. Carga una tarea de la columna Todo de Trello (la marca como "en progreso")
  2. Analiza y descompone la tarea usando el modo SC:Architect
  3. Crea un plan de implementación con casillas de verificación en un archivo
  4. Ejecuta paso a paso a través de un bucle interno con pruebas después de cada paso
  5. Genera un resumen del trabajo completado
  6. Mueve a Done y agrega el resumen como comentario
Tarea de Trello

Características clave

Automatización del ciclo completo de tareas:

  • Desde la recolección de tareas hasta el estado Done - sin intervención manual
  • Indicadores visuales en Trello (colores de tarjeta, prefijos)
  • Documentación automática de resultados en comentarios

Procesamiento inteligente:

  • Modo SC:Architect para análisis y planificación
  • Descomposición de tareas complejas en pasos atómicos
  • Implementación cíclica con validación
Estado de tarea de Trello

Confiabilidad:

  • Pruebas después de cada paso a través de "Tests Must Pass"
  • Manejo de errores y casos extremos
  • Estado de ejecución transparente

Ciclo de vida de la tarea

  1. Tarea en Todo - tarjeta regular de Trello
  2. Recogida para trabajo - prefijo [🤖 AI Working] agregado, la tarjeta se vuelve amarilla
  3. Análisis y planificación - La IA estudia la tarea, crea un plan
  4. Implementación - ejecución paso a paso con pruebas
  5. Completada - movida a Done, la tarjeta se vuelve verde, se agrega comentario de resumen
Tarea de Trello completada

Estructura del 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

Configuración

1. Obtén las claves API de Trello:

  • API Key: https://trello.com/app-key
  • Token: haz clic en el enlace "Token" en la página anterior
  • Board ID: abre tu tablero en el navegador, la URL tendrá /b/BOARD_ID/...

2. Agrega a .env:

TRELLO_API_KEY=your_api_key_here
TRELLO_API_TOKEN=your_token_here
TRELLO_BOARD_ID=your_board_id_here

3. Asegúrate de tener columnas:

  • Todo - para nuevas tareas
  • Done - para tareas completadas

Ejemplo de workflow

Tarea en Trello:

Title: Add user authentication

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

Qué sucederá:

  1. La tarjeta se convierte en [🤖 AI Working] Add user authentication (amarilla)
  2. La IA analiza la tarea y crea un plan con 6-7 pasos
  3. Cada paso: implementación → pruebas → siguiente paso
  4. Después de la finalización, la tarjeta se mueve a Done (verde)
  5. Se agrega comentario: "✅ 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%."

Consejos de uso

  1. Descripciones detalladas - más contexto en la descripción = mejores resultados
  2. Tareas atómicas - una tarea = una característica/corrección de error
  3. Revisar código - hacer revisión de código después de la ejecución
  4. Tener pruebas - el workflow se basa en pruebas para validación
  5. Automatización - puedes agregar runEvery: "5m" para procesamiento automático de cola