Getting Started Guide

From Zero to Live SaaS

A simple, step-by-step guide to understanding Claude Code, skills, and how to ship your product faster than you thought possible.

This website was built with ClaudeBoyz in under 24 hours
Step 1

What is Claude Code?

Understanding your AI pair programmer

Imagine having a senior developer sitting next to you, 24/7, who can read your entire codebase, write code, run commands, and help you build anything. That's Claude Code.

The Simple Explanation

Think of Claude Code like a really smart assistant that lives in your terminal. You tell it what you want to build in plain English, and it figures out how to do it.

It's not just autocomplete or snippets. It's an AI that understands context, can navigate your project, and writes real, working code.

claude-code demo
$

Reads your code

Understands your entire project

Writes code

Creates files, functions, components

Runs commands

Installs packages, runs builds

Step 2

What are Skills?

Teaching Claude to be an expert

Claude Code is smart, but it's like a brilliant junior developer — it knows a lot, but doesn't always know the best way to do things for your specific use case.

The Simple Explanation

Skills are instruction manuals for Claude.

Imagine you hired a chef. They know how to cook, but if you give them your grandmother's secret recipe, they'll make it exactly how grandma did. Skills are those recipes.

Without skills, Claude might set up Stripe in 10 different ways. With our Stripe skill, it sets it up the battle-tested way that's already working in production.

~/.claude/skills/
$

What's inside a skill file?

Context: When to use this skill

Steps: Exact implementation order

Best practices: Security, performance tips

Examples: Real code patterns to follow

Step 3

What are Agents?

Specialized AI teammates that work together

Claude Code doesn't just use one AI. It spawns specialized agents for different tasks — like having a team of experts instead of one generalist.

The Simple Explanation

Agents are specialized workers.

Imagine a construction project. You don't have one person do everything — you have an architect, electrician, plumber, and inspector. Each knows their domain deeply.

Claude Code works the same way. When you ask it to "explore the codebase," it spawns an Explore agent. When you need to debug, it spawns a Debug agent. Each agent is tuned for its specific job.

Claude Code Built-in Agents

Explore

Searches and navigates codebases. Finds files, patterns, and answers questions about structure.

Plan

Designs implementation strategies. Creates step-by-step plans before coding.

Bash

Runs terminal commands. Handles git, npm, docker, and system operations.

General

Multi-step research and complex tasks. Coordinates when needed.

ClaudeBoyz Agent Hierarchy (11 Agents)

ClaudeBoyz uses 11 specialized agents in a hierarchy—a Planner at the top for strategy, an Orchestrator for coordination, specialists for execution, and an Alpha for autonomous loops:

claudeboyz-planner

Strategic brain (Opus). Handles architecture, security reviews, and complex problem decomposition.

claudeboyz-orchestrator

Coordinates workflows and delegates to the right specialist agents.

claudeboyz-builder

Expert SWE for implementation, architecture, and coding features.

claudeboyz-debugger

Finds and fixes bugs, performance issues, and errors.

claudeboyz-marketer

Copywriting, positioning, and market research.

claudeboyz-writer

Technical writer for docs, READMEs, and content.

claudeboyz-reviewer

Fast validation (Haiku). Build checks, linting, and quality gates.

claudeboyz-mobile

React Native and Expo specialist for iOS and Android apps.

claudeboyz-alpha

Autonomous loop agent. Plans, implements, and validates until complete.

claudeboyz-seo

SEO/LLMO/GEO/AEO optimization expert for AI search visibility.

claudeboyz-swift

Native iOS development with SwiftUI, StoreKit 2, and CloudKit.

Why does this matter?

Without specialized agents, Claude tries to do everything at once. With a hierarchy, complex decisions go to the Planner (Opus-level reasoning), while routine work goes to efficient specialists.

The Planner handles "how should we architect this?" questions. The Orchestrator coordinates workflows. The Reviewer catches issues before you ship. And the Alpha agent runs autonomously until your task is complete.

Step 4

What are Hooks?

Automated quality gates that run before and after operations

Hooks are automated checks that run at key moments during Claude Code operations. They catch security issues, enforce code quality, and track costs automatically.

The Simple Explanation

Hooks are like automatic safety nets.

Imagine you have a spell-checker that runs before you send an email. Hooks work the same way, but for code. Before Claude commits code, hooks check for exposed API keys. Before code runs, hooks validate for security vulnerabilities. After a session, hooks track how much it cost.

You don't have to remember to run these checks—they happen automatically.

Security Hooks (3)

  • secret-scanner - Blocks exposed API keys, tokens, passwords
  • input-validator - Checks for SQL injection, XSS
  • dependency-audit - Scans for vulnerable packages

Quality Hooks (4)

  • eslint-check - Runs ESLint on modified files
  • typescript-check - Type-checks before committing
  • test-runner - Runs affected tests automatically
  • format-check - Ensures Prettier formatting

Session Hooks (3)

  • session-logger - Logs all operations
  • context-saver - Saves context between sessions
  • checkpoint-manager - Creates restore points for Alpha

Budget Hooks (2)

  • cost-tracker - Tracks API token usage and cost
  • budget-alert - Warns when approaching limits

Hooks run automatically

You don't need to configure anything. When you install ClaudeBoyz, the hooks are already set up. They run silently in the background, only alerting you when they catch something.

For example, if you accidentally try to commit code with an API key in it, the secret-scanner hook will block the commit and tell you exactly where the problem is.

Step 5

Why ClaudeBoyz Skills?

Structured guidance, not magic

You can absolutely write your own skills or find free ones online. ClaudeBoyz saves you time by providing structured, tested patterns for common SaaS tasks—but it's not a silver bullet. You still need to understand what you're building.

What ClaudeBoyz Actually Does

Skills are instruction sets that guide Claude through specific tasks. They help with:

  • Consistency: Same setup every time (Stripe, Supabase, Vercel)
  • Best practices: Webhook signature verification, RLS policies
  • Edge cases: Error states, loading states, validation
  • Time savings: Skip the "how do I set this up" research

They won't write your entire product for you. They guide Claude through the foundational pieces so you can focus on what makes your product unique.

Without Structured Skills

  • Claude may use different patterns each time
  • You research best practices yourself
  • More back-and-forth to get it right
  • Still works, just takes longer

With ClaudeBoyz Skills

  • Consistent patterns across projects
  • Best practices built into the instructions
  • Less prompting, faster results
  • Opus-level review for security-critical code

Honest take: If you enjoy setting up infrastructure from scratch or have very custom requirements, you might not need this. ClaudeBoyz is for builders who want to ship standard SaaS patterns quickly and focus on their unique features.

Step 6

How to Install Your Skills

Three commands, you're done

After purchase, you'll receive a zip file with all your skills. Installation is straightforward — just copy them to Claude's skills folder.

Terminal — Installation
$

Step-by-step:

  1. 1

    Download the zip file

    Check your email after purchase. Download the attachment.

  2. 2

    Unzip the package

    Double-click on Mac/Windows, or run unzip claudeboyz-pkg-XX.zip

  3. 3

    Copy to Claude's skills folder

    Run: cp -r skills/* ~/.claude/skills/

    Or on Windows: copy skills\* %USERPROFILE%\.claude\skills\

  4. Done! Start using your skills

    Claude Code automatically detects and uses installed skills.

Don't have Claude Code yet?

Install it first with: npm install -g @anthropic-ai/claude-code

You'll need a Claude API key from console.anthropic.com

Read the full installation guide

Prerequisites

Step 7

Building Your First SaaS

Watch the magic happen

With skills installed, you just tell Claude what you want. It figures out which skills to use and builds it for you. Here's what a typical session looks like:

Building a SaaS
$

What you can build:

Landing Pages

  • • Hero sections
  • • Feature showcases
  • • Pricing tables
  • • FAQ accordions

Payments

  • • Stripe integration
  • • LemonSqueezy
  • • Webhook handlers
  • • Subscription management

Full SaaS

  • • Authentication
  • • User dashboards
  • • API routes
  • • Database setup
Step 8

Building Mobile Apps

React Native with Expo + Firebase (DreamBear Stack)

Want to build mobile apps? ClaudeBoyz includes a complete mobile development stack using React Native with Expo, Firebase for backend services, and RevenueCat for subscriptions.

The DreamBear Stack

A production-ready mobile stack that just works:

  • Expo SDK 52+ - Modern React Native with file-based routing
  • Firebase - Auth, Firestore, Storage, Push Notifications
  • RevenueCat - Subscriptions that work on iOS and Android
  • Claude + ElevenLabs - AI content generation and voice synthesis

Everything is pre-configured with security in mind. Auth and payment code uses the Opus model for critical review.

Building a Mobile App
$

Mobile Skills (25 Mobile + 15 Shared)

The Complete package includes React Native (Expo), native Swift/iOS, and shared utility skills.

React Native (17)

  • • mobile-scaffold, expo-router
  • • state-zustand, firebase-setup
  • • auth-firebase (Opus)
  • • firestore-schema (Opus)
  • • push-notifications, audio-playback
  • • ai-voice-eleven, ai-story-claude (Opus)
  • • revenuecat-setup (Opus)
  • • analytics-mixpanel, mobile-testing
  • • appstore-submit, offline-cache
  • • firebase-storage, ios-builder

Swift/iOS (8)

  • • swift-project
  • • swift-architecture
  • • swift-ui, swift-data
  • • swift-networking
  • • swift-auth (Opus)
  • • swift-testing
  • • swift-appstore

Shared Utilities (15)

  • • claudeboyz-alpha, orchestrator
  • • help-me, model-advisor
  • • docs-reference, docs-checker
  • • smart-lookup, mcp-integration
  • • + more utilities
Step 9

Building iOS with Swift

Native iOS apps with SwiftUI and modern architecture

For native iOS performance and full platform access, ClaudeBoyz includes Swift skills that build production-ready iOS apps with clean architecture.

Why Native Swift?

React Native is great for cross-platform, but sometimes you need native:

  • Performance-critical apps - Games, AR, complex animations
  • Deep OS integration - HealthKit, Apple Watch, Widgets
  • App Clips & CarPlay - iOS-only features
  • Existing Swift codebase - Adding features to native apps

The Swift skills use MVVM architecture, dependency injection, and modern Swift features like async/await and SwiftData.

Building an iOS App
$

Swift iOS Skills (8 Total) - Included in Complete Package

All Swift skills are included in the Complete package alongside React Native skills.

Foundation & Core

  • • swift-project
  • • swift-architecture
  • • swift-ui
  • • swift-data
  • • swift-networking

Security & Quality

  • • swift-auth (Opus)
  • • swift-testing
  • • swift-appstore

Architecture Features

  • MVVM with clean separation of concerns
  • Dependency injection for testability
  • SwiftData for modern persistence
  • Async/await for clean async code

Testing & Quality

  • XCTest for unit testing
  • Swift Testing for modern tests
  • UI testing with XCUITest
  • App Store submission guide
Step 10

Edge with Clerk + Cloudflare

Global edge deployment with modern auth and SQLite

Want blazing-fast global performance? Deploy your Next.js app to Cloudflare Pages with Clerk for authentication and D1 for your database — all running at the edge.

Why Edge Deployment?

Your app runs closer to your users:

  • Cloudflare Pages - Next.js deployed to 300+ edge locations
  • Clerk Auth - Modern authentication with organizations and webhooks
  • D1 Database - SQLite at the edge with Drizzle ORM
  • KV Storage - Fast caching, sessions, and feature flags

This stack is perfect for global SaaS apps that need low latency everywhere. Auth uses Opus for security-critical webhook verification.

Building an Edge App
$

Edge/Cloudflare Skills (5 Total)

Authentication

  • • auth-clerk (Opus)

Infrastructure

  • • cloudflare-setup
  • • cloudflare-workers

Data

  • • database-d1
  • • cloudflare-kv

Clerk Auth Features

  • Pre-built SignIn/SignUp components
  • Middleware for protected routes
  • Webhooks with Svix verification
  • Organizations for multi-tenancy

Cloudflare Stack

  • Next.js on Pages with @cloudflare/next-on-pages
  • D1 SQLite with Drizzle ORM migrations
  • KV for caching and feature flags
  • Workers for custom edge compute

Helpful Resources

Everything you need to get started with Claude, Claude Code, and building your SaaS.

Ready to start building?

Get the complete skill package and go from idea to live product in days, not months.