Free playbook
The Claude Code Skills Playbook
Three skills that make Claude Code finish what you ask, give your app its own look and write less code. Every install command included.
Nuhu Shaik2 min readnuhushaik.com/resources/skills01
Superpowers
Claude plans, builds and tests every task, like a whole team.
The problem
Claude says “Done!” when the code is written, not when everything you asked for works.
What’s really there:
- Sign-upWorks
- Log-inWorks
- Password resetLink goes nowhere
- Profile pageNever built
Two of the four don’t work, and no test was ever run.
The fix
Remember this
No plan, no code. No proof, no “done”.
- BrainstormIt asks what you want, one question at a time
- PlanSmall tasks, each with its test. You approve it
- BuildA fresh agent per task, test first
- ReviewAnother agent checks it against the plan
- ProveDone only when the tests run and pass
Done right
docs/superpowers/plans/2026-10-20-accounts.mdApproved
- Task 1Sign-up6 tests pass, review clean
- Task 2Log-in5 tests pass, review clean
- Task 3Password resetReview caught a link that never expired. Fixed
- Task 4Profile page4 tests pass, review clean
Install it
/plugin install superpowers@claude-plugins-officialIt starts by itself when you ask Claude to build something. Free and open source, by Jesse Vincent.
Every task gets its own builder and reviewer, so it’s slower and uses more of your plan. Small job? Pick “Native” when it asks how to build: faster and cheaper, with one review at the end.
Copy these prompts
/superpowers:brainstorming I want to build [your feature or app idea, in a sentence or two]. Write the design up as a document, even if it looks small, and wait for my approval. Then write the plan and build it task by task, test first.
/superpowers:verification-before-completion Before you call [the feature] done, check it against [the plan or spec file], requirement by requirement. Run the full test suite and try it in the app if you can. Show me the output, and list anything that's missing or that you couldn't check.
Free playbook
Where should I send it?
The rest opens right here, and I’ll email you the link and the PDF for your computer.
- Install all three
- Frontend Design
- Ponytail
No spam. You’ll get the playbook now, then new guides and the occasional offer from Nuhu Ventures Inc. Unsubscribe any time. Privacy and contact details
Install all three
Open Claude Code and paste these one at a time. Press Enter after each one, and choose “Install for you” when it asks.
/plugin install superpowers@claude-plugins-official/plugin install frontend-design@claude-plugins-officialPonytailTwo messages
/plugin marketplace add DietrichGebert/ponytail/plugin install ponytail@ponytail
Then quit Claude Code and open it again, so all three switch on. To check, type /plugin and open the Installed tab.
Says “Marketplace not found”? Run /plugin marketplace add anthropics/claude-plugins-official first, then try again.
02
Frontend Design
Claude designs a look made for your app, not the AI default.
The problem
Ask AI for a page and you get its default look: the same fonts, colours and cards as every other AI app.
SWIM SCHOOL · EST. 2019
Learn to swim, beautifully.
Book a class →- 500+
- swimmers
- 12
- coaches
- 4.9
- rating
- Expert coaches
- Flexible times
- All ages
- Cream, serif, terracotta
- One word in italics
- Big number, small label
- Identical cards
The page AI makes for everyone. Last year it was purple gradients.
The fix
Remember this
Design from your app’s world, not from AI’s defaults.
- SubjectWho it’s for and what the page must do. Not sure? It suggests one and checks
- Plan4–6 colours, the fonts and a layout sketch, before any code
- CheckAny part that looks like a default AI page gets changed
- CritiqueIt builds, looks at its own work and fixes what’s off
Its rule: “Spend your boldness in one place.”
Done right
Its plan, before any code
A swim school’s timetable, for parents booking on their phones.
- Pool tile
#2D7DB3 - Deep end
#0F3550 - Lane rope
#E0483B - Chlorine
#A6DDE3 - Tile white
#F3F7F8
- Type
- A rounded sans, like the numbers on a pool wall.
- The bold thing
- Lane ropes divide the classes. Everything else stays quiet.
The page
Thursday
- 1Beginners4:00 pmBook
- 2Stroke school4:30 pmBook
- 3Squad5:15 pmFull
Install it
/plugin install frontend-design@claude-plugins-officialIt starts by itself when Claude builds or restyles a screen, or call it with /frontend-design. Free, by Anthropic.
Already have a brand? Put your colours, fonts and logo in the prompt. Your words always win over the skill’s ideas.
Copy these prompts
/frontend-design Design [the page or screen] for [your app, and who it's for]. Its main job: [the one thing someone should do there] Before any code, show me your design plan: 4–6 colours with hex codes, the fonts and a quick layout sketch. Wait for my OK, then build it and check it on a phone-size screen.
/frontend-design [which screen] looks like every other AI app. Redesign it for [your app, and who it's for]. Keep: [your logo, brand colours or copy that must stay] First, list what makes it look generic. Then show me a design plan and wait for my OK before you change any code.
Not sure which to use on your project? I’ll look at your project with you on a 1:1 call.03
Ponytail
Claude reuses what you have and writes the least code that works.
The problem
AI writes everything from scratch, even when your project or the browser already does the job.
+ Calendar.tsx148 lines+ DatePicker.tsx96 lines+ useCalendar.ts61 lines+ calendar.css30 lines- 335 new lines
A whole calendar, built by hand, for you to keep fixing.
The fix
Remember this
Use what’s already there. Write new code last.
- 1Does it need to exist?Skip what nobody asked for
- 2Already in your project?Reuse your components and helpers
- 3Built into the browser or language?Like a date input or a native dialog
- 4A library you already have?Use it. Never add one for a few lines
- 5None of those?The least code that works, plus a small test if it has logic
It stops at the first one that works.
Done right
Your Input component already exists, and every browser has a date picker. I put the two together:
<Input type="date" name="day" min={today} required />Skipped: a custom calendar. Risk: the picker looks a little different in each browser.
± BookingForm.tsx+10 lines
Ponytail’s own example: 335 lines without it, 10 with it.
Install it
/plugin marketplace add DietrichGebert/ponytail/plugin install ponytail@ponytailSend them as two separate messages. Then it’s on in every session: type “stop ponytail” to switch it off, /ponytail to switch it back on. Free and open source, by Dietrich Gebert.
It never cuts anything you ask for, and skips what you don’t. So name the edge cases that matter, like empty fields or bad input.
Copy these prompts
[what you want to add or fix] It must handle: [the edge cases that matter, like empty fields or bad input] Before you write anything, check what we already have: my components and helpers, what the browser or language does for free, and the libraries already installed. Use the simplest option that fully works, and don't add a library for a few lines. End with what you skipped and any risk I should know.
/ponytail-review [uncommitted, staged, branch or a link to the pull request]
1:1 Claude Code setup call with Nuhu Shaik
Want help with your setup?
I’ll look at your Claude Code setup with you and show you what to change, so it plans, builds and checks the way it should.
- One hour, live
- On your own project
- CAD 200
- Which skills your project needs, and why
- What your CLAUDE.md should say about your stack and rules
- How to plan, build and check each feature
Want help with your setup? Request a 1:1 call at nuhushaik.com/resources/skills#call
Saves me hours every day. You help me a lot.
- 3,200
- monthly active users on Ayah
- 700
- paid users on Drum Breaker
- Caterpillar
- web HMI for power systems