Product builder
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.From its SKILL.md
npx -y skills add oleg-koval/agent-skills --skill product-builderAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its file declares
Copied from the file, not written here
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
7.0 KB, ~1.5k tokens by cl100k_base, as published. Nobody here has run it
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:
- Generate a working product, not a skeleton
- Include authentication
- Include database schema with migrations
- Include API routes with input validation
- Include a polished, responsive UI
- 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
classstrategy - 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
selectandincludedeliberately - Migration strategy: always generate and review migrations
- Audit fields:
createdAt,updatedAton 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
anytypes 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
// lib/api-response.ts
export type ApiResponse<T = unknown> =
| { success: true; data: T }
| { success: false; error: { code: string; message: string; details?: Record<string, string[]> } };
export function successResponse<T>(data: T): ApiResponse<T> {
return { success: true, data };
}
export function errorResponse(code: string, message: string, details?: Record<string, string[]>): ApiResponse<never> {
return { success: false, error: { code, message, details } };
}
Route Handler Pattern
// 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
import { cn } from '@/lib/utils';
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
}
export function Card({ className, ...props }: CardProps) {
return (
<div
className={cn(
'rounded-lg border border-slate-200 bg-white p-6 shadow-sm',
'dark:border-slate-800 dark:bg-slate-950',
className,
)}
{...props}
/>
);
}
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 for ready-to-use prompts covering SaaS dashboards, e-commerce, project management, AI chat apps, and more.
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.