Set up cursor

Let's get your system ready for vibe coding with Cursor. This takes about 15-20 minutes including all installations.(Not including breaking things, fixing them, and iterating)

Install Cursor

The AI-powered code editor

  • •Go to cursor.sh
  • •Click the big Download button
  • •Open your Downloads folder and double-click the installer
  • •Drag Cursor into your Applications folder

Shopifolk? Get set up here

Configure Cursor

Essential settings

  • •Install cursor command: Cmd+Shift+P → type "Shell Command: Install 'cursor' command" → click it
  • •Enable format on save: Cmd+, → search "format on save" → toggle on
  • •Set AI models: Cursor menu → Cursor Settings → Models → enable Claude Sonnet & Opus

Install Node.js

Required to run your apps

  • •Open Terminal in Cursor: go to Terminal → New Terminal or press Ctrl+` (Control + backtick)
  • •Check if Node is already installed by typing: node -v
  • •If you see a version number, skip to the next card. If not, continue below.
  • •Install Homebrew by pasting this in Terminal:
  • •
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  • •Press Enter and wait for installation (you'll need your password)
  • •After Homebrew installs, run: brew install node
  • •Verify by running: node -v

⚠️ If installation fails, don't retry—ask a friend or developer for help

Set Up Your Workspace

Organize your projects

  • •In Finder, go to your Home folder (or choose a location for your projects)
  • •Create a `vibe-coding` folder
  • •Inside that, create a `my-first-app` folder
  • •Open this folder in Cursor (drag it onto Cursor or use File → Open Folder)
  • •💡 Optional upgrades:
    • • Install iTerm2 for a better terminal
    • • Install Oh My Zsh for terminal superpowers

Keep each project in its own folder—agents create many files!

Using AI Agents

Let Cursor write and implement code for you

  • •Cmd+I → Agent mode (implements code)
  • •Cmd+L → Chat mode (answers questions)
  • •Select the Claude model with the 🧠 icon for best results
  • •💡 Pro tips:
    • • Be specific—one task at a time
    • • Add custom rules for better results
    • • Restart the chat if it gets stuck

Clear instructions = better results. Vague prompts = messy code.

Your First Project

Build something real

  • •Open Agent mode (Cmd+I) and paste:
  • •
    Create a Next.js app with JavaScript and Tailwind CSS. Use App Router, install Framer Motion for animations. Run the dev server when done.
  • •Wait for the setup to complete, then visit http://localhost:3000
  • •Server controls:
    • • Ctrl+C → stop server
    • • npm run dev → restart server

If Claude creates multiple servers, stop extras with Ctrl+C

Working with Context

Help Claude understand your needs

  • •Reference files with @filename or drag & drop
  • •Add screenshots or mockups for Claude to replicate
  • •Try this: Create hello.txt → write "hello world" → use @hello.txt to reference it
  • •💡 Write complex prompts in .txt files instead of the chat box

Essential Shortcuts

Speed up your workflow

  • •Cmd+K → Edit code in-file
  • •Cmd+L → Chat with AI
  • •Cmd+I → Agent mode
  • •Cmd+P → Find files
  • •Tab → Accept suggestions
  • •Shift+Cmd+` → Terminal
  • •Ctrl+C → Stop server (in terminal)

Set Up GitHub

Save and share your code

  • •Create a free account at github.com
  • •In Cursor, open the Source Control panel (icon on left sidebar)
  • •Initialize repository: click "Initialize Repository" button
  • •Stage changes: click the + icon next to "Changes"
  • •Commit: type a message like "Initial commit" and click checkmark
  • •Push to GitHub: click "Publish Branch" and follow prompts
  • •💡 Your code is now backed up and shareable!

GitHub saves your work online—never lose code again

What's Next?

You're ready to start vibe coding!