Writing

Cursor Dev shortcuts

March 2026

Quick reference for terminal commands, project setup, and Figma MCP workflow

Everyday Commands

Navigate to project

cd ~/Downloads/11-March-Bunch-Repo/bunch-digital

Start local dev server

npm run dev

Runs the Vite dev server. Open the localhost URL it prints.

Install dependencies

npm install

Run after pulling new code or if you see module-not-found errors.

Pull latest code from Bitbucket

git pull

Fetches and merges the latest changes from the remote repo.

Check project status

git status

Shows which files have changed, what's staged, and current branch.

Explore the Codebase

List top-level source files

ls src/

List pages

ls src/pages/

List components

ls src/components/

View a specific file

cat src/pages/HomePage.tsx

Search for something in code

grep -r "searchTerm" src/

Cursor Workflow

Cursor is your AI code editor. Use it for building screens and editing components.

  1. Open the project folder in Cursor → File → Open Folder → select bunch-digital
  2. Start the dev server in Cursor's terminal → npm run dev (View → Terminal to open it)
  3. Edit with AI → Select code → Cmd+K to prompt Cursor's AI. Or use the chat sidebar for larger changes.
  4. Preview changes → Open the localhost URL in your browser. Vite hot-reloads on save.

Git Basics

Check current branch

git branch

Switch to a branch

git checkout branch-name

Create a new branch

git checkout -b my-new-branch

Stage all changes

git add .

Commit with a message

git commit -m "describe what changed"

Push to Bitbucket

git push

Pull latest

git pull

⚠️ Always pull before starting work. Always commit before switching branches.

Figma MCP — Push Localhost to Figma

This workflow captures your running localhost screen and pushes it into a Figma file. Requires Claude Code (terminal CLI).

Prerequisites: Claude Code installed • Figma Remote MCP connected • Project running on localhost

1. Check if Figma MCP is set up

claude mcp list

Look for figma-remote-mcp in the output.

2. If not set up — add the Figma MCP server

claude mcp add --scope user --transport http figma-remote-mcp https://mcp.figma.com/mcp

Only needed once. It persists across sessions.

⚠️ If MCP auth expires, remove and re-add the server. Just re-running /login won't fix it.

3. Start the dev server (Terminal Tab 1)

cd ~/Downloads/11-March-Bunch-Repo/bunch-digital
npm run dev

Note the localhost port number (e.g. 5173).

4. Open Claude Code in the project (Terminal Tab 2)

cd ~/Downloads/11-March-Bunch-Repo/bunch-digital
claude

This starts Claude Code in the project context.

5. Prompt Claude Code to push to Figma

In Claude Code, type:

Use the Figma MCP generate_figma_design tool to capture the screen at http://localhost:[PORT] and push it to: [FIGMA_URL]

Replace [PORT] with the number from step 3 and [FIGMA_URL] with your Figma file link.

Troubleshooting

npm run dev fails with ENOENT

cd ~/Downloads/11-March-Bunch-Repo/bunch-digital

You're in the wrong directory. Navigate to the project first.

Module not found errors

npm install

Dependencies are missing. Install them.

cd: string not in pwd

Check for spaces in the path. No space after ~/ before the folder name.

Figma MCP auth expired

claude mcp remove figma-remote-mcp
claude mcp add --scope user --transport http figma-remote-mcp https://mcp.figma.com/mcp

Remove and re-add the server. Re-running /login alone won't fix it.

Port already in use

lsof -i :5173

Find what's using the port. Kill it or use a different port.