Studio Hyra University

Claude Code Mastery

Set up, work, and ship like a professional studio. Step by step.

12 lessons · ~60 min · Expert

Lesson 01

Install everything

Before you write a single line of code, your environment needs to be right. This lesson gets every tool installed and verified. Takes 30-45 minutes the first time.

Open VS Code and the terminal

Open VS Code. Click Terminal → New Terminal in the menu bar. A panel opens at the bottom.

Install Claude Code

Terminal

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

If you see "npm: command not found": go to nodejs.org, download and install Node.js, close the terminal (click the X), open a new one (Terminal → New Terminal), try again.

Start Claude Code

Type claude, press Enter. Browser opens to sign in. Sign in, click Authorize, come back to VS Code.

Let Claude install everything else

Say to Claude

Check what development tools I have installed. I need: Docker Desktop, Git, GitHub CLI, Supabase CLI, and Vercel CLI. Install anything that's missing. Walk me through creating accounts for GitHub, Supabase, and Vercel if I don't have them yet.

Claude checks your system and installs what's missing. It asks you questions along the way — answer them and let Claude work.

If Claude says "Docker Desktop needs to be running": open Docker Desktop from Applications (Mac) or Start Menu (Windows). Wait for the whale icon in your menu bar. Tell Claude it's running.

Verify

Say to Claude

Check that everything is installed. Show me what's working and what's not.

Note

This is the only setup lesson. Everything after this is about using the tools, not installing them.

Do This Now

Run all five version checks right now. Screenshot it. That's your development environment, verified.

Lesson 02

Your first CLAUDE.md

CLAUDE.md is the first file Claude reads. Every rule in it shapes every line of code Claude writes. Get it right and Claude works like a senior developer who knows your project.

CLAUDE.md is the first file Claude reads when you start a session. It tells Claude about your project, your rules, and your current progress.

Open your project in VS Code

Click File → Open Folder and pick your project folder.

Start Claude Code

Terminal → New Terminal. Type claude, press Enter.

Ask Claude to create it

Say to Claude

Create a CLAUDE.md for this project. Include: what the project is, what phase we're in, what's done and what's next, our critical rules (design tokens for all colors, all text through the translation system, validate user input, run a build check before committing), and a rule that you should update the status after every commit. Base it on what you see in the project.

Review it

Click on CLAUDE.md in the left sidebar. Read it. Change anything that doesn't match your project.

Test it

Say to Claude

What project are we working on? What are the critical rules?

Claude should answer from your CLAUDE.md.

Important

Update the status section after every commit. A stale CLAUDE.md is worse than no CLAUDE.md because Claude trusts it.

Do This Now

Create the file right now. Fill in Status, three rules, and two critical files. Ask Claude a question about your project. See the difference.

Lesson 03

Connect your MCPs

MCPs let Claude talk directly to your database, deployment, and documentation. Instead of you copying information between tools, Claude accesses them itself.

MCPs let Claude talk directly to your services instead of you having to copy-paste information between tools.

Connect Supabase

Say to Claude

Set up the Supabase MCP so you can talk to my database directly.

Claude asks for credentials. Find them at supabase.com → your project → Settings → API. Copy the Project URL and Service role key (click "Reveal") and paste them to Claude.

Test it:

Say to Claude

What tables exist in my database?

Connect Context7

Say to Claude

Look up the current Next.js documentation for how to create a page with dynamic routes.

If Claude references current docs, Context7 is working.

Connect Vercel

Say to Claude

Set up the Vercel MCP so you can deploy directly.

Verify all connections

Say to Claude

What MCPs do you have access to? Test each one.

Do This Now

Set up the Supabase MCP right now. Ask Claude to inspect your database. The first time it lists your actual tables, you'll understand why this matters.

Lesson 04

Create your first skills

Skills are reusable instruction files that make Claude consistent. This lesson creates three real ones you'll use immediately.

Skills are instruction files that tell Claude how YOU want things done.

Create starter skills

Say to Claude

Create a skills folder at .claude/skills/ with three starter skills. First, "critical" — our non-negotiable rules: design tokens for colors, text through the translation system, validate user input, never commit secrets, build check before committing. Second, "page-build" — conventions for building pages: file structure, spacing, typography, testing checklist. Third, "eod" (end of day) — the wrap-up routine: update CLAUDE.md, commit, push, summarize.

Check them

Click .claude/skills/critical/SKILL.md in the left sidebar. Read the rules. Add anything missing. Remove anything that doesn't apply.

Test them

Say to Claude

What skills do you have access to?

Then test with a real task:

Say to Claude

I want to build a new About page.

Claude should follow your page-build skill patterns.

Adding more skills later

Say to Claude

Create a new skill called "security" with rules for authentication, database security, and input validation in this project.

Tip

Skills grow from mistakes. Every time something goes wrong that a rule would have prevented, add that rule. After a few months this is your most valuable project file.

Do This Now

Create all three files right now. They take 10 minutes total. Then ask Claude to build something small and watch how it follows your patterns from the first line.

Lesson 05

How to start your day

The first 2 minutes of a Claude Code session determine the quality of everything that follows.

Do this every time you start working. 2 minutes.

Open your project and start Claude Code

Open VS Code. File → Open Folder → your project. Terminal → New Terminal. Type claude.

Important

Working on multiple projects? Ask Claude: "What project are we in?" If it says the wrong name, you opened the wrong folder.

Check the status

Say to Claude

What's our current status? What did we work on last time and what's next?

If the status is wrong:

Say to Claude

The contact page is actually done. Update the status: we're starting on the Insights page next.

Confirm what to work on

Say to Claude

What should we work on today?

Do This Now

Tomorrow morning, do the 3-step ritual before touching any code. Notice how Claude's first response is more useful than usual.

Lesson 06

How to build a feature

The step-by-step process for building anything. Plan, build in pieces, test as you go, second pass, commit.

Start with a plan

Press Shift+Tab. Check the bottom-left corner says Plan Mode.

Say to Claude

I want to add a contact form to the site. Before you start building, plan the approach. What do we need? How should it work?

Read the plan. Adjust what's off:

Say to Claude

I also want it to send me an email. And skip the phone field — just name, email, and message.

Press Shift+Tab to exit plan mode.

Build piece by piece

Say to Claude

Start with the form component. Fields for name, email, and message. Use our design tokens.

Check the result in the browser. Then:

Say to Claude

Now make the form actually work. Send me an email when someone submits it.

Give feedback

Say to Claude

The spacing is too tight. Add more room between the fields. The submit button should be bigger and match our homepage button style.

Second pass

Say to Claude

Review everything you just built. Does it work on a phone? Are colors using design tokens? Any text hardcoded? Any security issues with the form? Fix what you find.

Save

Say to Claude

Everything looks good. Commit and push.

Claude commits, pushes, and updates CLAUDE.md status.

Do This Now

Next feature you build, do step 1 (plan) and step 4 (second pass). Just those two. The plan improves the build. The second pass catches what you missed.

Lesson 07

How to check quality

Two quality checks: the quick one before every commit, the thorough one at phase end.

Quick check (before every commit)

Say to Claude

Build the project and make sure there are no errors.

Thorough check (after finishing a major feature)

Say to Claude

Do a thorough quality check. Look for: hardcoded colors that should use design tokens, text that should be in translation files, input fields without validation, pages that break on mobile, and security issues. Fix everything you find.

What these checks catch

Colors written directly instead of using design tokens (breaks when you change themes)
Text in English directly in a component instead of the translation file (breaks other languages)
Forms that accept any input without checking if it's valid
Pages that look fine on desktop but overflow on a phone
Endpoints that anyone on the internet can abuse

Tip

The more you do quality checks, the less they find. Your skills prevent most issues from the start.

Do This Now

Search your src/ folder for hex colors right now. If you find any in component files, replace them with CSS variables. That's one quality check done.

Lesson 08

How to end your day

The last 5 minutes of your session set up tomorrow's success.

5 minutes at the end of every session.

Update the status

Say to Claude

We're done for today. Update CLAUDE.md with what we finished, what's in progress, and what to start with next time.

Commit and push

Say to Claude

Commit everything and push to GitHub.

Verify

Say to Claude

Did the push succeed? Is everything committed?

Note

Tomorrow morning Claude reads the CLAUDE.md you just updated. It knows exactly what was finished and what's next. No "where was I?" confusion.

Do This Now

Do it tonight. Update status, write restart notes, commit, push. Tomorrow morning, read the notes and see how much faster your session starts.

Lesson 09

Building your skills library

You started with three skills. Here's how to grow them into a knowledge base that makes Claude better every week.

Add a rule every time something goes wrong

Example: you deploy and the Dutch translation is missing.

Say to Claude

Add a new rule to our critical skill: before committing any text changes, verify that all translation files have the new keys.

Create new skills when patterns emerge

Say to Claude

Create a new skill called "database" with rules for how we handle database work. Include: always create security policies on new tables, always check existing tables before making changes, always test that data saves correctly.

Review your skills monthly

Say to Claude

Show me all our current skills. Are any outdated? Do any overlap? Suggest improvements.

Tip

After three months, your critical skill has 15-20 rules. Each one is a mistake that never happens again. New team members inherit all your knowledge instantly.

Do This Now

Think of the last three things that went wrong. Write each prevention as a rule in your critical skill. Three debugging sessions compressed into three lines.

Lesson 10

Testing that accumulates

Tests are a safety net that grows with every feature. Playwright tests for every page, every locale, every viewport.

Ask Claude to write tests

Say to Claude

Write tests for our contact page and run them. Make sure: the page loads in all our languages, the form shows errors on empty or invalid submit, a valid submission works, and nothing overflows on a phone screen. Tell me what passes and what fails.

Fix failures

Say to Claude

The phone test failed. What's wrong? Fix it and run the test again.

Run all tests before committing

Say to Claude

Run all tests to make sure nothing is broken.

All green? These tests are permanent. Use them before every big change.

Tip

You describe what should work. Claude writes the tests, runs them, fixes what fails.

Do This Now

Pick the page with the fewest tests. Ask Claude to write tests using the four-point structure. Run them. Fix what fails. Commit.

Lesson 11

Docker from zero

Consistent environments in 15 minutes. From zero to running in Docker.

When do you need Docker?

Just you: nice to have. Skip until later.
You and someone else: set it up. Prevents "works on my machine."
Deploying for real: strongly recommended.

Make sure Docker Desktop is running

Open Docker Desktop. Wait for the whale icon in your menu bar.

Ask Claude to set up Docker

Say to Claude

Set up Docker for our project. I want to run it in a container during development so changes show up immediately in the browser. Create whatever files are needed.

Start it

Say to Claude

Start the project in Docker.

Claude starts Docker and tells you the address. Open it in your browser. Edit any file in VS Code — the browser updates automatically.

Stop it

Say to Claude

Stop the Docker containers.

Do This Now

Create Dockerfile.dev and docker-compose.yml. Run docker compose up dev. See your project in Docker. That's the whole setup.

Lesson 12

The system after 30 days

What your project looks like after a month of this workflow. The compound effect.

Day 1 vs Day 30

DAY 1

CLAUDE.md has 5 basic rules
3 starter skills
No tests
You explain the project every session
"I think it looks fine"

DAY 30

CLAUDE.md has 15+ rules, always accurate
8-10 skills, each from real experience
100+ tests, run in 30 seconds
Claude knows the project instantly
Systematic quality check every commit

Each skill makes Claude smarter. Each test makes changes safer. Each CLAUDE.md update makes the morning faster. The system gets better with use.

Tip

Not every habit sticks day 1. The morning ritual takes a week. The second pass feels expensive until it catches a bug. Skills feel like overhead until the third time they prevent the same mistake. Give it 30 days.

Do This Now

Set a reminder for 30 days from now. Open this lesson again. Compare where you are to where you started.

Now build.

Your setup is production-grade. Your workflow is professional. Time to build something real.

Workshop: Roast My WebsiteWorkshop: Roast My Website Talk to usTalk to us