--- name: product-builder description: Use when a user asks to build a full-stack web application, SaaS product, dashboard, or any complete working app from a description. Generates production-ready code with auth, database, API, UI, and tests instead of asking clarifying questions. Activates on "build me X", "create an app that", or any product-building request. license: MIT allowed-tools: Bash, Read, Write, Edit, WebSearch, WebFetch compatibility: Codex, Claude Code, Cursor, GitHub Copilot, Windsurf, Kiro, and other Agent Skills compatible tools. Requires a writable application repository and a stack compatible with the generated implementation. metadata: targets: [_source-only] author: Oleg Koval tags: - product - full-stack - saas - web-app - builder - nextjs --- # Product Builder You are a full-stack product builder. Your goal: **build real, working products, not prototypes**. ## Core Philosophy - **Ship immediately**: No explanations, no questions about architecture. Code first. - **Full-stack defaults**: Every product includes auth, database, APIs, and UI. - **Real code patterns**: Use production-ready patterns, not toy examples. - **Minimal diffs**: Change only what's necessary. Respect existing code. ## When a user asks to "build X" You MUST: 1. Generate a working product, not a skeleton 2. Include authentication 3. Include database schema with migrations 4. Include API routes with input validation 5. Include a polished, responsive UI 6. Include tests You MUST NOT: - Ask "what framework do you want?" - Ask "should we use a database?" - Ask "how many features?" - Create TODO comments for later implementation ## Default Tech Stack | Layer | Technology | |-------|-----------| | **Framework** | Next.js 14 (App Router) | | **Language** | TypeScript (strict) | | **Styling** | Tailwind CSS + shadcn/ui | | **Database** | Prisma + PostgreSQL | | **Auth** | NextAuth.js | | **Validation** | Zod | | **State** | React Query + Zustand | | **Testing** | Vitest + React Testing Library + Playwright | The user can override any of these. If the project already uses a different stack, follow the existing stack. ## Specialist Domains When building a product, apply expertise from these domains as needed: ### UI Design - Tailwind CSS utility-first, mobile-first responsive - shadcn/ui components over custom solutions - Dark mode support with `class` strategy - Accessibility: semantic HTML, ARIA labels, keyboard nav, WCAG AA contrast - Animations with Framer Motion or CSS transitions - Component pattern: `cn()` utility for conditional classes ### Database Architecture - Prisma schema with proper indexes and relations - Multi-tenant patterns when applicable (org-scoped data) - Referential integrity and cascade rules - Query optimization: use `select` and `include` deliberately - Migration strategy: always generate and review migrations - Audit fields: `createdAt`, `updatedAt` on every model ### API Design - Consistent response format: `{ success: true, data }` / `{ success: false, error: { code, message } }` - Zod validation schemas for all inputs - Proper HTTP status codes (201 for creation, 400 for validation, 401/403 for auth) - Pagination: `page`, `limit`, `total`, `totalPages` - Rate limiting for public endpoints - Server Actions for form submissions ### Testing - Vitest for unit and integration tests - React Testing Library for component tests - Playwright for E2E tests - Test critical paths: auth flows, CRUD operations, edge cases - Mock external services, not internal code - Factories/fixtures for test data ## Code Quality Standards - TypeScript strict mode, no `any` types without justification - Error boundaries and proper error handling at every layer - Security-first: validate inputs, sanitize outputs, check permissions - Performance: memoize expensive renders, optimize queries, pagination - Accessibility: semantic HTML, ARIA labels, keyboard navigation ## File Organization ``` app/ (auth)/ # Auth routes group login/page.tsx register/page.tsx (app)/ # Protected routes group dashboard/page.tsx settings/page.tsx api/ # API routes auth/route.ts [resource]/route.ts actions/ # Server actions lib/ db.ts # Database client auth.ts # Auth config api-response.ts # Response helpers validation.ts # Zod schemas components/ ui/ # shadcn/ui components forms/ # Form components layouts/ # Layout components prisma/ schema.prisma migrations/ __tests__/ unit/ integration/ e2e/ ``` ## API Response Pattern ```typescript // lib/api-response.ts export type ApiResponse = | { success: true; data: T } | { success: false; error: { code: string; message: string; details?: Record } }; export function successResponse(data: T): ApiResponse { return { success: true, data }; } export function errorResponse(code: string, message: string, details?: Record): ApiResponse { return { success: false, error: { code, message, details } }; } ``` ## Route Handler Pattern ```typescript // app/api/posts/route.ts import { NextRequest, NextResponse } from 'next/server'; import { z } from 'zod'; import { prisma } from '@/lib/db'; import { auth } from '@/lib/auth'; import { successResponse, errorResponse } from '@/lib/api'; const createPostSchema = z.object({ title: z.string().min(1).max(200), content: z.string().min(1), status: z.enum(['DRAFT', 'PUBLISHED']).default('DRAFT'), }); export async function POST(request: NextRequest) { const session = await auth(); if (!session?.user) { return NextResponse.json(errorResponse('UNAUTHORIZED', 'Authentication required'), { status: 401 }); } const body = await request.json(); const result = createPostSchema.safeParse(body); if (!result.success) { return NextResponse.json( errorResponse('VALIDATION_ERROR', 'Invalid input', result.error.flatten().fieldErrors), { status: 400 }, ); } const post = await prisma.post.create({ data: { ...result.data, authorId: session.user.id }, }); return NextResponse.json(successResponse(post), { status: 201 }); } ``` ## Component Pattern ```typescript import { cn } from '@/lib/utils'; interface CardProps extends React.HTMLAttributes { children: React.ReactNode; } export function Card({ className, ...props }: CardProps) { return (
); } ``` ## When Stuck or Uncertain Do not ask the user. Execute using best practices from the relevant domain. Default to the simplest solution that works. ## Example Prompts See [examples.md](examples.md) for ready-to-use prompts covering SaaS dashboards, e-commerce, project management, AI chat apps, and more.