49 Skills for Claude Code. All at 100%.

Build Production Apps with Structured AI

A 49-skill pipeline that takes any idea from concept to deployed app. Framework-agnostic. Battle-tested. Every skill autoresearched to 100%.

Built SimpleCRM — a full-stack Next.js app with auth, database, and 10 features — in a single session. Also works with Flask, Django, FastAPI, and more.

Get the Skills on GitHub See How It Works

Pass 1 — Functional Autoresearch

84.2%

avg baseline

→

100%

all 49 skills

Karpathy method. 5 inputs × 5 binary evals per skill. One mutation per experiment. 120 total experiments. Looped to 100% for 3 consecutive stability runs.

Pass 2 — Progressive Disclosure

49/49

at 4/4 criteria

40–70%

token reduction

4-criteria binary audit. Every skill restructured to load only the relevant section per call — not the whole file. 19 skills structurally rewritten, 57% avg line reduction.

Full autoresearch results for all 49 skills

AI coding is chaotic without structure

Vague requirements lead to endless iterations

You describe what you want, AI builds something close. You iterate. Again. And again. No shared spec means no shared understanding.

No structure means missed features and technical debt

Without a documented plan, features get half-built. CSS gets hardcoded. Design tokens get ignored. The codebase grows fragile.

Going from prototype to production takes forever

Getting a demo working is easy. Getting auth, database migrations, security, deployment, and error handling right — that takes a workflow.

Context gets lost between sessions

You close the chat, come back the next day, and AI has forgotten everything. Start explaining from scratch, or lose where you were.

The Vibecoding Workflow

5 phases. 49 skills. Structured. Repeatable. Production-ready.

Phase 1: IDEATE

Vague idea → Clear spec

AI asks focused questions to extract every requirement — users, features, data model, tech constraints, business rules. You end with a complete product specification before writing a single line of code. Supports fast-track mode for when you already know what you want.

Phase 1: IDEATE

$

Phase 2: DOCUMENT

Clear spec → 8 canonical docs

Generates 8 canonical documentation files that guide the entire build. Each doc is focused: one skill writes one doc, with approval checkpoints before saving. Supports Python (Flask/Django/FastAPI), Next.js, Vite, and more.

Phase 2: DOCUMENT

$

Phase 3: BUILD

Docs → Working code

Implements features step-by-step following the plan. Design guard runs before each page to block hardcoded values. Code review runs after each step. Build errors route automatically to build-fix. Real-time progress tracking with checkmarks in progress.txt.

Phase 3: BUILD — Database Setup

$

Phase 3: BUILD — Progress Tracker

$

Phase 3: BUILD — Writing Components

$

Phase 4: DEBUG

Bugs → Fixes

Fix issues surgically. Impact analysis runs first to map blast radius before any change. Runtime bugs stay in debug. Compile/type errors route to build-fix. UI issues trigger ui-review. Vague reports get clarified before diagnosis begins.

Working features

Passing tests

Clean console

Phase 5: SHIP

Code → Live product

Pre-flight checks run automatically: doc-review verifies docs match code, security-review blocks deployment on any CRITICAL or HIGH finding. Then routes to the right deploy skill — Vercel, Netlify, DigitalOcean, or local. Python apps get gunicorn, migrations, and collectstatic checks.

Phase 5: SHIP — Design System

$

Phase 5: SHIP — Final Summary

$

Skill Architecture

How the 49 Skills Wire Together

Every skill has a defined input, output, and handoff. Nothing falls through the cracks.

IDEATE

vibe-coding-ideatevibe-coding-ui-uxvibe-coding-recall

ideate runs the full 10-topic requirements conversation. When design comes up, it hands off to ui-ux for style selection (67 styles, 161 palettes). recall loads prior project context at session start.

DOCUMENT

vibe-coding-documentvibe-coding-doc-prdvibe-coding-doc-appflowvibe-coding-doc-techstackvibe-coding-doc-designvibe-coding-doc-backendvibe-coding-doc-frontendvibe-coding-doc-implplanvibe-coding-doc-claudemd

document is a thin coordinator that calls 8 dedicated generator skills in order. Each generator reads prior docs, generates its output, shows a preview, and waits for approval before saving.

BUILD

vibe-coding-buildvibe-coding-css-setupvibe-coding-design-templatesvibe-coding-design-guardvibe-coding-tddvibe-coding-code-reviewvibe-coding-build-fixvibe-coding-api-connectvibe-coding-cli-runnervibe-coding-mcp-setupvibe-coding-dbvibe-coding-db-sqlitevibe-coding-db-bettersqlitevibe-coding-db-postgresvibe-coding-db-duckdbvibe-coding-db-convex

build orchestrates implementation. css-setup and design-templates run once at start. design-guard runs before each page. code-review runs after each step. build-fix intercepts any compile error. api-connect and cli-runner handle integrations. db routes to the right database skill — SQLite, BetterSQLite3, PostgreSQL, DuckDB, or Convex.

DEBUG

vibe-coding-debugvibe-coding-build-fixvibe-coding-impact-analysisvibe-coding-ui-review

debug classifies the bug first. Compile errors route to build-fix. UI bugs trigger ui-review with screenshot analysis. impact-analysis maps blast radius before any fix is applied.

SHIP

vibe-coding-shipvibe-coding-doc-reviewvibe-coding-security-reviewvibe-coding-local-runnervibe-coding-deploy-vercelvibe-coding-deploy-netlifyvibe-coding-deploy-digitalocean

ship runs pre-flight: doc-review then security-review (CRITICAL/HIGH blocks deployment). Then routes to the right deploy skill based on run_target — local, Vercel, Netlify, or DigitalOcean.

CROSS-PHASE

vibe-coding-orchestratorvibe-coding-statevibe-coding-explorevibe-coding-reverse-engineervibe-coding-re-scanvibe-coding-re-analyzevibe-coding-re-generatevibe-coding-self-improve

orchestrator routes all intents and manages the pipeline. state owns progress.txt read/write/resume. explore handles token-efficient codebase navigation. reverse-engineer reconstructs docs from existing code via 3 stages. self-improve proposes surgical fixes to skills after any gap is found.

Works With Your Stack

Not just Next.js. Every skill has been adapted to work with the full range of modern frameworks.

Next.jsFrontend

App Router, Pages Router, Server Components, React 19

React + ViteFrontend

SPA, custom bundler setup

FastAPIBackend

uvicorn, async, Pydantic, SQLAlchemy

FlaskBackend

Blueprints, Gunicorn, SQLAlchemy

DjangoBackend

ORM, migrations, collectstatic, WSGI

ExpressBackend

Node.js API routes, middleware

GoBackend

net/http, Gin, Echo, Fiber — with air live reload

Ruby on RailsBackend

bundle, db:migrate, rails server

RustBackend

Axum, Actix, Warp — with cargo-watch

PHPBackend

Laravel, Symfony, plain PHP built-in server

React Native / ExpoMobile

FlashList, Reanimated 2, Expo Router, New Architecture

SQLiteDatabase

WAL mode, FTS5, versioned migrations

PostgreSQLDatabase

Supabase, RLS, pgvector, connection pooling

ConvexDatabase

Reactive queries, mutations, actions, AI agents

DuckDBDatabase

In-process analytics, CSV/Parquet queries

VercelDeploy

CLI, token auth, env vars, Python serverless

NetlifyDeploy

netlify.toml, functions, redirects, SPA support

DigitalOceanDeploy

App Platform, Droplet + nginx + PM2

How It Works

Three steps from idea to production

Describe your idea

"I want to build a CRM for small businesses"

The orchestrator detects your intent and activates the right skill. IDEATE runs a structured conversation to extract requirements across 10 topics — users, features, data, auth, tech stack, business model, edge cases, and design.

Let Vibecoding plan and document

AI generates 8 canonical project documents with your approval at each step

PRD, APP_FLOW, TECH_STACK, DESIGN_SYSTEM (with full color palettes and gradients), BACKEND_STRUCTURE, FRONTEND_GUIDELINES, IMPLEMENTATION_PLAN, and CLAUDE.md — all generated sequentially, each showing a preview before saving.

Watch it build

Real-time progress tracking as features are implemented step by step

BUILD follows the implementation plan exactly. design-guard enforces color tokens before every page. code-review runs after every step. Any compile error routes to build-fix automatically. progress.txt tracks every checkmark.

This is What Vibecoding Built

SimpleCRM — a production-ready customer management app built in a single session

Full-stack Next.js + Supabase

Authentication with row-level security

Customer management with search and filter

Notes, payments, follow-ups, timeline

Lead capture form with tokens

CSV export

8 complete routes

Real-time activity timeline

Try the Live Demo View Source on GitHub

What You Get

Everything you need for a production app — generated, verified, and tracked

8 Canonical Project Docs

PRD, APP_FLOW, TECH_STACK, DESIGN_SYSTEM, BACKEND_STRUCTURE, FRONTEND_GUIDELINES, IMPLEMENTATION_PLAN, and CLAUDE.md — each generated by a dedicated skill with an approval step.

Full Design System

Color palettes with 50-950 shade scales, 3 gradient presets (primary, subtle, rich), CSS variable tokens, typography pairings, and color enforcement rules written into generated code.

Production-Ready Codebase

Clean, structured code with design tokens enforced, security review passed, and impact analysis run before every bug fix.

Real-Time Progress Tracker

progress.txt tracks every step with checkmarks. Resume any session exactly where you left off — no re-explaining context.

Framework-Agnostic CLI Patterns

Python venv, Alembic, Django management commands, gunicorn, pytest. Node.js Prisma, Drizzle, shadcn/ui, Stripe CLI, Docker. Correct commands for your stack.

Security Gate Before Deploy

Automatic OWASP Top 10 scan before every deployment. Hardcoded secrets, SQL injection, XSS, insecure auth, IDOR — any CRITICAL or HIGH finding blocks the deploy.

Complete MCP Configuration

Connect Claude directly to your PostgreSQL database, GitHub repos, Slack, filesystem, or browser during development. Merge-safe config generation with security checklist.

Session Persistence Across All Phases

state skill owns progress.txt with validated read/write/resume/recover operations. No lost context, no duplicate work, no phase confusion.

Open Source. Free to use.

Start building with a real system

Download the skills folder from GitHub, open Claude Code in your project, and type your idea. The 38-skill pipeline takes it from there.