🎉 hey, I shipped skillcraft.ai It's like Reddit, but for tech courses

As a developer myself, I know how important it is to keep learning, which is why I created this community.

Published
5 min read

How I force Claude Code to plan before coding with Superpowers MCP

Superpowers is an MCP that enforces systematic workflows. I used it to upgrade skillcraft to Next.js 16 and didn't miss a single file.

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.


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.



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.