Claude Code Superpowers: How to Add Skills That Plan Before Coding

I’ve been building skillcraft.ai with Claude for the past few months. Claude’s great at writing code fast, but it has a problem: it skips steps constantly.

I’ll ask Claude to help migrate something big, and it starts suggesting changes immediately. No planning phase. No “let me find every file that needs updating first.” Just diving straight into code changes and hoping for the best.

That’s how you miss files. That’s how you ship bugs.

Superpowers is an MCP that fixes this. It’s basically a library of structured workflows—testing, debugging, planning—that Claude Code loads automatically and actually follows.

A skill in Claude Code is a folder with instructions, scripts, and resources that Claude loads when needed. It’s part of Anthropic’s Agent Skills feature that works across Claude apps, Claude Code, and the API. Each skill defines when it applies, what process to follow, and what shortcuts not to take. When you start a task that matches a skill, Claude scans available skills, finds the match, and loads it automatically.

I use three slash commands constantly:

I added Superpowers to my CLAUDE.md so it loads automatically on every session:

# Project Setup
Use the Superpowers MCP for all development work. Load it at session start.

This is huge for token efficiency—instead of Claude burning through context trying to hold everything in memory, it splits work into 5-minute chunks and writes progress to markdown files. You never lose context between sessions because the plan is right there in a file, not locked in some conversation that hit the token limit three hours ago.

Here’s what the generated files look like:

~/.config/superpowers/
└── plans/
    └── nextjs-16-migration/
        ├── PLAN.md                  # Complete migration roadmap
        ├── progress.md              # Current status and completed tasks
        └── verification.md          # Test commands and success criteria

The PLAN.md file contains everything:

Skillcraft runs on Next.js, and I wanted to enable the new cacheComponents feature in Next.js 16. This thing breaks patterns everywhere—API routes that access searchParams, components using new Date(), context providers without Suspense boundaries.

I ran /superpowers:write-plan and got back a 500-line plan. Not some vague outline, but a complete roadmap: all 23 API route files that needed changes, the two components using new Date() that would break prerendering, specific context providers needing Suspense boundaries, and a 4-day timeline with testing checkpoints.

The plan included verification commands for each phase:

# Test specific endpoints after API refactoring
curl http://localhost:3000/api/leaderboard
curl http://localhost:3000/api/courses/recent
curl http://localhost:3000/api/topics

It documented before/after patterns:

// Before: Incompatible with cacheComponents
export const runtime = 'nodejs'
export const dynamic = 'force-dynamic'
// After: Clean (API routes are dynamic by default)
// Note: With cacheComponents enabled, API routes are dynamic by default

It even defined success criteria (build succeeds, CLS stays at 0.000, Lighthouse score ≥ 95) and a rollback plan.

Without this, I would’ve enabled cacheComponents, hit errors, fixed them one by one, and definitely missed edge cases. The migration would’ve taken days of reactive debugging. With the plan, I had a complete roadmap before touching any code.

The library includes multiple skills for testing, debugging, and development workflows:

These skills literally block you from skipping steps. No more “I think it works” without proof.

If you’re doing a migration and need to find every instance of a pattern, Superpowers will find them all. If you’re debugging and about to guess at a fix, it stops you and makes you investigate the root cause first. If missing one file will break production, it makes you verify everything before you’re done.

Installation

Superpowers works with Claude Code (the CLI tool). Install it via the Plugin Marketplace:

# In Claude Code
/plugin marketplace add obra/superpowers-marketplace
/plugin install superpowers@superpowers-marketplace

Or add it manually to .claude/plugins.json:

{
  "plugins": {
    "superpowers": {
      "type": "github",
      "owner": "obra",
      "repo": "superpowers"
    }
  }
}

When Claude Code starts, you’ll see confirmation that skills loaded. Then just use the slash commands: /superpowers:brainstorm before starting complex features, /superpowers:write-plan for migrations or multi-file refactors, /superpowers:execute-plan to run those plans in batches.