00:00:00Esto es Superpowers, el marco de habilidades agénticas con más de 50.000 estrellas en GitHub
00:00:05que evita que tu agente de programación se precipite y cometa errores obligándolo a seguir un
00:00:10flujo de trabajo estructurado que incluye lluvia de ideas, implementación, desarrollo basado en pruebas red-green,
00:00:15e incluso el uso de subagentes para ejecutar tareas y revisar código en paralelo.
00:00:19Pero, ¿qué lo diferencia de usar simplemente el modo de planificación o algo como el desarrollo basado en especificaciones?
00:00:24Suscríbete y vamos a descubrirlo.
00:00:27Este es un proyecto llamado XDL, una herramienta de línea de comandos para descargar vídeos de Twitter.
00:00:32Quiero crear una interfaz web para esta herramienta que no solo descargue vídeos al navegador desde
00:00:38una URL, sino que también la use para crear un artículo. Utilicé Opus 4.6 con el modo plan en Claude Code
00:00:46para intentar crear esa interfaz. Y esto es lo que hizo.
00:00:50Lamentablemente, cuando ejecuté el código por primera vez, surgieron algunos problemas.
00:00:53Así que revisé el código para intentar solucionar esos fallos, y espero que ya estén resueltos.
00:00:58Ahora parece que todo está funcionando correctamente.
00:01:00Voy a ir a Twitter y copiar el enlace de este tuit.
00:01:03Lo siento, Kevin. Lo pego aquí y veremos si descarga el vídeo.
00:01:06Está extrayendo el contenido y ha logrado descargarlo.
00:01:09Si hago clic aquí, se abre en una pestaña nueva; no es lo que esperaba, pero bueno, funciona.
00:01:15Y si intento crear un artículo a partir de ese tuit, lo pego aquí y empieza a generar,
00:01:20podemos ver los pasos que sigue. Primero extrae el vídeo y después
00:01:24se encarga del audio. Una vez terminado, obtenemos el artículo en un Markdown perfectamente formateado,
00:01:29lo cual es realmente impresionante. Si observamos la misma tarea realizada con Opus 4.6,
00:01:35pero usando Superpowers, ya vemos que el diseño es mucho mejor, con opciones para
00:01:39descargar y generar un artículo. Pegamos la misma URL de Twitter, damos a descargar y, de nuevo,
00:01:45extrae el vídeo, pero esta vez se descarga en mi navegador y puedo hacer clic para verlo.
00:01:51Ahora, si usamos el mismo tuit para generar el artículo aquí, podemos ver los pasos
00:01:56que se están llevando a cabo. Una vez finalizados todos los pasos, envía el artículo al navegador.
00:02:01Tengo la opción de copiar esto y pegarlo donde quiera. Ya se nota que la
00:02:06versión con Superpowers es superior a la versión sin ella. Analizaremos el
00:02:10código más adelante, pero primero veamos cómo lo hice. Tras
00:02:15instalar el plugin de Superpowers, tendremos nuevos comandos como brainstorm,
00:02:20execute plan y write the plan, que redacta el plan a partir de la lluvia de ideas. En realidad,
00:02:25solo necesitamos este comando, ya que Superpowers nos guiará a la siguiente etapa al terminar la anterior.
00:02:31Ejecutémoslo y peguemos un prompt. Pulsamos Enter. Ahora carga la
00:02:35habilidad de brainstorming y comienza a entender el proyecto actual. Aquí me hará algunas
00:02:39preguntas para mejorar el plan. Responderé que use React más Vite, y luego pediré que sea
00:02:44paso a paso para la generación del artículo. Ahora me pide confirmar la arquitectura,”
00:02:49que me parece bien. También pregunta por el diseño y luego por los endpoints y la lógica
00:02:54del servidor. Tras responder a todo, procede a crear un plan, que
00:02:58ha guardado en este directorio. Si revisamos el plan, vemos que es muy detallado,
00:03:03con una visión general, el stack, la estructura, el diseño, los endpoints de la API y mucho
00:03:09más. De hecho, es muy similar a lo que Claude Code nos daría al escribir su propio plan.
00:03:15Pero el siguiente paso es donde la cosa se pone interesante. Tras confirmar el plan y decir que estoy
00:03:19listo para la implementación, procede a escribir otro plan de ejecución. Lo hace
00:03:25analizando primero el diseño original que creamos. Luego lo divide en
00:03:31tareas más pequeñas y manejables que pueden completar subagentes en paralelo. Ya ha escrito
00:03:36el otro plan y lo ha guardado de nuevo en el directorio de planes. Si lo consultamos,
00:03:41vemos que, en lugar de una visión general de la arquitectura, divide todo en
00:03:46tareas. Aquí hay una tarea para preparar el proyecto, con sus pasos internos.
00:03:52Hay otra para crear el esqueleto del cliente con Vite y React, también con sus pasos, y
00:03:57así sucesivamente con cada tarea necesaria. A partir de aquí, Superpowers
00:04:03me pide elegir un enfoque: ¿prefiero el guiado por subagentes o el de sesiones
00:04:08paralelas? En este, se usa un subagente distinto para cada tarea sin confirmación humana.
00:04:14El otro creará una sesión adicional a partir de la principal, completará las tareas por lotes
00:04:18y me preguntará si estoy satisfecho con cada lote antes de continuar.
00:04:24Para ir más rápido, elegiré el enfoque de subagentes. Ahora ha
00:04:28creado las tareas necesarias para este proyecto. Por desgracia,
00:04:32estas tareas se ven distintas a las anteriores porque olvidé grabar la pantalla la
00:04:36primera vez. He vuelto a empezar, pero con el mismo prompt. Lo que ocurre ahora
00:04:41es que cada subagente crea primero una prueba. Escribe una prueba que va a fallar y luego
00:04:47escribe el código mínimo para que pase. Al terminar de trabajar en la funcionalidad,
00:04:52verifica que esta cumpla los requisitos especificados en el plan y pasa a
00:04:57revisar la calidad del código, comprobando que sea limpio y fácil de mantener. Ya ha
00:05:02terminado casi todas las tareas. Ahora va a probarlo todo. Y aquí está: ha
00:05:06completado todo e incluso ha encontrado y corregido un error en el proceso. Si
00:05:11miramos el código, está dividido en servidor y código fuente. Supongo que “source” es el frontend.
00:05:16Tenemos varios componentes: la pestaña del artículo, la de descarga, etc. Si miramos
00:05:21el progreso de la canalización, tenemos las etapas en un objeto, una interfaz de TypeScript. Parece que usa
00:05:27algún tipo de CSS-in-JS para el estilo. Pensándolo bien, debí haber pedido Tailwind,
00:05:32pero esto sirve. Y miren esto: algo que el modo plan de Opus no haría por defecto.
00:05:37En cada paso del camino, Superpowers ha hecho un commit de git: desde la estructura inicial
00:05:43hasta el envoltorio de la CLI, pasando por Hono y todo lo demás. Si reviso el
00:05:48estado de git, no tengo nada que confirmar porque la rama está limpia, lo que me ahorra mucho trabajo.
00:05:53Quizás se pregunten dónde están los archivos de prueba. Hablaré de eso más tarde.
00:05:57Sinceramente, creo que Superpowers es un proyecto impresionante. Me encanta que se
00:06:02centre en las habilidades. Tiene unas 14, que hacen de todo: desde idear y planificar
00:06:08hasta implementar y revisar el código. Me gusta mucho su enfoque en TDD,
00:06:12específicamente el TDD red-green, donde escribe primero las pruebas para que fallen (en rojo)
00:06:18y luego el código mínimo para superarlas. Pero a veces esto no funciona porque el agente decide
00:06:24no seguirlo. Miren esto: aquí la habilidad de redacción del plan decía explícitamente TDD y,
00:06:31por alguna razón, Claude no lo hizo. Le pedí que lo confirmara y admitió que fue su culpa.
00:06:36La habilidad indica TDD y aun así no lo hizo. Al preguntarle por qué, respondió
00:06:42que se centró en publicar rápido en lugar de seguir el proceso. No sé por qué sucede esto
00:06:47con un modelo de última generación, pero demuestra que no hay que aceptar ciegamente lo que
00:06:53hace el modelo. Es vital leer el plan y asegurar que hace lo que esperas.
00:06:57Esta es una de las razones por las que no usaré Superpowers para todos mis
00:07:03proyectos o requisitos, sobre todo si son pequeños. Si es una función sencilla
00:07:08que quiero añadir, prefiero interactuar con Claude para planearla, escribir un documento de plan
00:07:13y luego limpiar el contexto para ejecutarlo. Pero si me encuentro en una situación
00:07:19en la que debo implementar múltiples funciones, algo que ocurre de vez en cuando, Superpowers
00:07:24es una herramienta excelente porque desglosa muy bien requisitos complejos en fragmentos
00:07:31que los subagentes pueden completar. Sí, la función de tareas de Claude Code puede hacer algo similar,
00:07:37pero me encanta que Superpowers cree un plan para ello antes de implementar el código.
00:07:43Ahora, ¿cómo se compara Superpowers con herramientas como Beads, SpecKit o toda la arquitectura
00:07:48de desarrollo basado en especificaciones? Para mí, parece una versión más sencilla de planificar antes
00:07:53de ejecutar. No tan simple como Ralph, por supuesto, pero quizás en un punto intermedio
00:07:58entre Ralph y Beads. Me da la sensación de que cada vez hay más herramientas de este tipo
00:08:02que ayudan a escribir mejor código con agentes de IA. Eso es positivo,
00:08:06pero cada persona es un mundo. Creo que es bueno tomar un poco de aquí y de allá
00:08:10y acabar creando un flujo de trabajo propio que sea perfecto para ti. Quizás haga eso mismo
00:08:16en el futuro. Y si hay suerte, grabaré un vídeo para mostrarles exactamente cómo lo hice.