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

Superpowers is an MCP plugin for Claude Code that enforces planning, TDD, and debugging workflows. Setup guide with real examples.

Trevor I. Lasn Trevor I. Lasn
· 5 min read
Building 0xinsider, real-time Polymarket analytics for sports and esports.

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:

CommandWhat it does
/superpowers:brainstormRefining rough ideas before coding
/superpowers:write-planCreating detailed implementation plans
/superpowers:execute-planRunning plans in batches with review checkpoints

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:

SectionWhat it includes
OverviewWhat needs to change and why
Phase 1API route refactoring (23 files)
Phase 2Component time-sensitivity fixes
Phase 3Context provider Suspense boundaries
Phase 4Enable cacheComponents
Phase 5Testing & verification
RollbackWhat to do if it breaks

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:

Terminal window
# 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:

SkillWhat it enforces
test-driven-developmentRED-GREEN-REFACTOR: write test, watch it fail, write code
systematic-debugging4-phase approach: root cause investigation → pattern analysis → hypothesis testing → implementation
verification-before-completionRun verification commands and confirm output before claiming work is done

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:

Terminal window
# 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.


Trevor I. Lasn

Building 0xinsider, real-time Polymarket analytics for sports and esports.


Found this article helpful? You might enjoy my free newsletter. I share dev tips and insights to help you grow your coding skills and advance your tech career.


Related Articles

Check out these related articles that might be useful for you. They cover similar topics and provide additional insights.

Llm
5 min read

Anthropic's Sequential Thinking MCP

Ever wished your AI agent would slow down and think things through? This MCP server does exactly that

Sep 7, 2025
Read article
Llm
6 min read

Building Custom MCP Servers with Next.js and mcp-handler

How to build a MCP server that works with Claude Code, Gemini CLI, Cursor, and more.

Jan 28, 2026
Read article
Llm
7 min read

AI Agents Explained

What AI agents are, how the agent loop works, and why they're different from chatbots.

Jan 30, 2026
Read article
Llm
5 min read

I added Agentic Resource Discovery to 0xinsider so agents can find it

ARD is a new proposal from Google, Microsoft and Hugging Face for how agents find tools. What's in it, what 0xinsider publishes, and what a registry returns.

Sep 23, 2026
Read article
Llm
4 min read

Context7 MCP: Stop LLM Hallucinations with Live Docs

Context7 MCP server pulls version-specific library docs into Claude Code, Cursor, and other AI editors. Setup guide and how it works.

Nov 1, 2025
Read article
Llm
6 min read

Google Search Console MCP for Claude Code

Pull GSC data into Claude Code to find CTR problems, indexing bugs, and keyword gaps — then fix them in the same conversation.

Feb 15, 2026
Read article
Llm
3 min read

Next.js DevTools MCP: Your Development Server Just Got Smarter

The Next.js DevTools MCP connects Claude and Cursor to your running dev server. I use it every day.

Nov 2, 2025
Read article
Llm
3 min read

Chrome DevTools MCP: Let Your AI Agent Debug Your App

Give your AI agent access to your running application. They can see errors, inspect the network tab, check the DOM, and debug issues while you work.

Nov 10, 2025
Read article

This article was originally published on https://www.trevorlasn.com/blog/superpowers-claude-code-skills. It was written by a human and polished using grammar tools for clarity.