DEV Community

Cover image for The Claude Code Skill Set I Actually Run — Mapped by Dev Task
LazyDev_OH
LazyDev_OH

Posted on • Originally published at gocodelab.com

The Claude Code Skill Set I Actually Run — Mapped by Dev Task

A type error detonated five minutes before deploy. Claude had just declared "completed." I trusted the line and hit vercel --prod. Preview was green; the Production build failed. Four hotfix commits later, the evening was gone.

Without that incident, I wouldn't have bothered organizing my Skills. The next day I pinned /verification-before-completion as an always-on gate. Task by task I added similar guardrails. I ended up with seven Skills in active use.

This post is the Skill and plugin set I actually run — grouped by dev task. UI / Backend · API / Data · DB / Deploy · Infra / Planning · Research / Review · Debug / Process · Docs.

Skill vs Plugin

A Skill is a single markdown file — an SOP that says "this task runs in this order." One file per Skill.

A plugin is a bundle of Skills. Anthropic launched the official marketplace in January 2026, and since then /plugin install <name> pulls in a whole set. Updates ride the same command.

With 3–4 Skills, manual copy is easier. Past that, plugins are the sensible path.

The 4 Plugins I Run

Most of my dev routine lives inside these four. The rest gets filled by two or three project-specific Skills I wrote myself.

# Base install
/plugin install superpowers@claude-plugins-official
/plugin install vercel@claude-plugins-official
/plugin install frontend-design@claude-plugins-official
/plugin install bkit@claude-plugins-official

# Check
/plugin list
Enter fullscreen mode Exit fullscreen mode

superpowers — methodology Skill bundle. 20+ Skills: brainstorming, TDD, systematic-debugging, verification-before-completion. obra's open-source project, now on the official marketplace. 94k+ stars. Most battle-tested set.

vercel — infra and framework. Next.js App Router, Server Components, Vercel Functions, AI SDK, deploy CLI. Keeps you on the latest syntax without memorizing release notes.

frontend-design — UI drafts + React code quality. Steers away from generic AI-looking UIs. After editing multiple TSX files, react-best-practices auto-kicks a quality checklist.

bkit — PDCA and docs layer. If superpowers is "how to work," bkit is "what to record and in what stage." Overkill for solo work; essential when client or team docs matter. Plan → Design → Do → Check → Act each has a Skill. gap-detector catches design-vs-implementation gaps; pdca-iterator runs auto-improvement loops.

4-layer plugin stack + custom Skills — each layer has a clear job

Task-to-Skill Map (7 Tasks × Set)

Task Primary Skills Plugin
UI / Frontend frontend-design · shadcn · react-best-practices frontend-design · vercel
Backend · API nextjs · vercel-functions · ai-sdk · phase-4-api vercel · bkit
Data · DB vercel-storage · runtime-cache · next-cache-components vercel
Deploy · Infra deployments-cicd · env-vars · verification vercel · superpowers
Planning · Research brainstorming · writing-plans · pdca (plan/design) · bkit-templates superpowers · bkit
Review · Debug systematic-debugging · verification-before-completion · requesting-code-review · code-analyzer · gap-detector superpowers · bkit
Process · Docs pdca (do/check/act) · report-generator · pdca-iterator bkit

Some Skills overlap. verification-before-completion runs across deploy, review, and test tasks. I keep it globally on and call the rest per task.

7 tasks × 4 plugins matrix — Skills called per crossing cell

UI / Frontend — Draft to Review

/brainstorming → /frontend-design draft → shadcn components
  → react-best-practices auto-trigger on TSX save
  → /verification-before-completion
Enter fullscreen mode Exit fullscreen mode

For the draft stage, frontend-design produces production-grade drafts without the generic AI-tailwind look. If the project uses shadcn, vercel:shadcn attaches — component installs, theming, custom registries.

After implementation, vercel:react-best-practices detects multiple TSX edits and runs a review checklist — hooks usage, accessibility, performance, TypeScript patterns.

Backend · API — Next.js Fullstack

vercel:nextjs holds the freshest patterns — Server Component fetch, Server Actions for forms, Middleware for request interception. Write Next.js 16 code and it won't silently regress to 15-era syntax.

When serverless functions enter, vercel:vercel-functions attaches — Edge vs Node runtime, Fluid Compute streaming, Cron Jobs.

AI features bring in vercel:ai-sdk: chat UI, structured output, tool calls, agents, MCP integration. When working against the Anthropic SDK directly, claude-api takes priority.

At the early API-design stage, bkit:phase-4-api helps — endpoint conventions, error payload shapes, Zero Script QA (validate via structured JSON logs, not test scripts).

Deploy · Infra — On Top of Vercel

Two Skills always attached:

  • vercel:deployments-cicd — deploys, rollbacks, promotions, prebuilt builds. Even writes GitHub Actions workflow files.
  • vercel:env-vars — syncing .env with Vercel env vars, OIDC tokens, per-env separation.

The last gate is always superpowers:verification-before-completion. Confirms build, type, and tests actually pass before deploy. This Skill prevented most of my production incidents — including the "5 minutes before deploy" one from the intro.

Feature flow — 7 steps with Skills per step and artifacts

Planning · Research — Before the Code

superpowers:brainstorming for "build vs. skip." Requirement structuring, edge-case discovery, decision trees.

superpowers:writing-plans converts brainstorming into an execution plan — split by file, by step. When the plan file is ready, /execute-plan picks it up.

When planning docs must live in the team repo, bkit:pdca's plan/design stages run alongside. Writes to docs/plans/{feature}.md in template form. bkit:bkit-templates brings planning and design doc templates.

Review · Debug — The Last Gate

Three review/debug Skills hold the last gate.

systematic-debugging kicks in on bugs and failing tests. Forces a sequence — reproduce → three hypotheses → eliminate two with evidence → minimal fix. Cuts the impulse to "just fix it."

verification-before-completion runs before "done." Confirms type, build, tests before allowing completion.

requesting-code-review is for handing off to another session for review.

Two bkit Skills attach here. bkit:code-analyzer produces pre-commit quality, security, and performance reports. bkit:gap-detector catches gaps between design docs and actual implementation — PDCA's Check stage. If Match Rate drops below 90%, pdca-iterator launches an auto-improvement loop.

Process · Docs — When Docs Become Necessary

On solo work, process and docs Skills stay off. When a teammate joins, when progress reports go to a client, or when future-me asks "why did I build it this way?" — bkit pays off.

bkit:pdca splits Plan → Design → Do → Check → Act into slash commands. /pdca plan {feature} writes the planning doc, /pdca analyze writes the post-implementation analysis.

bkit:report-generator fires after one PDCA cycle. Pulls Plan/Design/Do/Check docs and actual code into a single-page completion report — ready to hand to stakeholders.

bkit:pdca-iterator is the Evaluator-Optimizer pattern. Max 5 iterations, hands off to report-generator past 90% match rate.

Mapped Onto the EP.19 5-Agent Team

planner   → brainstorming · writing-plans · pdca plan/design
coder     → executing-plans · nextjs · frontend-design
reviewer  → requesting-code-review · react-best-practices · code-analyzer
tester    → test-driven-development · verification-before-completion
debugger  → systematic-debugging · gap-detector
Enter fullscreen mode Exit fullscreen mode

If the codebase isn't Next.js, swap nextjs for whatever framework Skill fits. Skills are bundled per plugin, so changing stack doesn't require redesigning the team.

Skill cards per agent — swap only the framework Skill to port across stacks

Skills I Tried and Dropped

Not every Skill is worth keeping.

  • using-git-worktrees — useful in theory, didn't fit my workflow. I switch branches fast and don't have enough parallel work to justify worktrees.
  • dispatching-parallel-agents — set it aside as I moved to running the 5-agent team directly. The external DB state-sharing structure is more stable.
  • bkit:enterprise / bkit:infra-architect — built for microservices + k8s + Terraform. Doesn't match my stack (Vercel + Supabase). Off unless enterprise-grade infra design actually applies.

When to Build Your Own Skill

Start with what plugins ship. Only build your own when "I keep typing the same thing" repeats three times.

My three custom Skills: publish-post (blog publish pipeline), screenshot-ppt (Puppeteer capture template), wp-media-upload (WordPress media API call). All blog-operations only.

When writing your own, superpowers:writing-skills helps — authoring conventions, examples, metadata format.

Closing

Skills don't make Claude smarter. They show Claude how I work, repeatedly. Four plugins cover most of it; the remainder goes to two or three custom Skills. First setup is under 10 minutes.

80% first, fix the remaining 20% as real problems show up. Skills grow the same way. Start with the four base plugins. When "this repeats" happens three times, that's the moment to write a new Skill. Don't force it earlier.

The last gate is always a human. verification-before-completion passing doesn't guarantee the feature works — build, type, and tests get the automated pass; business logic still needs a human check. Hold that line, and a Skill set demonstrably speeds up development.


Originally published on GoCodeLab.

Top comments (0)