Holy 💩, I can do that now?

This is how you level up from total Noob to serious Vibe Coder and start building what's in your head right now.

Explore the 6 Vibe Coding Skills

Product

Slot:Head

Upgrades

+Value

Solve a real problem for a lot of real users

Progression Levels

Tooling

Slot:Hands

Upgrades

+Power

Master development tools and AI assistants

Progression Levels

Design

Slot:Chest

Upgrades

+Style

Build interfaces people actually want using

Progression Levels

Systems

Slot:Back

Upgrades

+Scalability

Build a robust backend engines powering your app

Progression Levels

Security

Slot:Legs

Upgrades

+Safety

Secure applications for you and your users

Progression Levels

Shipping

Slot:Boots

Upgrades

+Speed

Get your app fast and smooth to users

Progression Levels

Level Up Your Vibe Coding Skills

Product

Solve a real problem for a lot of real users

+Value

Tooling

Master development tools and AI assistants

+Power

Design

Build interfaces people actually want using

+Style

Systems

Build a robust backend engines powering your app

+Scalability

Security

Secure applications for you and your users

+Safety

Shipping

Get your app fast and smooth to users

+Speed

Level 1

Get your idea live: a simple site online, code saved, local setup working, a clear goal, and basic safety.

1.1

Your Idea

Develop an idea into a concept that helps the AI understand the users problem you want to solve

1.2

Local Setup

Install Cursor on your computer and learn to use it so you have a running version of Next.js on

1.3

Landing Page

Work with professional UI libraries like Magic UI so your new landing page starts in style

1.4

Fixing Errors

Learn to deal with the inevitable errors and warnings the AI produces during development

1.5

Safety First

Learn the most important rules to follow that keep you system and web app safe from harm

1.6

Going Live

Save your code on GitHub and host your landing page on Vercel so you can start sharing it

Level 2

Ship your first feature: a tiny plan, clean UI, a clear build workflow, checked inputs, and tidy code.

2.1

First Features

Turn your concept into a PRD which is like a todo list for the AI and a chance for you to review it

2.2

Cursor Agent

Leverage Cursors agent mode and understand which models to use to build your features

2.3

UI Components

Work with UI components from shadcn/ui to make your first feature look professional

2.4

Real Functions

Build real functionality for your users and connect it to the UI components in your frontend

2.5

Zero Trust

Never trust user input - validate and sanitize everything to prevent XSS and SQL injection attacks

2.6

Debugging Flow

Format your code and detect errors and bad practices automatically with Prettier and ESLint

Level 3

Store your data: plan features, give AI helpful rules, consistent styles, saved data, safe access, and reviewed changes.

3.1

Feature Planning

Prioritze and the essential features first to avoid distraction and scope them to a realistic size

3.2

Cursor Rules

Create rules for Cursor to give the AI more context about your product and the tech stack

3.3

Style Systems

Use style definitions to give you web app a themed look and understand Tailwind CSS basics

3.4

Saving Data

Store and retrieve data in Supabase using modern database patterns and secure server-side operations

3.5

Database Security

Learn to assess and improve your Supabase database's security using the Security Advisor

3.6

Git Workflow

Build new features in git branches, create pull requests, and merge it into production

Level 4

Manage user accounts: planned sprints, smooth onboarding, powerful tools, sign-in + sign-up, and preview vs. live sites.

4.1

Sprint Planning

Manage a productive week with new features and important bug fixes in Linear.

4.2

MCP Server

Enhance your AI abilities with external tools through the power of MCP Server for more context

4.3

User Flow

Design a user experience from onboarding new users to making it easy to use your app

4.4

Let user signup and login to your app with email + password or Google and manage their profile

4.5

Auth Security

Make sure a user always is who they say they are and do only what they are allowed to do

4.6

Preview & Production

Configure domains in Vercel for your preview and production environments to reduce surprises

Level 5

Integrate with services: listen to users, extend with automation, add AI agents, secure systems, and debug production.

5.1

User Feedback

Build a feedback system so users can suggest features and report bugs

Coming Soon

5.2

AI Agents

Build a smart assistant that helps users get things done when they ask

Coming Soon

5.3

Mobile Responsive

Test your app across mobile devices and tablets for great experience

Coming Soon

5.4

Webhook Integration

Connect your app to other services so they automatically stay in sync

Coming Soon

5.5

Webhook Security

Make sure only real requests can trigger your app to prevent hacks

Coming Soon

5.6

Debug Production

Read production logs to quickly find and fix live issues

Coming Soon

Level 6

Monetize your app: design pricing, automate billing, gate features, protect payments, and share progress.

6.1

Product Pricing

Design pricing tiers so your product generates sustainable revenue

Coming Soon

6.2

Payment Provider

Automate your billing so subscriptions unlock features instantly

Coming Soon

6.3

Purchase Experience

Design your pricing page and checkout so users upgrade easily

Coming Soon

6.4

Payment Gates

Lock premium features behind plans so only paying customers access

Coming Soon

6.5

Payment Security

Securely handle payment data so your billing system stays safe

Coming Soon

6.6

Public Changelog

Build a changelog that publicly shows what you shipped to users

Coming Soon