Lab/

Getting Started with Claude Code

Claude Code is an AI that lives in your terminal and builds things with you. You describe what you want. It writes the code, runs commands, creates files, and deploys. This guide gets you from zero to your first deployed project in about ten minutes.

What is Claude Code?

Most AI coding tools are autocomplete on steroids — they suggest the next line. Claude Code is different. It's an agent. You give it a goal, and it figures out how to get there: reading your files, writing code, running tests, fixing errors, deploying to the web.

You interact through your terminal. No browser tab, no IDE plugin required. Just open a folder, start Claude Code, and tell it what you want to build.

Your First Ten Minutes

Install Claude Code

One command. Requires Node.js 18+.

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

You'll need an Anthropic API key or a Max plan. The install will walk you through authentication.

Open a project folder

Navigate to any folder — an existing project or an empty one — and start Claude Code:

mkdir my-project && cd my-project
claude

That's it. You're in a conversation with Claude, and it can see your files.

Build something

Type what you want. Be as vague or specific as you like. Here are real prompts that work:

> create a landing page for a coffee shop called "Third Wave"

> build a todo app with local storage

> I have a CSV of sales data. Make a dashboard with charts.

Claude will create files, install dependencies, and tell you how to preview the result. For a Next.js project, it usually runs npm run dev automatically.

Deploy it

Install Vercel CLI once, then deploying is a single prompt:

npm install -g vercel && vercel login

# Then just tell Claude:
> deploy this to vercel

You'll get a live URL in about 30 seconds. Every change after this is just "deploy" or "push it."

Iterate

Now you have a live site. Keep going. Claude remembers everything about the project within a session:

> make the header sticky

> add a dark mode toggle

> the contact form doesn't validate email addresses

> make it look better on mobile

Tip

You don't need to explain the codebase. Claude has already read your files. Short prompts work best once context is established.

Making It Yours

The single most powerful customization is a CLAUDE.md file. It's a markdown file that tells Claude how to work with you — your preferences, project conventions, and things it should always remember.

Create one at ~/.claude/CLAUDE.md for global preferences, or in any project root for project-specific instructions.

# My Preferences

## Style
- Be concise, no fluff
- Use TypeScript when possible
- Deploy to Vercel with `vercel --prod`

## Project Conventions
- Tests go in __tests__/ directories
- Use Tailwind for styling

## Things to Remember
- My GitHub username is: YOUR_USERNAME
- Never commit .env files

Tip

This is how you build a working relationship with Claude over time. Start simple, add rules as you notice patterns. My own CLAUDE.md is about 60 lines and has been refined over months.

Handling Secrets

Important

Never put API keys in .env files when using AI coding tools. Claude can read your files — anything in plaintext can end up in conversation context.

The simple approach: export secrets in your shell profile. Claude can use $OPENAI_API_KEY as an environment variable without ever seeing the value.

# Add to ~/.zshrc (or ~/.bashrc)
export OPENAI_API_KEY="sk-..."
export SUPABASE_URL="https://..."

# Restart your terminal, then Claude can use them:
> use the OpenAI API to generate embeddings

The robust approach: use a credential manager like secret-lover that stores secrets in macOS Keychain and injects them at runtime.

Patterns That Work

Think in outcomes, not instructions

Instead of "write a function that validates email addresses," try "add signup with validation, error states, and success feedback." Let Claude figure out the implementation. You focus on what you're building, not how.

Short prompts after context is set

Once Claude understands your project, you can be terse. "darker" adjusts colors. "mobile" fixes responsive issues. "deploy" ships it. This feels strange at first, but it works.

Context management

Claude Code has a context window — think of it as working memory. Use /compact to compress context when it gets long. /clear to start fresh when switching tasks. Point Claude at specific files when you want it to focus.

Iterate fast, deploy early

Get something live quickly, then refine it in place. A deployed prototype you can test on your phone is worth more than a perfect local build you haven't looked at in a browser.

Advanced

Going Deeper

Once you're comfortable with the basics, these tools extend what Claude Code can do. Skills teach it specialized workflows. MCP servers connect it to external tools. CLIs give it access to your infrastructure.

Skills

Prompt files that teach Claude Code specialized workflows. Invoke with slash commands like /input or /codevibing. Install from my skills repo.

getinput

Human-in-the-loop feedback widget. Add to any site, send a ?getinput URL, get structured edits and comments back.

feedbackreview

card-deck-creation

Create themed card decks with AI-generated artwork via MuleRouter, Puppeteer rendering to PNG, and web gallery deployment.

generativedesign

site-design-replication

Crawl, analyze, and remix website designs. Extracts full design systems into LLM-ready docs.

designcrawling

d3-visualization

Interactive data visualizations with D3.js. Includes scale reference, color schemes, and reusable patterns.

datavizd3

literature-review

Systematic literature reviews across PubMed, arXiv, bioRxiv, and Semantic Scholar with verified citations.

researchacademic

session-replay

Create animated canvas-based replays of Claude Code building sessions as standalone HTML files.

metasharing

MCP Servers

Model Context Protocol servers give Claude access to external tools and data. Configure in ~/.claude/mcp_servers.json.

chrome-devtools

Connect Claude to Chrome DevTools for live browser inspection, console access, and DOM manipulation.

browserdebugging

gemini

MCP wrapper for Gemini CLI. Offload bulk content generation and large file analysis to Gemini 2.0 Flash.

llmdelegation

source-library

Direct access to 116+ digitized historical texts — search, retrieve, and cite from within Claude Code.

researchhumanities

CLI Tools

Command-line tools Claude can invoke directly. Standard CLIs on your system that Claude learns to use through CLAUDE.md instructions.

gh

GitHub CLI for repo management, PRs, and issues without leaving the terminal.

git

vercel

Deploy to Vercel with `vercel --prod`. The default deployment target.

deploy

secret-lover

Credential manager backed by macOS Keychain. No .env files — secrets stored securely and injected at runtime.

security

Install skills from inside Claude Code: paste this URL and Claude will browse the catalog and install what fits your project.

https://dereklomas.me/api/skills

All tools are open source

Clone the repo, fork individual skills, or use them as templates for your own.

View on GitHub