--- title: "The Skills" description: "Full description of the 17 markdown skills that walk an AI coding agent from idea to deployed MVP." canonical: https://vibecodersguidetomvp.help/skills/ last_updated: 2026-05-06 --- # The Skills 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. ### Get the bundle Two free downloads. Skills only, or the full project template (Next.js + TS + Tailwind + DaisyUI scaffold) which includes the skills inside. [Download skills.zip](/vibe-coder-skills.zip) [Download starter.zip](/vibe-mvp-starter.zip) ## 01Discover 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`. ## 02Design 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. ## 03Auth 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. ## 04AI Integration 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. ## 05Chatbot optional 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. ## 06Admin Dashboard optional 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. ## 07Monetization optional 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 ``, 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. ## 08Compliance optional 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@`). 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. ## 09Accessibility 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`). ## 10Security 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. ## 11Performance 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. ## 12Data Optimization optional 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. ## 13Deploy 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. ## 14Domain optional 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. ## 15E2E Testing 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. ## 16Ship Checklist 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). ## 17Deliverables optional 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. ### Hand it to your agent 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. [Download skills.zip](/vibe-coder-skills.zip) [Download starter.zip](/vibe-mvp-starter.zip) For more on the philosophy, the implementation patterns, and real build logs, browse the [blog](/blog/).