Claude Code tip: before you ship a vibe-coded site, let Opus 5.5 send 𝟱 𝘀𝘂𝗯𝗮𝗴𝗲𝗻𝘁𝘀 through 𝘁𝗵𝗲𝘀𝗲 𝟮𝟬 𝗰𝗵𝗲𝗰𝗸𝘀 and fix everything in one pass:
1. design that holds together
• write a DESIGN file first and tie every color, font size, spacing and radius to it
• keep the palette tight and the type hierarchy clear
• same kind of button, card or input = same look
• flat page? add emphasis. crowded page? cut
• text stays readable on dark and light backgrounds
2. mobile
• nothing scrolls sideways or spills off screen
• add a real mobile menu
• buttons big enough for a thumb
• the layout survives enlarged text
3. every state
• loading, empty and error each get a proper screen
• every button gets its own hover, pressed and disabled look
• form errors show up next to the field, plus submitting, success and failure messages
• modals, dropdowns and tabs switch with transitions
4. click it like a real user
• run sign-up and checkout from start to finish
• hunt down dead buttons and broken links
• make sure the whole site works with just a keyboard
5. pre-launch
• the home page says what you do in one line
• each page gets one main button
• every page has a title, a description and a favicon
• delete every bit of placeholder text
on effort: Anthropic's cost guide puts medium on well-scoped daily work, so the default covers these 20 fixes
raise it only for the hard ones - Thariq's tests showed higher effort mostly buys extra verification and edge-case testing
paste this whole post into Claude Code and add this at the end 👇
"Run a pre-ship check on this repo.
You: main session, Opus 5.5, medium effort.
Spawn 5 read-only subagents, one per group:
design (medium) - DESIGN file, styles/globals.css, tailwind.config.ts, components/ui/
mobile (medium) - app/layout.tsx, components/nav/, every page at 375px
states (medium) - components/forms/, every loading, empty and error view
real user (high) - app/signup/, app/checkout/, every link and button
launch (medium) - app/page.tsx, page metadata, public/favicon.ico
Each subagent:
- checks only its group
- edits nothing
- returns issue, file:line, severity
Then:
1. merge all five lists into .claude/preship/issues.json, grouped by file, no duplicates
2. stop and show me the list - no edits until I confirm
3. after I confirm, fix everything yourself in one pass, so no two agents touch the same file
4. save before and after screenshots to .claude/preship/screens/"