Claude Code in Practice

A hands-on course for product managers who want to ship real things — without waiting on engineering.

Build production apps, write PRDs with AI, and go from idea to deployed product using Claude Code. No coding background required.

Taught by Hamza Farooq — Founder at Traversaal.ai · UCLA Anderson · ex-Google

⭐ #1 Highest Rated Claude Course on Maven

Three ways to learn:

    

---

✨ Featured Project — Royal Pop

A premium scroll-driven product landing page built from a single 15-second video. Drop in a product video, brief Claude with the video-to-website skill, and Claude scaffolds the whole site: frame-by-frame canvas playback bound to scroll, GSAP timelines per section, Lenis smooth scroll, persistent CTA. Vanilla HTML/CSS/JS, no bundler.

→ Open the example  ·  README walkthrough  ·  video-to-website skill  ·  20-sec demo (mp4)  ·  Live site

Built live for the Audemars Piguet × Swatch Royal Pop launch. The full README walks through how to do the same thing with your own product video, including the exact prompt for generating a luxury product turnaround video and the seven readability fixes that always come up.

---

🚀 Get Started

Three steps to your first session:

# 1. Clone the repo
git clone https://github.com/hamzafarooq/claude-code-starter.git
cd claude-code-starter

# 2. Launch Claude Code
claude

# 3. Explore skills, agents, and demos
# → See README.md for what's available

First time? Follow the full Installation guide below — takes about 10 minutes.

---

📦 What’s in This Repo

All course code, templates, skills, and commands live here. Come back here whenever you need files from class.

---

📝 Course Assignments

If you’re following the live cohort or self-paced course, these are the hands-on assignments for each module.

---

Module 1 — From Idea to Shipped Product

Skills used: /prd-generator, /user-story-writer

---

Module 2 — How the Web Works

Skills used: /explain-me-a-repo, /youtube-deepdive, /youtube-researcher

---

Module 3 — Sub-Agents: Your Team of Specialists

Agents used: research-agent, prd-reviewer, code-reviewer, data-analyst, copy-writer

---

Module 4 — Evals, Deploy & Production

Skills used: /skill-evaluator, /deploy-checklist

---

🛠️ Projects

Real apps built live in class using Claude Code — no engineering team. Fork them, break them, learn from them.

More projects get added as the course runs.

---

🧩 Skills Library

Skills are triggered with a /command. Install them once; Claude runs them on demand. All skills live in .claude/skills//SKILL.md. Most skills have a matching slash command file in .claude/commands/.md so you can invoke them as / directly from Claude Code.

.claude/
├── skills//SKILL.md   ← the full instruction set
└── commands/.md        ← thin wrapper that triggers the skill via /

To install a skill in your own project, copy the skills// folder and, if present, the matching commands/.md file into your project’s .claude/ directory. Note: a few entries appear only in one location — explain-me-a-repo is a command with no skill folder (it runs inline), and claude-code-deck is a skill folder with no command wrapper.

51 skills across 8 categories. Click any skill name to open its SKILL.md file.

---

🔍 Research

---

✍️ Content Writing

---

📋 Product Management

---

💻 Code & Quality

---

🎤 Presentations & Docs

---

🤖 Sub-Agent Skills (auto-triggered, no command needed)

---

🏆 Best Practices (from the experts)

Inspired by how the best practitioners actually use Claude Code. These skills enforce those principles directly in your workflow.

---

🎨 Design & UI (auto-triggered by description — no command needed)

A set of design-focused skills that Claude pulls in automatically when you ask it to build, redesign, or art-direct an interface. No /command — Claude matches them to your request, the same way it does sub-agents.

---

Skills Library — Inspiration & Credits

The 51 skills in this library were designed for this course, informed by research across the community. Key sources:

All SKILL.md files in this repo are original work, written for a PM audience. Patterns and ideas from the above are adapted, not copied.

---

🤖 Sub-Agents Library

Sub-agents are specialists Claude delegates to automatically — no /command needed. When your request matches an agent’s description, Claude hands it off, runs it in a separate context, and returns only the findings. All agents live in .claude/agents/.md.

---

🧠 Skills vs Sub-Agents vs Agents — What’s the Difference?

Three different ways to extend Claude Code. Here’s when to use each one:

Simple rule of thumb:

• Use a skill when you want to run the same prompt yourself, on demand.
• Use a sub-agent when you want Claude to automatically hand off specialist work (and you don’t want the details in your main chat).
• An agent is the underlying mechanism — sub-agents are agents, just scoped to delegate-and-return behavior. You’ll hear both terms used interchangeably.

---

🌐 Playwright vs MCP — What’s the Difference?

Both let Claude interact with a browser. Here’s when to use each:

Simple rule of thumb: Use MCP when you want Claude to browse something now, in conversation. Use Playwright when you need browser automation to run reliably at scale or on a schedule — that’s usually an engineering task.

---

📚 Course Topics

---

🌐 Deploy to Vercel

Once you’ve built something — a static site like Royal Pop, a Next.js app like MeetingMemo, or any project in this repo — get it on a live URL in under a minute. No build config, no DNS wrangling.

One-time setup

# Install the Vercel CLI (one time, globally)
npm i -g vercel

# Log in (opens your browser; pick GitHub / Google / email)
vercel login

Deploy from any project folder

# 1. Move into the project you want to deploy
cd demos/royal-pop-website   # or any folder with an index.html / package.json

# 2. First deploy — Vercel auto-detects the framework and creates the project
vercel --yes

# 3. Promote to production
vercel --prod

That’s it. Vercel returns two URLs — a preview URL for that deployment and the production alias (e.g. https://your-project.vercel.app). Every subsequent vercel --prod re-deploys instantly.

What gets auto-detected

Before you deploy

Run the /deploy-checklist skill — it catches the five most common failures (missing env vars, hardcoded localhost URLs, oversized assets, missing .gitignore entries, broken build commands) before Vercel tells you about them.

# In Claude Code:
/deploy-checklist

Environment variables

If your app uses an ANTHROPIC_API_KEY (or any other secret), don’t commit it. Add it in the Vercel dashboard:

1. Open your project on vercel.com
2. Settings → Environment Variables
3. Add ANTHROPIC_API_KEY for Production (and Preview if you want PR previews to work)
4. Re-deploy: vercel --prod

Full walk-through in MeetingMemo demo.

---

⚡ Install the Skill Pack (npx)

Get all 51 Claude Code skills in one command — no cloning required.

Prerequisite: Node.js 20 or later must be installed. Check with node --version. If you don’t have it, install from nodejs.org or run nvm install 22 && nvm use 22 if you use nvm.

# Install all 51 skills globally (~/.claude/skills/)
npx github:hamzafarooq/claude-code-starter@main --global

# Install only specific skills
npx github:hamzafarooq/claude-code-starter@main --global okr-writer sprint-planner competitor-research

# See what's available
npx github:hamzafarooq/claude-code-starter@main --list

# Install into the current project only (./.claude/skills/)
npx github:hamzafarooq/claude-code-starter@main --local

# Remove skills you no longer want
npx github:hamzafarooq/claude-code-starter@main --uninstall okr-writer

Note: Existing skills with the same name are never overwritten unless you add --force. Restart Claude Code after installing for skills to appear in /help.

---

🌐 Community Resources

Top GitHub repos for going deeper on skills, best practices, and memory management. Full write-ups in docs/resources.md.

Discover & Browse

Skills & Best Practices

Memory Management

---

⚙️ Installation

Takes about 10 minutes. You’ll do it once.

Step 1 — Choose your access method

Option A: Claude Max (recommended)

Claude Max ($100/month) includes Claude Code with no usage limits and no per-token billing.

1. Go to claude.ai/upgrade → subscribe to Max
2. Claude Code is included — no API key needed
3. Run claude and log in with your Claude account

Option B: API Key (pay as you go)

Better if you want to control costs or are already an API customer.

1. Go to console.anthropic.com → create account → API Keys → Create Key

2. Copy the key (starts with sk-ant-...) — you won’t see it again
3. Set it in your terminal:

export ANTHROPIC_API_KEY=sk-ant-your-key-here

# Make it permanent:
echo 'export ANTHROPIC_API_KEY=sk-ant-your-key-here' >> ~/.zshrc
source ~/.zshrc

Never commit your API key to GitHub.

Step 2 — Install Claude Code

Requires Node.js (LTS version).

npm install -g @anthropic-ai/claude-code

# Verify:
claude --version

Step 3 — Start Claude Code

cd claude-code-starter
claude

You’re in. Explore demos/ for apps, .claude/skills/ for skills, and .claude/agents/ for agents.

---

💬 Prompts Worth Keeping

---

🔧 Troubleshooting

command not found: claude Run npm install -g @anthropic-ai/claude-code again. Check Node.js is installed: node --version.

API key error Run export ANTHROPIC_API_KEY=your-key-here. Make sure the key includes sk-ant-.

Claude isn’t reading my CLAUDE.md The file must be named exactly CLAUDE.md (all caps) in the folder where you ran claude.

Skill not triggering Check the path is .claude/skills//SKILL.md and the name: field in the frontmatter matches what you typed after /.

---

Claude Code in Practice · Hamza Farooq · Traversaal.ai · ⭐ #1 Highest Rated Claude Course on Maven