Adrian Yadav
← Back to home
Project

AniTrack

AniTrack is a simple website to find new anime & track the ones you've watched or are going to watch.

Start reading ↓

Building AniTrack with Claude Superpowers (obra/superpowers) + Opus 4.6 on Vercel

I just wanted a clean place to track what I’m watching, what’s next, and what I’ve finished. Nothing else, no fancy features, no advertisements - just the barebones.

That’s where Superpowers came in.

Superpowers (the obra/superpowers repo) is basically a workflow layer for Claude Code: a set of composable “skills” and instructions that stop the model from immediately spitting out code and instead push it to step back, tease out a spec, and create a plan before implementing.

The setup I used

  • Claude model: Opus 4.6 (“optus 4.6”)

  • Superpowers plugin: obra/superpowers

  • Platform: Vercel (just deployment + previews)

Opus 4.6 is explicitly better at planning carefully and sustaining longer coding tasks, which pairs perfectly with a planning-first workflow.

How Superpowers changed the build

Normally, if you ask an AI “build me a feature,” it tries to be helpful and jumps straight into code. Superpowers flips that.

According to the Superpowers README, the workflow is: clarify what you’re trying to do, produce a spec in readable chunks, get sign-off, then generate an implementation plan with strong engineering defaults like red/green TDD, YAGNI, and DRY—and only then execute.

That “force it to think” part was the biggest difference for AniTrack.

Instead of me realizing halfway through that I’d backed myself into a weird component structure, I’d catch it at the plan stage. The model would propose a plan, I’d tweak it like a quick design review, then we’d ship it step-by-step.

React best practices (kept simple)

My stack is Next.js App Router + React 19 + TypeScript, so I leaned into a few boring-but-important habits:

  • Keep components small and composable

  • Prefer server-first patterns and only go client-side when needed

  • Push reusable logic into hooks

  • Treat loading/error states as first-class, not “later”

Superpowers helped here because the plan naturally highlights where state belongs, what should be a component vs a hook, and what’s unnecessary. It made it harder to accidentally build a spaghetti feature.

Where Vercel fits

Vercel was just the platform: deploy, preview, repeat.

The workflow became:

  1. Spec + plan (Superpowers)

  2. Implement in small steps (Superpowers)

  3. Push → preview on Vercel → quick sanity check

What I learned

Superpowers made Claude do a lot more thinking upfront, let me accept certain decisions and tradeoffs.

Vercel made shipping a breeze as always.

Visit site →