Vibe Coding

Vibe Coding

Rapidly prototype modern web applications from scratch with creative flow and quick iteration.

Inputs

Gather before starting (ask if not provided):

• App description: Purpose, key features, target users
• Tech preferences: Framework (React/Next.js/Vue/Svelte), styling (Tailwind/CSS modules)
• Feature requirements: Core functionality, user flows
• Design direction: Style, colors, reference sites
• Deploy target: Vercel, Netlify, self-hosted, etc.

Workflow

Think through the build step-by-step:

1. Research: Search official docs for current initialization commands and patterns
   • Never hardcode outdated commands; always verify current best practices
2. Initialize: Run framework init, set up TypeScript + ESLint + Prettier + git
3. Design system: Set up styling, define tokens (colors, spacing, typography), build base components
4. Features: Build incrementally - one feature at a time, test as you go
5. Polish: Accessibility (ARIA, keyboard nav), performance (code splitting, image optimization), error boundaries
6. Document: README with setup, dev commands, env vars, deployment

Architecture Principles

• Component-based: Small, reusable components
• Type-safe: TypeScript throughout
• Mobile-first: Responsive by default
• Accessible: Semantic HTML, ARIA labels, keyboard navigation
• Performance-conscious: Code splitting, lazy loading, optimized images

In Scope

• Full-stack web apps (frontend + API routes/server components)
• Any modern framework (React, Next.js, Vue, Svelte, Astro, etc.)
• Database integration (Prisma, Drizzle with type-safe ORMs)
• Authentication flows
• SEO optimization (meta tags, structured data, sitemaps)

Out of Scope

• Production infrastructure management
• Complex backend microservices (use separate skill)
• Native mobile apps (iOS/Android)

Styling

• Tailwind CSS recommended for rapid development
• Consistent design tokens for colors, spacing, typography
• Light/dark mode support when appropriate
• Proper contrast ratios (WCAG AA minimum)

State and Data

• State: React Context / Zustand / Redux based on complexity
• Data fetching: React Query, SWR, or framework built-ins
• Always handle: loading states, error states, empty states

Backend

• API routes or server components as appropriate
• Type-safe ORMs (Prisma, Drizzle) for databases
• Proper validation at API boundaries

SEO (public-facing apps)

• Meta tags: title, description, Open Graph, Twitter cards
• Structured data: JSON-LD for rich search results
• Core Web Vitals: optimize LCP, FID, CLS
• Sitemap and robots.txt

npm install          # or bun install
npm run type-check   # tsc --noEmit
npm run lint         # eslint
npm test             # vitest / jest
npm run build        # production build
npm run dev          # development server

Complete when:

• All commands succeed without errors
• App builds and runs in dev mode
• Core features work across screen sizes
• Accessibility checks pass
• Tests cover critical paths
• README is clear and complete

SaaS landing page

User: "Build a landing page - hero, features, pricing, contact form"

Steps:
  1. Search nextjs.org/docs for current create-next-app command
  2. npx create-next-app@latest --typescript --tailwind --app
  3. Create components: Hero, Features, PricingTable, ContactForm
  4. Implement responsive grid layout, form validation
  5. Add SEO: metadata API, Open Graph images
  6. Deploy config for Vercel

Admin dashboard

User: "Prototype an admin dashboard - auth, data tables, charts"

Steps:
  1. Next.js App Router + NextAuth.js for authentication
  2. shadcn/ui for component library
  3. Protected route middleware
  4. Data tables with tanstack-table (sorting, filtering, pagination)
  5. Charts with recharts or chart.js
  6. Tests for auth flow and data display

Documentation References

Always search current docs before implementing:

• React: https://react.dev
• Next.js: https://nextjs.org/docs
• Vue: https://vuejs.org/guide
• Svelte: https://svelte.dev/docs
• Tailwind CSS: https://tailwindcss.com/docs
• TypeScript: https://www.typescriptlang.org/docs