Prompt Library

CLAUDE CODE — THE MENTAL MODEL

It's not a chatbot that hands you code to paste.
It's a builder that works inside your real project.

THE LOOP (this is the whole idea)
  1. READS    looks at your files to understand what's there
  2. ACTS     edits files & runs commands to make the change
  3. VERIFIES checks its own work, then loops back to fix what's off

…and you're in every loop:
  - You point   say what you want, in plain language
  - You approve it asks before changing things — nothing happens behind your back

Runs wherever you like — a friendly panel in your editor, or the
terminal. Same builder either way.

CLAUDE CODE — SET UP IN 10 MINUTES

EASIEST · the VS Code extension (no terminal)
  1. Install VS Code (free) from code.visualstudio.com
  2. In VS Code: Extensions → search "Claude Code" → Install
  3. Click the Claude icon in the sidebar → sign in
     (needs a Claude Pro or Max plan)
  4. Open your project folder, type in the panel, approve
     changes with a click.

PREFER THE TERMINAL · same builder, one command
  curl -fsSL https://claude.ai/install.sh | bash
  cd my-project
  claude
  # /exit to leave · claude --continue to resume
  # Mac: brew install --cask claude-code

No editor at all? The Claude desktop app is an all-in-one,
zero-setup option.

CLAUDE CODE — STAYING IN CONTROL (cheat-sheet)

SWITCH MODES
  Mode menu      click it in the VS Code panel (bottom of the prompt box)
  Shift + Tab    cycle modes — works in the panel AND the terminal
  Stop / Esc     interrupt Claude, then redirect

UNDO A MISTAKE
  /rewind        (or press Esc twice) roll the session back to an
                 earlier point — restore the code, the chat, or both
                 (undoes Claude's edits this session; commit to git
                  for everything beyond that)

THE FIVE MODES  (cautious → hands-off)
  Ask before edits     asks before every edit & command   (default — start here)
  Edit automatically   applies edits + safe commands; still asks before risky ones
  Plan mode            read-only; plans first, changes nothing
  Auto mode            runs on its own with safety checks   (newer)
  Bypass permissions   no prompts; hands-off — keep work in git so you can undo

By default Claude asks before anything that changes your project.
The looser modes trade prompts for speed — you opt into them.

Build a single-page landing site for a product called BrewLog.

BrewLog is an app for small cafés to track repeat customer orders.

The page should have:
- A hero with the product name, a one-line value prop, and an email signup.
- Three feature cards with short descriptions and simple icons.
- A testimonial from a fictional café owner.
- A footer with a fake email and social links.

Style: warm, friendly, café-inspired. Use a cream background, deep brown
for accents, and a serif heading font with sans-serif body text. Mobile
responsive. Use plain HTML, CSS, and a single index.html file — no framework.

When done, tell me the command to preview it locally.

THE PROMPT RECIPE — fill in the [brackets]

1) OUTCOME (one line)
Build a [what] for [who]. The one job it does is [goal].

2) THE SECTIONS (the concrete parts)
It should have:
- [section one — e.g. a hero with a headline + button]
- [section two]
- [section three]

3) LOCK THE DESIGN
Style: [mood, e.g. warm and minimal].
Colors: [#hex], [#hex].  Fonts: [heading font], [body font].
Mobile responsive.

4) CONSTRAIN THE TECH
Use plain HTML, CSS, and JavaScript in [one file / a few files].
No framework, no build step.

5) ASK FOR THE NEXT STEP
When done, tell me the command to preview it locally.

─────────────────────────────────────────────
WORKED EXAMPLE — the recipe, filled in (paste this whole thing)

Build a one-page website for a coffee shop called "Brew & Bloom",
for locals looking for a cozy place to work. The one job it does is
get people to come visit.

It should have:
- a hero with the name, a one-line tagline, and a "Find us" button
- a 3-item menu highlight (drinks with short descriptions)
- opening hours + address with a simple map placeholder
- a footer with social links

Style: warm and cozy, minimal.
Colors: #3b2417, #e8a04c.  Fonts: Poppins for headings, Inter for body.
Mobile responsive.

Use plain HTML, CSS, and JavaScript in one file. No framework, no build step.
When done, tell me the command to preview it locally.

Build a small multi-page marketing website for a brand called "vibethecoder".

vibethecoder is a YouTube series + free community that teaches non-technical
founders how to build and ship real products with AI coding tools — calm and
intentional, no hype. Tagline: "Ship real products without writing code."

Create FOUR pages that share one stylesheet and one JS file:
1. index.html (Home)
2. courses.html (Courses)
3. community.html (Community)
4. about.html (About)
Plus: styles.css (shared design system) and app.js (shared behavior).

DESIGN LANGUAGE — bold and colorful, on a clean white / soft off-white base:
- Brand gradient used for accents, buttons, icon tiles, and headline highlights:
  linear-gradient(100deg, #ff7a18 0%, #ff2e92 35%, #8b2fc9 68%, #2d6cff 100%)
  (orange -> pink -> purple -> blue)
- Ink/text color #16121f, body text #4a4358, hairline borders #ece8f3.
- Headings: "Plus Jakarta Sans" (700-800, tight letter-spacing). Body: "Inter".
- Big confident headlines with one phrase in gradient-filled text.
- Rounded "pill" buttons (border-radius 999px): a gradient primary button, a dark
  button, and a white ghost button with a border.
- Generous whitespace, soft shadows, cards that lift on hover.

SHARED COMPONENTS on every page:
- Sticky, blurred top nav: left = brand wordmark/logo, right = links
  (Home, Courses, Community, About) + a gradient "Join free" button. Collapses to
  a hamburger menu on mobile.
- Dark footer with the brand, a short tagline, an "Explore" link column, a
  "Connect" column (Skool, YouTube, Email), and a bottom copyright row.
- A reusable full-width gradient "call to action" band.

TECH: plain HTML, CSS, and vanilla JS only — no framework, no build step. Mobile
responsive. Use a Google Fonts <link> for the two fonts. Use placeholder links
("#") for the brand logo image, the Skool community, and the YouTube channel so I
can fill them in.

When done, tell me the command to preview it locally, and list which placeholder
links I need to replace.

BUILD MY FIRST APP — a habit tracker

OUTCOME
  Build a simple habit tracker web app that remembers my streaks.

SECTIONS
  - A list of my habits (start with: Drink water, Read, Move)
  - A "done today" check-off button on each habit
  - A streak count per habit (days in a row)
  - An "add habit" and "delete habit" control

REMEMBER IT
  Save everything in the browser with localStorage, so my habits
  and streaks are still there when I refresh or come back tomorrow.
  No accounts, no database, no keys.

DESIGN
  Clean and calm. Navy (#0f172a) + amber (#f59e0b), rounded cards,
  a friendly empty state. Works on my phone.

TECH
  One file: plain HTML, CSS & JavaScript. No frameworks.

THEN
  Tell me how to preview it. After I check a habit, I'll refresh to
  confirm the streak is still there.

SHOW, DON'T TELL — handy moves

POINT AT A FILE
  @styles.css is too cramped — add more spacing.
  Explain what @app.js does, in plain English.

PASTE A SCREENSHOT  (drag it in, or press Ctrl+V)
  Here's the bug: [paste screenshot] — the button overlaps
  the text. Fix it.
  Make my page match this design: [paste mockup].

COMBINE THEM
  This @index.html should look like the screenshot I just pasted.

Tip: type @ then start the filename, and pick it from the list.

PROVE IT WORKS — don't trust "done"

MAKE IT SHOW YOU
  Show me — open it in the browser and tell me how to preview it.
  Run it and report anything in the console that looks like an error.

CHECK IT YOURSELF
  [ ] The page actually loads (not blank)
  [ ] Every button / link does what it should
  [ ] The form submits and I see a result
  [ ] It looks right on my phone too

ASK IT TO TEST ITS OWN WORK
  Write and run a quick test for this, then fix anything that fails.

STILL WRONG? GET UNSTUCK
  - Paste the error or a screenshot (show, don't tell)
  - /rewind to a good point and try a different ask
  - /clear and re-explain if the chat is going in circles
  - Switch to Opus for a genuinely hard bug
  - Break it into one small step at a time

Check the OUTCOME, not the claim.

SHIP IT — from your machine to a live URL

SAVE YOUR WORK (git)
  Commit everything with a clear message.
  # Claude snapshots your files; you can always go back.

GO LIVE (deploy)
  Help me deploy this site so it has a public URL. Walk me
  through it step by step, using [Netlify / Vercel / GitHub Pages].

CHECKLIST
  [ ] Work committed (a save point exists)
  [ ] Host account created + signed in (one-time)
  [ ] Deployed — I have a live link
  [ ] Opened the link on my phone to check it

Claude always asks before pushing online or publishing.

# CLAUDE.md — project memory
# Tip: run /init first — Claude fills most of this in from your project. Then tweak.

## What this is
[One or two lines: what the project is and who it's for.]

## How to run it
- Install:        [e.g. npm install]
- Start / preview:[e.g. npm run dev]
- Build:          [e.g. npm run build]

## How to test it
- [e.g. npm test]

## Code style & conventions
- [e.g. plain HTML/CSS/JS, no framework; 2-space indentation]
- [Naming rules, formatting — anything you want followed]

## Project layout
- [folder/file] — [what it's for]
- [folder/file] — [what it's for]

## Gotchas (always / never)
- Always: [e.g. keep the shared design system in styles.css]
- Never:  [e.g. edit files in /vendor]

# Personal & cross-project notes go in ~/.claude/CLAUDE.md
# Run /memory anytime to see everything Claude is remembering.

Before I clear this conversation, act as a project archivist. Review
everything we decided and built in this session and persist it so nothing
is lost when context is wiped:

1. Save each durable decision, spec, or reusable asset into a clearly-named
   .md file in the project (distill the conclusions — don't dump the chat).
2. Update my memory/notes with one-line pointers to those files.
3. List any OPEN threads, half-finished work, and next steps as a short TODO.
4. Tell me what is already safely captured elsewhere (committed code, docs)
   so we don't duplicate.

Then give me a one-paragraph "where we are" I can paste into a fresh session.

WHICH MODEL WHEN  (cheat-sheet)

  Haiku    fast & cheap     simple, repetitive edits; quick questions
  Sonnet   balanced         your default — most building & debugging
  Opus     deepest thinker  genuinely hard problems, tricky bugs
  (Fable 5 sits above Opus for the very hardest jobs.)

  Rough cost:  Haiku  <  Sonnet  <  Opus   (Opus is several× Haiku)

SWITCH IT
  Panel:     pick from the model menu
  Terminal:  /model sonnet      (also opus, haiku, default)
             /effort low|high|max   how hard it thinks (cheap → deep)
             /fast              run Opus faster, higher cost (terminal)

WATCH THE METER
  /usage     your session cost + how much of your plan you've used

STAY CHEAP
  - Clear context often (long chats cost more)
  - Use the right engine — don't run Opus for simple edits
  - Plan before big builds

YOUR FIRST SKILL

Create this file in your project:
  .claude/skills/commit-check/SKILL.md

Put this inside:
---
description: Review my uncommitted changes before I commit.
---

Look at my current changes and:
1. Summarize what changed, in 2-3 bullets.
2. Flag anything risky (secrets, leftover TODOs, broken bits).
3. Suggest a short commit message.

Use it:  type  /commit-check   — or just ask "check my changes."

Tip: not sure where to start? Ask Claude: "make me a skill that ___."
Tweak settings anytime with  /config.

NEXT → Claude Code Pro: skills, hooks, subagents & routines that
work for you on a schedule.

CLAUDE CODE — THE MENU, DECODED

THE THREE YOU'LL ACTUALLY USE
  Mention file (@)  point Claude at a file instead of pasting it —
                    type @, pick a file, ask.            (Lesson 2.4)
  Effort            how hard it thinks: low = fast & cheap,
                    high = balanced (default), max = deep.
                    Set with /effort.                    (Lesson 3.3)
  Rewind            undo the whole session: /rewind (or Esc twice),
                    restore the code, the chat, or both. (Lesson 1.3)

TWO MORE — GOOD TO KNOW
  Thinking          see Claude's reasoning before the answer.
                    Ctrl+O to expand, Option+T to toggle. On by default.
  Switch model      a safety net: if a request gets declined, it
   when flagged     quietly retries on a backup model. Leave it on.

Most days you'll only touch the first three.

WORK WITH AN EXISTING PROJECT — the 3-step move

0 · OPEN IT
  Open the project folder in your editor (or cd into it), then start Claude.

1 · MAP IT
  /init
  # Claude scans the whole project and writes a starter CLAUDE.md.

2 · GET THE TOUR
  Explain this project in plain English — what is it, what's the
  tech, and where does the home page live?

3 · CHANGE ONE SMALL THING
  First, commit a snapshot so anything is undoable.
  Then: change the headline on the home page to "____".
  Then verify it worked before the next change.

Open it → understand it → change it.