17 markdown files that walk an AI coding agent (Claude Code or Codex) from a rough idea through to a deployed, MVP-quality web application. Read each one below, or download the full bundle and hand it to your agent.
Two free downloads. Skills only, or the full project template (Next.js + TS + Tailwind + DaisyUI scaffold) which includes the skills inside.
Download skills.zip Download starter.zip
Understand the idea, audience, and scope before any code is written. The agent asks the
founder five questions in plain language: what does this thing do and for whom, who is the
first person you want to use this, what does success look like in their first 60 seconds,
if you could only ship one feature this week which earns trust, and what are you explicitly
not building. The agent then researches the audience's cognitive profile and writes a 3–5
line MVP slice description into PROJECT.md.
Lock in the visual direction before writing UI components. Stack: Next.js 15 + Tailwind v4 +
DaisyUI + Lucide for icons. Custom DaisyUI theme tailored to the founder's mood and color
choices. Type scale uses 16px as the floor — no body text smaller. Header is the working
surface (logo, 2–5 product surfaces, account); footer is the reference surface (About,
Contact, Terms, Privacy). No gradients on buttons or titles. Logo is a simple SVG at
viewBox="0 0 64 64" that doubles as the favicon. The skill ends with a
critical review of the user flow architecture.
Signup, login, sign-out, and email verification. Default stack: Auth.js v5 with Resend for magic-link delivery, optional Google or GitHub OAuth. For email + password flows: bcryptjs for hashing, verification token table, server-side token validation. Walks the founder through the Resend signup, getting an API key, and the OAuth provider consoles step by step. Never writes custom session storage or password hashing.
Adds AI to the product using a templated pattern: OpenAI's gpt-5-nano model
with reasoning effort set to minimal and Zod-typed structured outputs via the
Responses API. One lib/ai.ts helper, all calls go through it. Four DIALOGUE
paths: brainstorm, have an idea, agent picks, or "find me a unique angle for VC
investability." For community apps, also wires the free OpenAI moderation API to filter
harmful content automatically.
Persistent bottom-right AI navigation assistant that answers user questions about the site.
Three parts: a build-time content index built from the site's pages, a chat UI mounted
outside {children} in the root layout (so state survives navigation),
and a two-call server endpoint that uses gpt-5-nano twice — first to extract
keyword search terms, then to answer using the top 5 search hits as grounded context. Open
state persists across reloads via localStorage.
Password-gated /admin route with KPIs tailored to the project. The agent
analyzes the codebase first (what data is being captured, what events fire, what tables
exist), researches what KPIs matter for this kind of product, identifies gaps in
instrumentation, and proposes a tailored dashboard with 4–6 KPIs. Password protection via
HTTP Basic Auth in middleware. Visiting /admin without credentials returns 404,
not 403, so the route doesn't even reveal itself.
AdSense for content sites or Stripe Checkout for direct payment. The agent recommends one
based on product type. AdSense path: walks through getting the publisher ID, adds the
loader script to <head>, creates ads.txt, requests review,
adds ad units once approved. Stripe path: walks through getting test keys, installs SDK,
builds the checkout endpoint with Stripe Checkout (never roll your own card form), wires
the webhook with signature verification for fulfillment.
Identifies the minimum regulatory surface the product needs at beta and implements exactly
that. Walks through GDPR, CCPA, COPPA, HIPAA, FERPA, PCI-DSS — most don't apply to a
typical MVP. Asks the founder for the canonical URL and a contact email (never assumes
privacy@<domain>). Drafts tailored Terms of Service and Privacy Policy as
MDX pages, adds signup-flow consent checkboxes (TOS required, marketing optional and
unticked), creates the user_consents table, and adds a "Do Not Sell or Share"
link to the footer.
WCAG 2.2 AA pass on the MVP slice. Non-negotiable. Five-step audit: semantic HTML pass
(one h1 per page, headings never skip levels, native form elements with labels), keyboard
pass (Tab through every interactive element with visible focus rings), contrast (4.5:1 for
body, 3:1 for large text), screen reader smoke test (meaningful page titles, alt text,
aria-labels for icon-only buttons), motion (respects prefers-reduced-motion).
Hygiene checklist, not a pen-test. Verifies .env.local is gitignored and not
in git history. Adds security headers via next.config.ts (HSTS, nosniff,
Referrer-Policy, Permissions-Policy, CSP). Confirms every server entry point validates
input with Zod. Runs npm audit. Adds rate limiting on AI/email/DB-write
endpoints. For projects with a separate backend, configures CORS allowlist (never *),
Origin/Referer verification on state-changing requests. Audits the route inventory and
deletes orphan routes that aren't called from the frontend.
Lighthouse 90+ across Performance, Accessibility, Best Practices, and SEO. Uses
next/image for all images with width and height to avoid layout shift,
next/font to self-host fonts, defaults to Server Components, caches public
read-only data with unstable_cache or route-segment revalidate,
adds loading.tsx for slow routes for perceived performance.
For projects with a backend talking to a database. Audits the data flow with 10 questions: over-fetching, under-fetching (N+1), pagination on every list endpoint, caching strategy per category, debouncing user input, optimistic updates, transport choice (polling vs SSE vs WebSockets), response shape, compression, deduplication. Returns a punch list of the highest-impact fixes for the founder to approve.
Detects existing deployment patterns first (looks for .vercel/, netlify.toml,
wrangler.toml, fly.toml, Dockerfile + k8s, etc.).
If the project already deploys somewhere, keeps that platform. If not, defaults to Vercel:
offers to drive the browser through Vercel signup + token creation via Playwright in
headed mode, then runs npx vercel --prod with all env vars pushed.
Buys a custom domain via GoDaddy. Suggests 3–5 candidate names based on the project. Walks through the GoDaddy purchase (skipping every upsell), then DNS records to point at Vercel (A record to 76.76.21.21 for apex, CNAME to cname.vercel-dns.com for www). Updates OAuth redirect URIs and Resend domain verification to use the new domain.
Playwright in headed mode against the production deployment. Captures full-page screenshots of every key user flow on both desktop and mobile viewports. The agent then visually inspects the screenshots — looking for layout, alignment, typography, color, state, and navigation issues — and proposes fixes one at a time with founder approval before applying.
Final go/no-go before sharing the URL with another human. Functional checks (the MVP slice works end-to-end on production, auth works including sign-out, happy path and error path tested). Trust signals (real title and meta description, real favicon, OG tags render correctly, no Lorem Ipsum or "Welcome to Next.js" left). Hygiene (env.local gitignored, npm audit clean, Lighthouse scores still passing). Resilience (404 page exists, server-side error responses are useful not stack traces, forms show inline errors).
Founder-facing packaging produced after the MVP ships. Eight deliverable types: pitch deck
(10–15 slide PPTX), investor one-pager (DOCX), marketing one-pager (DOCX), financial
projections model (XLSX with assumptions sheet, revenue, costs, P&L, scenarios), marketing
strategy (DOCX, MIT Sloan beachhead framework), research/thesis paper (DOCX, cited),
ad creative pack (HTML at 1080×1080, 1200×628, 1080×1920), launch announcement (press
release, HN Show HN post, Twitter thread). All land in deliverables/ at the
project root, Finder opens automatically when done.
Drop the bundle into .claude/skills/vibe-mvp/ for Claude Code, or .codex/skills/vibe-mvp/ for Codex. Then ask the agent to read vibe-mvp/SKILL.md and follow it. About 30 minutes from there to a deployed MVP.
For more on the philosophy, the implementation patterns, and real build logs, browse the blog.