---

Most people install Claude Code, type a prompt, get a mediocre answer, and walk away thinking "AI coding tools aren't that useful."

They're wrong. They just skipped the setup.

Without CLAUDE.md: Claude Code guesses your stack, writes .jsx in a TypeScript project, uses inline styles when you use Tailwind.

With CLAUDE.md: Same prompt produces production-ready code that matches your exact conventions. Every time.

This guide shows you how to go from zero to "I can't work without this" in about a week.

Start Here

The guide lives at claudecodeguide.dev. You don't need to install anything or clone this repo. Just open the site and start reading.

Open the 9-Step Setup Guide - takes about an hour, sticks forever.

---

Who This Is For

You don't need to be a developer. You don't need to know what a terminal is. You need to want Claude Code to actually work well.

• Absolute beginners who installed Claude Code and aren't sure what to do next
• Developers who use it daily but feel like they're leaving half the value on the table
• Product Managers who want to ship without waiting for eng - there's a whole templates section for you
• Founders building MVPs with AI and no dedicated engineering team
• Team Leads rolling out Claude Code across a team and want a repeatable playbook
• Anyone who tried it once, thought "meh", and deserves a second shot with proper context

---

What's Inside

The guide is 34 pages across 5 sections, plus 15 hands-on tutorials for every audience. Here's the full table of contents:

Foundations (9 pages) Which Interface? - Terminal vs IDE vs Web vs Desktop The CLAUDE.md Guide - The most important file in your project Session Lifecycle - Stop re-explaining yourself Plan Mode - Think before you build Permissions - Stop clicking "Allow" on everything Prompting - It's not what you think Shortcuts - Commands cheat sheet Cost Optimization - Is it worth $200/month? Glossary - Every term in plain English

Patterns (5 pages) Skills - Turn tasks into commands Hooks - Automate quality checks Sub-Agents - Delegate focused work MCP Servers - Connect to Slack, GitHub, Jira Autonomous Loops - Work while you sleep Workflows (4 pages) Daily Practice - The system that compounds Debugging - Stop guessing, start investigating Team Adoption - Roll out to your team CI/CD - Claude Code in pipelines

Comparisons (6 pages) vs Cursor vs GitHub Copilot vs Windsurf vs OpenAI Codex vs Gemini CLI Pro vs Max vs API

Templates (4 pages) Next.js App Monorepo Python Project PM Workspace Interactive 9-Step Setup Guide with progress tracking Learning Roadmap Blog Tutorials (15 hands-on micro-projects) Start Here - terminal + Claude App + VS Code routes Build Your First CLAUDE.md Ship a Landing Page in 30 Minutes Create Your First Skill No Terminal Required - Claude web app only Build a Stakeholder Map Automate Your Newsletter For Product Managers Product Discovery with OSTs Meeting Notes → Jira Tickets Weekly Status Report Generator Competitive Analysis in 30 Minutes Decision Memo from a Brain Dump For Everyone - no code, no terminal Performance Review in 20 Minutes 5 Articles → Research Briefing Slide Deck Outline in 15 Minutes Job Application Assistant Personal Finance Manager

---

Every Page Has Interactive Terminal Demos

No walls of text. Every concept shows you what to expect before you try it:

~ $ claude "add email validation to the signup flow"
  Reading signup form, API route, and schema...
  ✓ Created lib/validation.ts
  ✓ Updated signup form with error states
  ✓ Added server-side validation in API route
  ✓ 3 tests written and passing
  → Same task. Autocomplete vs full execution.

45+ animated terminal demos across 34 pages. Every tutorial also has an animated Claude App chat demo (no terminal required). The philosophy: show, don't tell.

---

PM Toolkit Family

Once you've finished the guide, there are a few other tools built for the same audience: people who want to actually get things done with AI, not just read about it.

If you're a PM, PM Pilot is the one to install next. Claude Code pre-configured for product work, 25 skills ready to go.

Tool	What it does
pm-pilot	Claude Code configured for PMs. 25 skills, ready to install.
bug-shepherd	Zero-code bug triage for PMs.
ceremonies	Agile ceremonies that don't suck. Retros, estimation, team analytics - open source.
morning-digest	Your morning briefed in 30 seconds.
root-kg	Your knowledge graph. Ask questions across all your notes, meetings, and emails - cited answers in plain English.

---

What went wrong and what I learned

One variable called heroDescription fed the homepage meta description, the OG tags, the Twitter card, and the WebSite JSON-LD at once. It mentioned Excel and PowerPoint, because at one point the site covered those.

Perplexity ingested that string as the site's entity record. Not as a page description, as the answer to what this site is. From then on it routed the site away from its own core queries. The benchmark confirmed it: absent from "how to use claude code", absent from "claude code memory system CLAUDE.md", absent from "claude code guide tips best practices". Personal blogs were being cited for those instead, which ruled out an official-sources-only filter. Querying the brand directly returned the site with the wrong description attached.

The reason it survived every review is the part worth remembering. The hero copy visible on the page was hardcoded separately in JSX. Every human look at that page was correct. Only the machine-readable copy was wrong, and nobody reads meta tags with their eyes.

The fix split the variable so meta and JSON-LD carry their own string, then retitled the page whose Excel content caused the contamination so the next crawl would not redo it.

A smaller version of the same class: public/hero.png was deleted during the move to dynamic OG images and README.md still pointed at it. GitHub renders READMEs independently of the Next.js build, so no build and no CI could have caught it. The site was green and the front door of the repo was broken. If a file is referenced from somewhere your build system does not look, your build system will not tell you.

Contributing

The guide is built with Next.js and Fumadocs. Every article is an .mdx file in content/docs/. If you can write Markdown, you can contribute.

Ways to help:

• Fix a typo - edit any .mdx file and open a PR
• Suggest a topic - open an issue
• Add a template - create a new .mdx in content/docs/templates/
• Improve a demo - DemoCard components are in src/components/demo-card.tsx

To run the site locally:

git clone https://github.com/mshadmanrahman/claudecode-guide.git
cd claudecode-guide
npm install
npm run dev

See CONTRIBUTING.md for full details.

Tech stack:

Layer	Tech
Framework	Next.js 16 (App Router, Turbopack)
Docs Engine	Fumadocs
Content	MDX with custom components
Styling	Tailwind CSS v4
Fonts	Newsreader + Space Grotesk + Geist Mono
Hosting	Vercel

Roadmap

• 34+ content pages with interactive terminal demos
• 9-step interactive setup guide with progress tracking
• Blog with Substack email capture
• Learning roadmap with 5 stages
• Dark mode, responsive, Vercel deployment
• 15 hands-on tutorials - terminal, Claude App, and VS Code/Cursor routes
• Animated AppChatDemo component for non-coder learning paths
• Shareable achievement cards at the end of every tutorial
• GA4 event tracking (tutorial_start, tutorial_complete)
• Video walkthroughs (Remotion)
• Community templates gallery
• "Ask the guide" AI assistant
• Translations (Bengali, Swedish, Spanish)

---

Support

If this guide helped you, give it a star. It helps others find it and keeps development going.

---

See Also

• pm-pilot: Claude Code configured for PMs. 25 skills out of the box.
• root-kg: Personal knowledge graph. Ask questions across all your notes, meetings, and emails.
• morning-digest: Your morning briefed in 30 seconds. Calendar, email, Slack, and action items.
• discovery-md: AI product discovery for PMs. From braindump to stakeholder one-pager.
• ceremonies: Agile ceremonies that don't suck. Retros, estimation, team memory.
• bug-shepherd: Zero-code bug triage for PMs. Reproduce and sync bugs without reading code.

---

License

MIT. Use it, fork it, make it yours.

---