Claude Code skills tutorial: from install to first build
I've walked about 40 founders through their first Claude Code build at this point. The process has gotten smoother every time, and I've identified the exact steps and common mistakes that make the difference between a productive first session and a frustrating one.
This is the tutorial I wish existed when I started. No fluff. Just the steps, in order, with the context you need to not get stuck.
Step 1: Install Claude Code
Claude Code is a CLI tool. You need Node.js 18+ installed first. If you don't have it, grab it from nodejs.org.
Then open your terminal and run:
npm install -g @anthropic-ai/claude-code
That's it for installation. Run claude in your terminal to verify it works. You'll need to authenticate with your Anthropic account on first run. This requires a Claude Pro subscription ($20/month).
The whole setup takes about 2 minutes. If you run into issues, it's almost always a Node.js version problem. Make sure you're on 18 or later.
Step 2: Get a skill file
Head to our store and grab a skill. For this tutorial, I'll use the SaaS Builder skill because it produces the most complete output for a first build.
After purchase, you'll get a SKILL.md file. Download it.
If you're not sure which skill fits your project, take the skill finder quiz. It'll recommend the right one in 30 seconds.
Step 3: Set up your project directory
Create a new folder for your project. Keep it clean—don't start in a cluttered directory.
mkdir my-saas-app
cd my-saas-app
Copy the SKILL.md file into this directory. Your folder should look like:
my-saas-app/
SKILL.md
That's your starting point. Nothing else needed.
Step 4: Launch Claude Code and give it context
Open Claude Code in your project directory:
claude
Now give it your first prompt. This is the most important step. A vague prompt produces vague output. Be specific about what you're building, who it's for, and what the core features are.
Here's the prompt structure I use:
"Read the SKILL.md file and follow its patterns. Build me a [type of app] for [target user]. Core features: [feature 1], [feature 2], [feature 3]. Include auth with email/password, a user dashboard, and Stripe billing with [pricing tiers]."
Here's a real example I used last month:
"Read SKILL.md. Build a client portal SaaS for freelance designers. Features: project tracking with status updates, file sharing with drag-and-drop upload, invoice generation with PDF export, and a client-facing view. Auth with email and Google OAuth. Stripe billing with a free tier (3 projects) and pro tier at $19/month."
The agent reads the skill file first, then starts building. You'll see it create files, install dependencies, and structure the project in real time.
Step 5: Let the agent work, then review
Your first build will generate 40-80 files depending on complexity. Don't interrupt the agent while it's in flow. Let it complete the initial scaffold.
Once it stops, review what was built:
npm run dev
Open your browser and look at what's there. You'll typically see:
- A login/signup flow that works
- A dashboard layout with navigation
- Placeholder pages for each feature you mentioned
- Database schema files ready for migration
- API routes stubbed out with the right patterns
- A basic landing page
This is your foundation. It won't be finished—no first pass ever is—but the architecture will be solid because the skill file guided every structural decision.
Step 6: Iterate feature by feature
Now you build on the foundation. Instead of one massive prompt, work feature by feature. This is where most people mess up. They try to build everything in one shot. Don't.
Good iteration pattern:
"Build out the project tracking feature. Users should be able to create projects with a title, description, and client assignment. Show projects in a table on the dashboard with status badges. Include a detail page for each project."
Then after that's done:
"Add file sharing to projects. Users upload files via drag and drop. Store metadata in the database. Show a file list on the project detail page with download links."
Each prompt builds on what exists. The skill patterns ensure consistency across features. The agent references the same architectural conventions because it's still reading the same skill file.
Step 7: Polish and deploy
After your core features work, do a polish pass:
"Review the entire app and fix any UI inconsistencies. Make sure loading states exist for all data fetches. Add error handling for failed API calls. Make the responsive design work properly on mobile."
Then set up deployment. If you're on Vercel (free tier handles most MVP-stage traffic):
"Set up this project for Vercel deployment. Create the necessary configuration files. Document the environment variables I need to set."
Push to GitHub. Connect to Vercel. Set your env vars. You're live.
Common mistakes I see in first builds
Prompt is too vague. "Build me a SaaS" gives the agent nothing to work with. Be specific about features, users, and pricing.
Fighting the skill patterns. If the skill uses Supabase for auth, don't ask for Firebase in the middle of the build. The patterns are designed to work together. Mixing approaches creates the kind of architectural mess the skill was designed to prevent.
Not reading the output. The agent writes code fast. Take time to actually open files and understand what was generated. You'll catch issues early and give better follow-up prompts.
Trying to build everything at once. Break it into features. Build, review, iterate. Each cycle produces cleaner output than one massive prompt.
Skipping the skill file. Some people try to use Claude Code without a skill. It works for simple scripts, but for a full application, the difference in output quality is massive. The skill provides the production context that turns generic code into deployable software.
What you should have after following this tutorial
If you followed these steps with the SaaS Builder skill, you should have:
- A working Next.js application with proper architecture
- Auth flows (login, signup, password reset)
- A user dashboard with navigation
- Your core features built out and functional
- Stripe billing integrated (or ready to connect)
- A deployable codebase on Vercel
Total investment: $20 (Claude Pro) + $29 (skill file) = $49. Total time: one focused session, roughly 3-4 hours for a first build. Compare that to any alternative.
Not sure which skill to start with? Take the skill finder quiz and get a recommendation based on your specific project.
Frequently Asked Questions
How much does Claude Code cost?
Claude Code requires a Claude Pro subscription at $20/month. That gives you the CLI agent with generous usage limits for coding tasks. Skill files are a separate one-time purchase at $29 each from our store. So your total cost to get started is $49.
Do I need to know how to code to follow this tutorial?
You need basic terminal skills—navigating directories, running commands like npm run dev. But you don't need to write code yourself. The skill file provides the technical expertise and Claude Code handles the implementation. Your job is describing what you want in plain English and reviewing what comes out.
How long does the first build actually take?
Setup is about 10 minutes. The actual build session runs 2-4 hours depending on how many features you're building and how much iteration you do. By the end, you should have a working application with auth, a dashboard, and core functionality running in your browser.
Can I use this tutorial with Cursor instead of Claude Code?
Yes. The skill file works identically in Cursor. Instead of running claude in the terminal, you open Cursor, add the skill file to your project context, and use the AI chat panel. The prompts are the same, the output is the same, and the iteration workflow is the same. Just a different interface.