Claude Code マスタークラス：ゼロからプロダクトをリリースするための完全ガイド

CyrilXBT @cyrilXBT Claude Code Masterclass: The Complete Guide From Zero to Shipping 10 20 214 127K I am going to tell you something that took me months to figure out. Claude Code is not a coding assistant. That framing is what keeps most people stuck at the surface. They open it, ask it to write a function, get the function, close it. They think they used Claude Code. They did not. Claude Code is an autonomous agent that lives in your terminal and can build, test, deploy, and maintain entire software projects with minimal supervision. The gap between using it as a coding assistant and using it as an autonomous builder is the gap between getting occasional help and having an engineer who works around the clock. This guide closes that gap completely. Every concept. Every command. Every workflow. From installation to shipping your first real product. Part One: Installation and Setup Installing Claude Code Claude Code runs in your terminal. You need Node.js version 18 or higher installed first. Check your Node version: node --version If you need to install or update Node, go to nodejs.org and download the current LTS version. Install Claude Code globally: npm install -g @anthropic/claude-code Verify the installation worked: claude --version Setting Up Your API Key Get your API key from console.anthropic.com. Create an account if you do not have one. Navigate to API Keys and create a new key. Set it in your terminal: export ANTHROPIC_API_KEY=your_key_here To make this permanent so you never have to set it again, add it to your shell profile. For most Mac and Linux users: echo 'export ANTHROPIC_API_KEY=your_key_here' >> ~/.zshrc source ~/.zshrc For Windows users using PowerShell: [System.Environment]::SetEnvironmentVariable('ANTHROPIC_API_KEY', 'your_key_here', 'User') Launching Claude Code Navigate to your project directory and launch: cd your-project-folder claude Or start a new project from scratch: mkdir my-new-project cd my-new-project claude Claude Code will initialize in that directory. Everything it does will be scoped to that folder unless you explicitly tell it otherwise. Part Two: The CLAUDE.md File This is the most important concept in the entire guide. Most people who struggle with Claude Code have never built a proper CLAUDE.md file. Most people who get extraordinary results from Claude Code have one that is deeply specific and detailed. The CLAUDE.md file is a markdown document you create at the root of your project. Claude Code reads it every single time it launches in that directory. It is the permanent context that tells Claude Code who you are, what you are building, how your project is structured, and exactly what you want it to do. Without a CLAUDE.md Claude Code starts every session from zero. With a strong CLAUDE.md it starts every session already deeply briefed on your entire project. Here is a complete CLAUDE.md template: # PROJECT: [Your Project Name] ## What This Is [One paragraph describing exactly what you are building and who it is for] ## Tech Stack - Frontend: [React / Next.js / Vue / plain HTML] - Backend: [Node / Python / etc] - Database: [Supabase / PostgreSQL / MongoDB] - Styling: [Tailwind / CSS / SCSS] - Deployment: [Vercel / Railway / etc] ## Project Structure [Describe your folder structure and what lives where] src/ components/ — reusable UI components pages/ — route-level page components lib/ — utility functions and helpers api/ — API route handlers ## Coding Standards - [Your language preferences — TypeScript vs JavaScript] - [Error handling approach] - [How you name files and functions] - [Any patterns you always use] ## What I Am Building Right Now [The current feature or task you are working on] ## What Claude Code Should Never Do - Never modify files in [protected folders] - Never read or access .env files - Never push to git without my explicit instruction - Never delete files without confirming with me first ## Important Context [Anything else Claude Code needs to know about your project] Save this as CLAUDE.md in your project root. The more specific you make it the better Claude Code performs. Part Three: Core Commands and Workflows Basic Commands Once Claude Code is running you interact with it in plain English. But knowing which phrases trigger which behaviors makes you dramatically more effective. Starting a new feature: Build a user authentication system with email and password login. Use Supabase for the backend. Store sessions in cookies. Create the login page, signup page, and a protected dashboard route. Reviewing existing code: Read all the files in the src/components folder. Tell me what each component does and identify any code quality issues, duplicate logic, or patterns that should be refactored. Fixing a bug: There is a bug where [describe the behavior]. It happens when [describe the trigger]. I expect it to [describe expected behavior]. Find the cause and fix it. Adding to existing code: I want to add [feature] to the existing [component/file]. Read the current implementation first, then extend it. Do not change anything that is currently working. Only add what is needed for the new feature. The /compact Command When your conversation gets long, context fills up and Claude Code starts to lose track of earlier decisions. Run this regularly: /compact This summarizes the conversation so far and clears the context while preserving the essential information. Think of it as hitting save on a long session. The /clear Command If Claude Code seems confused or is building in the wrong direction, start fresh: /clear This completely resets the conversation. Your files are not affected. Only the conversation history is cleared. Asking Claude Code to Review Its Own Work One of the most powerful prompts in Claude Code is asking it to evaluate what it just produced: Review what you just built. Identify any lines of code that seem fragile, any edge cases not handled, any security issues, and any places where the code could break in production. Fix everything you find before we move on. This self-review prompt catches more issues than most code reviews and costs you nothing but ten seconds to type. Part Four: Building Skills Skills are the most underused feature in Claude Code and the one that makes the biggest difference for power users. A skill is a markdown file stored in a skills folder inside your project that defines a reusable workflow. Instead of typing out complex instructions every time you want to do the same process, you store the instructions once and call them by name. Create your skills folder: mkdir .claude mkdir .claude/skills Example Skill: Code Review Create .claude/skills/code-review.md: # Skill: Code Review ## Trigger When the user says "review this file" or "code review" or "check this code" ## Process 1. Read the specified file completely before making any comments 2. Evaluate the code against these criteria: - Correctness: does the code do what it claims to do - Security: are there any injection vulnerabilities, exposed secrets, or unsafe operations - Performance: are there obvious inefficiencies or N+1 query patterns - Readability: is the code clear and well-named - Edge cases: what inputs or states could cause this to fail 3. Provide feedback organized by severity: - CRITICAL: must fix before shipping - IMPORTANT: should fix soon - SUGGESTION: would be better with this change 4. For each issue, provide the specific line or section and a suggested fix ## Output format Numbered list organized by severity. For each item: what the issue is, why it matters, and how to fix it. End with a summary score out of 10 and one sentence on overall code quality. Now whenever you say "review this file" Claude Code runs the full review process exactly as you defined it. Example Skill: Feature Planning Create .claude/skills/plan-feature.md: # Skill: Plan Feature ## Trigger When the user says "plan this feature" or "help me plan" or "feature planning" ## Process 1. Ask clarifying questions if the feature is ambiguous — do not proceed until you understand what is being built 2. Identify all the files that will need to be created or modified 3. List the potential side effects on existing functionality 4. Identify any dependencies or blockers 5. Break the work into steps ordered by dependency — what must be built first ## Output A numbered implementation plan where: - Each step is specific enough to execute immediately - Dependencies are clearly marked - Estimated complexity is noted (simple / medium / complex) - Any risks or edge cases are flagged upfront Example Skill: Bug Investigation Create .claude/skills/debug.md: # Skill: Debug ## Trigger When the user says "debug this" or "find the bug" or "this is broken" ## Process 1. Read all files relevant to the reported behavior before forming any hypothesis 2. State your hypothesis about the cause — do not start fixing yet 3. Ask the user to confirm the hypothesis is correct 4. Only after confirmation, implement the fix 5. After fixing, explain what was wrong and why the fix works ## Key rules - Never guess and change code simultaneously. Diagnose first, fix second. - If you are not confident in the diagnosis after reading the files, say so and ask for more information. - Always test the fix mentally — trace through the code after the change to confirm the bug is actually resolved. Part Five: Multi-File Projects and Architecture Where Claude Code becomes genuinely powerful is in its ability to hold large amounts of context and work across multiple files simultaneously. Reading a Full Codebase When starting work on an existing project: Read all the files in this project. Start with the package.json to understand dependencies. Then read the main entry point. Then systematically read through each folder. After reading everything, give me a two paragraph summary of what this codebase does and how it is structured. This briefing step takes a few minutes but saves hours of confusion later. Claude Code will have a complete mental model of your project before touching anything. Maintaining Consistency Across Files When adding a feature that touches multiple files: I want to add a [feature] that will require changes to: - [file 1] to add the new data model - [file 2] to add the API endpoint - [file 3] to add the frontend component - [file 4] to add the test Before you write any code, read all four files and tell me what currently exists in each one. Then implement the changes in dependency order, reading each file again immediately before modifying it. The "read each file immediately before modifying it" instruction is critical. If Claude Code read a file twenty messages ago the information may be stale. Reading immediately before editing ensures accuracy. Refactoring Large Codebases Refactoring is where Claude Code significantly outperforms what most developers expect: This codebase has [describe the structural problem]. I want to refactor it to [describe the target architecture]. Before making any changes: 1. List every file that will need to change 2. Describe exactly what will change in each file 3. Identify the order of changes to avoid breaking anything mid-refactor 4. Flag any changes that could break existing functionality After I approve the plan, execute it step by step. Show me what you changed in each file before moving to the next one. Part Six: Security and Best Practices Protecting Sensitive Files Add this to every CLAUDE.md you create: ## Security Rules - Never read, access, reference, or modify any .env files - Never read any file containing the words "secret", "key", "token", or "password" in the filename - Never commit sensitive information to git - Never log environment variables or API keys - If you encounter hardcoded credentials anywhere in the codebase, flag them immediately instead of using them Safe Git Practices Never let Claude Code push to git without your explicit review: Show me every file you changed in this session. Give me a git diff summary. Do not commit or push anything until I confirm. When you are ready to commit: Create a git commit with a descriptive commit message that explains what was changed and why. Stage only the files relevant to this feature. Do not stage anything else. Show me the staged files and the commit message before committing. Reviewing Before Production Before any code goes live: Do a production readiness review of everything we built today. Check for: 1. Exposed API keys or secrets in any file 2. Missing error handling on any async operation 3. SQL injection or other security vulnerabilities 4. Missing input validation on any user-facing form or API endpoint 5. Console.log statements that should be removed 6. Any TODO comments that represent unfinished work 7. Missing loading states or error states in the UI Give me a list of everything that needs to be fixed before this ships. Part Seven: Automations and Routines Claude Code supports scheduled automations called routines. These let you run Claude Code workflows on a schedule without manual triggering. Creating a Daily Code Review Routine Create .claude/routines/daily-review.md: # Routine: Daily Code Review ## Schedule Every day at 9am ## Process 1. Read all files modified in the last 24 hours using git log 2. Run the code review skill on each modified file 3. Compile all issues found into a daily report 4. Save the report to .claude/reports/[date]-daily-review.md ## Output A markdown file with all issues organized by file and severity. Include the total issue count and a recommended priority order for fixing. Creating a Weekly Dependency Audit Create .claude/routines/weekly-audit.md: # Routine: Weekly Dependency Audit ## Schedule Every Monday at 8am ## Process 1. Read package.json 2. Check for any dependencies flagged as having security vulnerabilities 3. Identify any dependencies that have not been updated in more than 6 months 4. Check if any major version updates are available for core dependencies 5. Save findings to .claude/reports/[date]-dependency-audit.md Part Eight: From Zero to Shipped Here is the exact workflow I use to go from idea to live product using Claude Code. Day One: Architecture and Scaffold I am building [describe your product in 2-3 sentences]. The users are [describe your target user]. The core value is [describe the one thing users get from this]. Tech stack decision: - Frontend: Next.js 14 with TypeScript - Backend: Next.js API routes - Database: Supabase - Auth: Supabase Auth - Styling: Tailwind CSS - Deployment: Vercel Create the full project scaffold with: - Folder structure as described in my CLAUDE.md - Basic layout component - Supabase client setup - Environment variable template (.env.example — do not create .env) - Package.json with all dependencies - Basic README with setup instructions Do not start with placeholder content. Make every file production-ready from the start. Day Two: Core Features The scaffold is working. Now build the core features in this order: 1. Database schema — create the Supabase migration files for [describe your data model] 2. API layer — create the API routes that handle [describe your operations] 3. UI components — create the reusable components needed for [describe your interface] 4. Page assembly — assemble the components into pages After each step, tell me what you built and what the next step depends on before continuing. Day Three: Polish and Deploy The core features are working. Now do a full production readiness pass: 1. Error handling — every API call and async operation needs proper error handling 2. Loading states — every data-fetching operation needs a loading state 3. Empty states — every list or data display needs an empty state 4. Mobile responsiveness — every page needs to work on mobile 5. SEO — add proper meta tags to every page 6. Performance — identify and fix any obvious performance issues After the readiness pass, set up deployment to Vercel. Create a deployment checklist and walk me through each step. The Real Edge The people who get extraordinary results from Claude Code are not the ones who know more programming. They are the ones who treat Claude Code as a system rather than a tool. They have CLAUDE.md files that are deeply specific. They have skills for every repeating workflow. They have routines running automatically in the background. They read files before editing them. They do production readiness reviews before shipping. They ask Claude Code to evaluate its own work. The gap between using Claude Code as a coding assistant and using it as an autonomous builder is not about what Claude Code can do. It is about what you set up to let it do. This guide is the setup. Bookmark it. Build the CLAUDE.md. Create the skills. Ship the first project. The compound starts the moment you do. Follow @cyrilXBT for daily Claude Code builds, AI tools, and the exact systems behind everything I ship. Want to publish your own Article? Upgrade to Premium 1:13 AM · Apr 25, 2026 · 127.3K Views 10 20 214 259 Read 10 replies