⚡ Guía de instalación

3 Habilidades de Claude Code
que debes instalar ya

Copia los comandos, pégalos en tu terminal y transforma tu flujo de trabajo con Claude Code en minutos.

⚠️ Antes de empezar

Necesitas tener Claude Code instalado en tu terminal. Si aún no lo tienes, instálalo desde la documentación oficial de Anthropic: code.claude.com

También necesitas Node.js 18+ instalado en tu sistema y una suscripción Pro, Max, Team o Enterprise de Claude.

01
Desarrollo

Superpowers

Claude crea subagentes que revisan cada parte del proceso. Antes de entregarte algo, revisan el código, lo prueban, corrigen errores y luego avanzan. Las tareas se reparten entre subagentes especializados que comprueban que todo funcione.

  • Test-Driven Development
  • Subagentes automáticos
  • Revisión de código en 2 fases
  • Debugging sistemático
  • Brainstorming + planificación
  • 120K+ stars en GitHub
Paso 1 · Añadir el marketplace
/plugin marketplace add obra/superpowers-marketplace
Paso 2 · Instalar el plugin
/plugin install superpowers@superpowers-marketplace
3

Cierra y reinicia Claude Code para que se activen las habilidades.

4

Verifica con /help que aparezcan los comandos /superpowers:brainstorm, /superpowers:write-plan y /superpowers:execute-plan.

obra/superpowers
02
Optimización

Context Optimizer

Optimiza el uso de tokens y el contexto de tu conversación. Lo reduce de forma inteligente para que sea más barato, gastes menos tokens y no se rompa por una ventana de contexto demasiado grande. Podrás seguir usando Claude Code más tiempo sin perder información.

  • Compresión de contexto
  • Ahorro de tokens
  • Patrones de optimización
  • Memoria de sesiones
  • Multi-agente patterns
  • 13 skills incluidas
Opción A · Plugin completo (13 skills)
/plugin marketplace add muratcankoylan/Agent-Skills-for-Context-Engineering
Opción B · Solo context-optimization
# Descarga solo el skill de optimización mkdir -p .claude/skills curl -o .claude/skills/context-optimization.md \ https://raw.githubusercontent.com/muratcankoylan/Agent-Skills-for-Context-Engineering/main/skills/context-optimization/SKILL.md

El skill se activa automáticamente cuando Claude detecta que el contexto lo necesita. No tienes que hacer nada extra.

muratcankoylan/Agent-Skills-for-Context-Engineering
03
Diseño

UI UX Pro Max

Diseña páginas web de calidad profesional. Solo describes tu industria y el tipo de web que quieres, y el skill ya conoce los colores, tipografías y patrones probados en la industria. Olvídate de las páginas con aspecto de "vibe-coded". Diseños que funcionan y venden.

  • 50+ estilos de diseño
  • 161 paletas de colores
  • 57 combinaciones de fuentes
  • 10 stacks soportados
  • 99 guías de UX
  • 23K+ stars en GitHub
Paso 1 · Añadir el marketplace
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
Paso 2 · Instalar el plugin
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

El skill se activa automáticamente cuando le pidas diseñar UI. Solo di algo como "Build a landing page for my SaaS product" y el skill se encarga de todo.

nextlevelbuilder/ui-ux-pro-max-skill
+
Bonus · Animaciones

Emil Kowalski Skill

Combinando UI UX Pro Max con este skill creado por Emil Kowalski (ingeniero de diseño en Linear, creador de Sonner y Vaul), tus páginas web tendrán animaciones profesionales de otro nivel. Principios de motion design, easing correcto, performance y accesibilidad.

  • Animaciones CSS + Framer Motion
  • Spring physics
  • Micro-interacciones
  • Accesibilidad integrada
Instalar con npx
npx skills add emilkowalski/skill
💡

Emil recomienda usarlo caso por caso (no tenerlo siempre activo). Pídele a Claude algo como "use the animation skill to review my frontend" cuando lo necesites.

emilkowalski/skill

🚀 Combo recomendado

Instala UI UX Pro Max + Emil Kowalski Skill juntas para conseguir diseños profesionales con animaciones de nivel producción. Primero el skill de UI genera el sistema de diseño completo, y luego el de animaciones le da vida con motion design de calidad.